Vue2 结合 Three.js 加载 GLB 模型教程

在基础 3D 场景搭建完成后，实际开发中常需加载外部 3D 模型（如 GLB 格式）丰富场景内容。以下将详细讲解在 Vue2 + Three.js 环境中加载 GLB 模型的完整流程，包括依赖引入、模型加载、状态管理及交互优化。

一、添加 GLB 加载依赖

GLB 模型加载需要 Three.js 配套的加载器，需额外引入 GLTFLoader（GLB 是 GLTF 格式的二进制版本，共用同一加载器）和加载进度辅助工具 DRACOLoader（可选，用于加载压缩后的 GLB 模型）。

1. 引入依赖库

<!-- 引入GLTF/GLB加载器 -->
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

2. 初始化加载器（在 Vue 实例中）

在 data 中添加加载器相关变量：

data() {
    return {
        // 原有变量...
        loader: null, // GLB加载器实例
    };
}

在mounted中初始化加载模型：

mounted() {
    // 其他初始化方法...
    // 加载模型
    this.loadModel();
},

在 initThreeScene 方法中创建加载器：

initThreeScene() {
    // 原有场景、相机、渲染器、控制器初始化...
    
    // 创建加载器
    this.loader = new THREE.GLTFLoader();
    
    // 原有初始化内容（创建初始物体、光源、启动动画）
}

二、实现 GLB 模型加载功能

1. 编写加载方法

在 Vue 实例的 methods 中添加模型加载方法，支持指定模型路径：

methods: {
    // 加载GLB模型核心方法
    loadModel() {
        // 加载glb模型
        this.loader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', (gltf) => {
            // 将模型添加到场景
            this.scene.add(gltf.scene);
        }
        );
    },

三、常见问题与注意事项

1. 跨域问题：本地开发时，若直接打开HTML文件加载本地GLB模型，会出现跨域错误。解决方案：
   • 使用Vue CLI搭建项目，将模型文件放在 public/models 目录下，通过 /models/your-model.glb 路径访问。
   • 本地启动静态服务器（如使用 http-server 或 VS Code 的 Live Server 插件）。
2. 模型加载失败：
   • 检查模型路径是否正确，确保文件存在且后缀为 .glb（区分大小写）。
   • 若使用DRACO压缩模型，确认 dracoLoader.setDecoderPath 指向的解码库路径正确。
   • 检查模型文件是否损坏。
3. 模型显示异常：
   • 若模型过大或过小，调整 model.scale 比例（如 scale.set(0.1, 0.1, 0.1) 缩小10倍）。
   • 若模型发黑，检查光源设置是否合理（确保环境光和方向光已添加且强度足够）。
   • 若模型位置超出相机视野，调整模型位置 model.position 或相机位置 camera.position。
4. 性能优化：
   • 对于复杂模型，可使用DRACO压缩减少文件体积。
   • 关闭不必要的阴影（castShadow/receiveShadow 设为 false）。
   • 若场景中存在多个模型，可使用合并几何体（BufferGeometryUtils.mergeBufferGeometries）减少绘制调用。

总结

通过以上步骤，已实现 Vue2 + Three.js 环境中 GLB 模型的加载、显示、动画播放和交互功能。核心流程可概括为：

1. 引入 GLTF 加载器依赖；
2. 初始化加载器并配置解码路径；
3. 编写加载方法；

这种实现方式保留了 Vue2 的响应式特性和 Three.js 的 3D 渲染能力，可灵活应用于产品展示、虚拟展厅、游戏等交互式 3D 应用场景。