1.0.0 • Published 2 years ago
@nora7aki/vue-field v1.0.0
@nora7aki/vue-field
用于移动端快速构建基于 vue 项目 three.js 场景的框架
安装
yarn add @nora7aki/vue-field
引入
import field from '@nora7aki/vue-field'
app.use(field)
使用
在组件中使用 field
<template>
<field ref="fieldComponent" />
</template>
脚本样例
<script>
export default {
setup() {
const fieldComponent = ref(null)
const cameraType = 'perspective'
let field, scene, controls, renderer, camera
// 往场景中增加网格对象
function dealinscene() {
const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
const torusKnot = new THREE.Mesh(geometry, material)
scene.add(torusKnot)
}
onMounted(() => {
// 从组件获取field对象
field = fieldComponent.value.field
// 获取初始化的场景
scene = field.scene.base
// 创建渲染器
renderer = field.renderer.webgl = field.webglRenderer()
// 创建摄像机 perspectiveCamera / orthographicCamera
camera = field.camera.base = field[`${cameraType}Camera`]({
near: 0.1,
far: 7000,
position: [0, 0, 100],
target: [0, 0, 0],
fov: 75,
size: renderer._s,
})
// 创建控制器
controls = field.orbitControls(camera, renderer.domElement)
// 创建render函数
field.render.base = function () {
controls.update()
renderer.render(scene, camera)
}
// 讲渲染器结果canvas加载到页面
// fieldDiv是固定的
fieldComponent.value.fieldDiv.append(renderer.domElement)
dealinscene()
})
return {
fieldComponent,
cameraType,
}
},
}
</script>
联动 vue-force
将 Field
组件放在 Force
组件当中,同时在 setup
的时候给 field
对象增加 posture
参数
// 设置posture属性
const force = inject('force')
force.posture = 'portrait'
onMounted(()=>{
// ...
field.posture = force.posture
})
1.0.0
2 years ago