@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

@nora7aki/vue-force

将 Field 组件放在 Force 组件当中，同时在 setup 的时候给 field 对象增加 posture 参数

// 设置posture属性
const force = inject('force')
force.posture = 'portrait'

onMounted(()=>{
    // ...
    field.posture = force.posture
})