vue3中 Three.js引入

在 Vue 3 中引入 Three.js 可以分为几个步骤：

1. **安装依赖**：首先你需要通过 npm 或者 yarn 安装 Three.js 和相关的库，例如 Vue-Threeify 这样的封装组件使其更好地与 Vue 结合。可以使用下面的命令：

   npm install three @vue-three/vue-threeify --save
   # 或者
   yarn add three vue-threeify

2. **配置**：在 `main.js` 或者全局设置文件中引入并配置 Three.js 和 Vue-Threeify：

   import * as THREE from 'three';
   import { createApp } from 'vue';
   import VueThree from '@vue-three/vue-threeify';

   // 如果需要的话，也可以创建一个 Vue 插件
   const app = createApp(App);
   app.use(VueThree, {
     three: new THREE.Scene(),
     renderer: new THREE.WebGLRenderer()
   });

   // 然后挂载到 DOM 上
   app.mount('#app');

3. **在组件中使用**：现在可以在 Vue 组件中利用 Three.js 的 API 创建几何体、相机、灯光等元素，并监听渲染循环 (`requestAnimationFrame`) 来更新场景：

   <template>
     <div ref="canvas"></div>
   </template>

   <script>
   export default {
     mounted() {
       this.$refs.canvas.appendChild(this.renderer.domElement);
       // 初始化 Three.js 组件...
     },
     methods: {
       animate() {
         requestAnimationFrame(() => this.animate());
         this.renderer.render(this.scene, this.camera); // 更新渲染
       }
     }
   };
   </script>