vue threejs加载本地磁盘glb文件

在Vue.js项目中使用Three.js加载本地磁盘GLB（GL Transmission Format）文件，首先需要确保你的项目已经安装了`@vue/threejs-loader`和`three`库。接下来，你可以按照以下步骤操作：

1. **安装依赖**:
在项目目录下运行`npm install @vue/threejs-loader three gltf-loader`命令，确保`gltf-loader`用于解析GLB文件。

2. **设置配置**:
在`.vue`组件的`<script>`标签内，使用`import`引入所需的模块，并在`setup`函数中注册`THREE`实例：

   import { ref, onMounted } from 'vue';
   import * as THREE from 'three';
   import GLTFLoader from 'three/examples/jsm/loaders/GLTFLoader';

   setup() {
     const scene = ref(new THREE.Scene());
     // ...

     onMounted(async () => {
       const loader = new GLTFLoader();
       loader.load('./path/to/local/file.glb', (gltf) => {
         scene.value.add(gltf.scene);
       });
     });

     return { scene };
   }

3. **更新模板**:
在`.vue`模板中，添加一个`<canvas>`元素作为渲染容器，并监听它的`render`事件：

   <template>
     <div id="app">
       <canvas :ref="canvasRef" @render="onRender"></canvas>
     </div>
   </template>

   <script>
   export default {
     setup() {
       // ...
       const canvasRef = ref(null);
       const onRender = (event) => {
         event.context.render(scene.value, camera.value);
       };

       return { canvasRef, onRender };
     },
   };
   </script>

4. **注意安全**:
如果是在生产环境中，确保遵守同源策略（Same-Origin Policy），因为默认情况下浏览器不允许跨域访问本地文件。在开发环境下可以临时开启`file://`协议的同源策略，但在部署时要确保合法的网络请求路径。