【ThreeJS】Threejs +Vue3 开发基础
目前流行的前端3D框架以以Three.js、Babylon.js、A-Frame和ThingJS为例：
1.Three.js
功能： 提供了大量的3D功能，包括基本几何形状、材质、灯光、动画、特效等。
易用性： 功能强大且易于使用，抽象了复杂的底层细节，使得开发者可以更容易地开发3D应用。然而，对于初学者来说，可能需要花费较多时间理解和学习。
性能： 由于其广泛的使用和成熟的生态系统，Three.js在性能上表现良好。
社区支持： 拥有庞大的开发者社区和丰富的教程资源，方便开发者学习和交流。
2.Babylon.js
功能： 与Three.js类似，提供了丰富的3D功能，但更加注重游戏和虚拟现实的应用。
易用性： 同样易于使用，并且提供了多种材质和着色器、物理引擎、灯光、粒子系统等功能，可用于创建复杂的3D场景和交互式应用程序。
性能： 在性能方面与Three.js相当，均能满足大多数3D应用的需求。
社区支持： 虽然社区规模可能稍小于Three.js，但Babylon.js同样拥有活跃的开发者社区和丰富的教程资源。
3.A-Frame
功能： 基于WebVR的3D框架，使用简单的HTML标记语言来构建3D场景。
易用性： 非常适合快速创建3D体验，提供了一组简单易用的组件，包括实体、相机、光源、声音、特效等。
性能： 在WebVR应用中表现良好，但由于其专注于VR体验，可能在某些非VR应用中表现受限。
社区支持： A-Frame的社区相对较小，但活跃度高，且得到了Mozilla等机构的支持。
4.ThingJS
功能： 新兴的3D框架，专注于物联网领域的JavaScript 3D Library。封装了对模型的操作和交互事件，简化了3D应用开发。
易用性： 对于无3D开发经验的人员来说，ThingJS更容易上手。它封装了复杂的3D概念，使得开发者可以更专注于业务逻辑的实现。
性能： 虽然性能可能稍逊于Three.js和Babylon.js等成熟的框架，但足以满足大多数物联网应用的需求。
社区支持： ThingJS的社区规模较小，但得到了优锘科技等公司的支持，并提供了丰富的教程和示例。
我们选中Threejs，没办法，开源，资料又多，坑比较少。
1. 安装依赖
首先，你需要在你的Vue3项目中安装Three.js。你可以使用npm或yarn来安装它.
npm install three
# 或者
yarn add three
2. 集成Three.js到Vue3组件
接下来，你可以在一个Vue3组件中集成Three.js。以下是一个基本的步骤指南：
- 创建Vue3组件：你可以使用Vue CLI或Vite等工具创建一个新的Vue3项目，并添加一个Vue组件。
- 引入Three.js：在你的Vue组件中，使用import语句引入Three.js库。
- 设置Three.js场景：在组件的setup函数或mounted钩子中，设置Three.js的场景、相机和渲染器。
- 渲染循环：使用requestAnimationFrame来创建一个渲染循环，并在其中更新和渲染你的3D场景。
- 添加交互：根据需要，为你的3D场景添加鼠标或触摸事件交互。
3. 示例代码
以下是一个简单的Vue3组件示例，它使用了Three.js来渲染一个旋转的立方体：
<template> <div ref="mount"></div>
</template> <script setup lang="ts">
import * as THREE from 'three'; const mount = ref(null); onMounted(() => { const width = mount.value.clientWidth; const height = mount.value.clientHeight; // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.z = 5; // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); mount.value.appendChild(renderer.domElement); // 创建立方体几何体和材质 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube); // 渲染循环 const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; animate();
});
</script> <style scoped>
div { width: 100vw; height: 100vh;
}
</style>
4. 注意事项
这里有几个注意事项：
onMounted挂载threejs场景dom时，必须在onMounted里面。mount.value.appendChild(renderer.domElement);- 必须为dom挂载width/height。