基于 ThreeJS 的 DTE 库使用 - 使用 loader 加载 3D 格式文件

本文是我在某中厂任职时的学习笔记，用到 DTE 库是基于 ThreeJS 实现的闭源的公司内部库，替代方案和说明可见 DTE 库的开源替代方案（ThreeJS 等）

复杂的模型通常是由专业的三维建模软件（如 Blender, 3ds Max, Maya）创建，并导出为标准格式的文件，比如 GLTF, GLB, OBJ, FBX 等。

DTE 封装了针对不同文件格式的加载器，使得可以把这些建模软件导出的东西加载到 web 前端，一听就很有意思！

关于 GLTF、GLB 格式

• GLTF (GL Transmission Format) 被称为 “三维领域的JPEG”。它就是为了在网络上高效传输和加载3D场景和模型而生的标准。
• GLB 是 GLTF 的二进制格式，通常把所有信息（模型、贴图）都打包在一个文件里，更方便传输。在Web 3D领域，它们是首选格式。

我从 KhronosGroup/glTF-Sample-Models: glTF Sample Models 上找了一个开源的 .glb 格式的模型，这是一只可爱的小黄鸭，我们本节课就用它：

https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb

加载模型资源是一个异步操作，加载器的 load 方法通常不会立即返回模型，而是返回一个 Promise，后面 .then 回调函数接收到的参数才是模型啦。

// --- 之前的代码 ---
const containerDiv = document.getElementById('my-3d-container');
const container3D = new CommonContainer({ domId: containerDiv });
const { scene, camera, renderer } = container3D;
camera.position.z = 10; // 调整相机位置，具体数值取决于模型大小

// --- 本课新代码 ---

// 1. 创建一个模型加载器实例
const modelLoader = new ModelLoader();
console.log("模型加载器已准备就绪。");

// 2. 定义你要加载的模型的URL
// 注意：你需要替换成一个真实可访问的模型URL
// 如果你没有现成的模型，可以搜索 "free gltf model" 找一些来测试
// 这里我从 https://github.com/KhronosGroup/glTF-Sample-Models 那里拿来一个试试  
const modelUrl =  
  'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb';

// 3. 调用 loadGLTF 方法开始加载
console.log(`开始从 ${modelUrl} 加载模型...`);
modelLoader.loadGLTF(modelUrl).then((model) => {
    
    // 当Promise成功解析后，这里的代码就会执行
    // 'model' 就是加载并解析好的三维物体！
    console.log("模型加载成功!", model);

    // 4. 和之前一样，把它添加到场景里
    scene.add(model);
    // 有时候加载进来的模型可能太大或太小，或者位置不对
    model.scale.set(100, 100, 100); // 放大到原来的 100 倍
    // model.position.y = -2; // 往下移动一点
    // 旋转它
    model.rotation.y = - Math.PI / 16; // 绕Y轴旋转
    // 下面我来尝试变个色
    // 遍历它的子物体，改变所有子物体的材质
    model.traverse((child: { isMesh: any; material: any }) => {
        if (child.isMesh) {
          // 如果这个子节点是一个Mesh
          child.material = new core.MeshBasicMaterial({ color: 0xff00ff }); // 把它变成骚气的品红色
            }
    });

}).catch((error) => {
    // 如果加载过程中出错了，这里的代码会执行
    console.error("加载模型时发生错误:", error);
});

console.log("我这行代码会先执行，因为加载是异步的。");

本课小结

• 我们理解了为什么需要加载器（Loader）：用于加载外部复杂的模型文件。

• 我们知道了加载是一个异步过程，并学会了使用 Promise 的 .then() 语法来处理加载完成后的逻辑。

• 我们掌握了使用DTE的 ModelLoader 来加载 gltf/glb 格式的模型。

• 我们明白了加载回来的模型对象本质上也是一个普通的 Object3D (比如 Mesh 或 Group)，可以对它进行移动、旋转、缩放，甚至修改材质。