vue2 three.js加载glb

### 在 Vue 2 中使用 Three.js 加载 GLB 文件 为了在 Vue 2 项目中成功加载并显示 `.glb` 模型文件，需按照如下方式设置环境： #### 安装依赖库 确保安装了 `three` 库以及必要的扩展插件。可以通过 npm 或 yarn 来完成这些包的安装。 ```bash npm install three @types/three --save ``` 或者 ```bash yarn add three @types/three ``` #### 导入所需模块 在组件内部导入 Three.js 及其附加功能，比如用于加载 .glb 文件的 `GLTFLoader` 和处理 Draco 压缩格式的支持工具 `DRACOLoader`[^1]。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; ``` #### 初始化场景、相机和渲染器 创建基本的 Three.js 场景结构，在此过程中定义视角范围、初始化 WebGL 渲染上下文等操作。 ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true, // 抗锯齿效果开启 }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加轨道控制器以便于交互查看模型细节 const controls = new OrbitControls(camera, renderer.domElement); controls.enableZoom = true; ``` #### 配置 Draco 解码路径（如果适用） 当使用的模型经过 Draco 编码压缩时，则需要指定解码所需的 JavaScript 脚本位置，并配置好相应的参数选项[^2]。 ```javascript const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('/path/to/draco/'); dracoLoader.setDecoderConfig({ type: 'js' }); dracoLoader.preload(); const loader = new GLTFLoader().setDRACOLoader(dracoLoader); ``` #### 加载 GLB 模型 通过调用 `loader.load()` 方法来异步获取远程服务器上的资源数据流，并将其解析成可被 Three.js 处理的对象实例。 ```javascript loader.load( '/models/myModel.glb', (gltf) => { console.log(gltf.scene); scene.add(gltf.scene); animate(); // 开始动画循环 function animate() { requestAnimationFrame(animate); // 更新逻辑... renderer.render(scene, camera); } }, undefined, (error) => { console.error(error); } ); ``` 上述代码片段展示了如何在一个标准的 Vue 组件生命周期钩子函数内集成 Three.js 的核心要素，从而实现对特定三维资产的有效展示与管理。