vue 使用 three.js 加载gltf

Vue 和 Three.js 结合可以让你在 Vue 应用程序中轻松地创建复杂的3D场景，包括加载GLTF模型。以下是简单的步骤：

1. **安装依赖**：
首先，你需要安装 `@vue/threejs` 组件，它是一个专门为 Vue 提供 Three.js 支持的库。你可以通过npm或yarn添加这个依赖：

   npm install @vue/threejs
   # 或者
   yarn add @vue/threejs

2. **引入并设置组件**：
在你的 Vue 文件中，导入 `THREE` 和 `VueThreeRenderer`：

   import * as THREE from 'three';
   import { VueThreeRenderer } from '@vue/threejs';

3. **在模板中渲染3D场景**：
创建一个组件，例如 `MyScene.vue`，然后在模板部分使用 `<vue-three-renderer>` 组件：

   <template>
     <div id="app">
       <vue-three-renderer ref="renderer"></vue-three-renderer>
     </div>
   </template>

   <script>
   export default {
     components: {
       VueThreeRenderer,
     },
     setup() {
       const gltfLoader = new THREE.GLTFLoader();
       return {
         init() {
           // 加载gltf文件
           gltfLoader.load('/path/to/your/model.gltf', (gltf) => {
             // 解析并操作加载后的模型
             const scene = gltf.scene;
             this.$refs.renderer.setScene(scene);
           });
         },
       };
     },
   }
   </script>

4. **初始化渲染器**：
在 `setup` 函数的 `init` 方法里，加载 GLTF 模型，加载完成后将场景设置到渲染器上。

5. **运行应用**：
确保你在 main.js 中注册你的组件，并在适当的地方调用 `this.init()` 来启动加载过程。

注意：
- 更新 Three.js 到最新版本以获取最佳兼容性和功能。
-