【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. 注意事项

这里有几个注意事项：

1. onMounted 挂载threejs场景dom时，必须在 onMounted里面。mount.value.appendChild(renderer.domElement);
2. 必须为dom挂载width/height。