Vue3 结合 Three.js 开发 3D 应用有哪些优势？

在当今的前端开发领域，Vue3 与 Three.js 的结合正逐渐成为热门趋势，Vue3 结合 Three.js 开发 3D 应用究竟有哪些优势呢？

Vue3 的响应式系统与 Three.js 的场景管理

Vue3 拥有高效的响应式系统，当数据发生变化时，它能够精准地通知相关组件进行更新，在 3D 应用开发中，场景里的物体属性（如位置、旋转、缩放等）可以作为响应式数据，我们可以创建一个 Vue3 的响应式对象来存储一个 3D 模型的位置信息：

import { reactive } from 'vue';
const modelPosition = reactive({ x: 0, y: 0, z: 0 });

然后在 Three.js 的渲染循环中,实时获取这个响应式数据来更新模型的位置：

function render() {
    requestAnimationFrame(render);
    model.position.set(modelPosition.x, modelPosition.y, modelPosition.z);
    renderer.render(scene, camera);
}

这样，当我们在 Vue 组件中通过用户交互（如拖动滑块）改变 modelPosition 的值时，Three.js 场景中的模型会立即做出相应的位置变化。

而 Three.js 本身强大的场景管理能力，能够轻松创建、管理和渲染复杂的 3D 场景，它提供了丰富的几何体（如立方体、球体、圆柱体等）、材质（如基础材质、物理材质等）和灯光（如环境光、点光源、平行光等），Vue3 可以利用其组件化的思想，将 Three.js 中的不同元素封装成 Vue 组件，我们可以创建一个 CubeComponent 组件,专门用于管理一个立方体：

<template>
    <div ref="cubeContainer"></div>
</template>
<script>
import * as THREE from 'three';
export default {
    mounted() {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        this.$refs.cubeContainer.appendChild(renderer.domElement);
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    }
}
</script>

通过这种方式，Vue3 的响应式系统与 Three.js 的场景管理完美结合，使得 3D 应用的开发更加灵活和高效。

Vue3 的组件化开发与 Three.js 的复用性

Vue3 的组件化开发是其一大亮点，在 3D 应用中，我们可以将不同的 3D 元素（如模型、灯光、相机等）封装成独立的 Vue 组件，我们创建一个通用的 LightComponent 组件来管理点光源：

<template>
    <!-- 这里可以添加一些用于控制灯光属性的 UI 元素，如输入框控制强度 -->
</template>
<script>
import * as THREE from 'three';
export default {
    props: {
        position: {
            type: Array,
            default: () => [0, 0, 0]
        },
        intensity: {
            type: Number,
            default: 1
        }
    },
    mounted() {
        const light = new THREE.PointLight(0xffffff, this.intensity);
        light.position.set(...this.position);
        // 假设在父组件中有一个 Three.js 的场景对象，通过 props 传递进来
        this.$props.scene.add(light);
    }
}
</script>

这样，在不同的 3D 场景中，我们只需要引入 LightComponent 组件，并传入相应的属性（如位置、强度）,就可以快速添加点光源。

Three.js 本身也具有很好的复用性，它的几何体、材质等都可以被多个 3D 对象共享，我们创建一个通用的 CommonMaterial 材质：

const commonMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

然后在多个立方体组件中使用这个材质：

const cube1 = new THREE.Mesh(new THREE.BoxGeometry(), commonMaterial);
const cube2 = new THREE.Mesh(new THREE.BoxGeometry(), commonMaterial);

Vue3 的组件化开发与 Three.js 的复用性相结合，使得我们可以快速构建复杂的 3D 应用，我们可以将一些常用的 3D 组合（如一个带有特定材质和动画的模型组合）封装成一个 Vue 组件，在不同的项目或场景中直接复用,大大提高了开发效率。

Vue3 的生态系统与 Three.js 的拓展性

Vue3 拥有庞大且活跃的生态系统，有许多优秀的 Vue 插件和库可以辅助开发。vue-router 可以帮助我们实现 3D 应用中的页面路由跳转（虽然 3D 应用通常是单页面应用，但在一些大型项目中可能会有类似“场景切换”的需求），我们可以定义不同的路由，每个路由对应不同的 3D 场景组件：

import { createRouter, createWebHistory } from 'vue-router';
import Scene1 from './components/Scene1.vue';
import Scene2 from './components/Scene2.vue';
const routes = [
    { path: '/scene1', component: Scene1 },
    { path: '/scene2', component: Scene2 }
];
const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

然后在 Vue 应用的入口文件中使用 router。

Three.js 也具有很强的拓展性，它有大量的社区插件和扩展库。three - orbit - controls 可以为相机添加轨道控制（让用户可以通过鼠标拖动来旋转、缩放和平移相机视角），在 Vue3 项目中使用它也很简单：

<template>
    <div ref="sceneContainer"></div>
</template>
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
export default {
    mounted() {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        this.$refs.sceneContainer.appendChild(renderer.domElement);
        const controls = new OrbitControls(camera, renderer.domElement);
        // 其他场景设置和渲染循环代码...
    }
}
</script>

Vue3 的生态系统与 Three.js 的拓展性相互补充，我们可以利用 Vue3 生态中的工具进行项目管理、状态管理（如 pinia）等，同时借助 Three.js 的拓展库实现更多丰富的 3D 功能，如更真实的物理效果（通过 cannon - js 与 Three.js 结合）、粒子系统（使用 three - particle - system 等插件）。

开发效率与维护成本

使用 Vue3 结合 Three.js 开发 3D 应用，在开发效率上有显著提升，Vue3 的简洁语法和组件化开发模式，让开发者可以快速搭建界面和逻辑，对于 3D 场景中的交互逻辑（如点击模型触发事件），可以在 Vue 组件中轻松实现：

<template>
    <div ref="sceneContainer" @click="onSceneClick"></div>
</template>
<script>
import * as THREE from 'three';
export default {
    mounted() {
        // 场景创建和初始化代码...
    },
    methods: {
        onSceneClick(event) {
            const raycaster = new THREE.Raycaster();
            const mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects(scene.children);
            if (intersects.length > 0) {
                // 处理点击到模型的逻辑
                console.log('点击到了模型:', intersects[0].object);
            }
        }
    }
}
</script>

在维护成本方面，Vue3 的响应式和组件化使得代码结构清晰，当需要修改某个 3D 元素的功能或样式时，只需要找到对应的 Vue 组件进行修改即可，要修改一个模型的材质颜色，只需要在该模型对应的 Vue 组件中修改材质的颜色属性：

// 在模型组件的某个方法中
model.material.color.set(0xff0000); // 将颜色改为红色

而 Three.js 本身良好的文档和社区支持，也为维护提供了便利，如果遇到 3D 渲染或数学计算（如矩阵变换、向量运算等）方面的问题,都可以在社区中找到解决方案。

Vue3 结合 Three.js 开发 3D 应用具有多方面的优势，从数据响应与场景管理，到组件复用与生态拓展，再到开发效率和维护成本，它们的结合为开发者提供了一个强大而灵活的工具链，能够满足各种复杂 3D 应用的开发需求，无论是游戏、虚拟现实、建筑可视化还是产品展示等领域,都有着广阔的应用前景。