5.2加载器 (Loaders)

文档摘要

5.2加载器 (Loaders) 5.2 加载器 (Loaders) 在 Three.js 中，加载器 (Loaders) 扮演着至关重要的角色，它们负责将各种外部资源（如 3D 模型、纹理、音频等）导入到 Three.js 场景中。Three.js 提供了多种加载器，每种加载器都针对特定的文件格式进行了优化。 5.2.1 加载器的作用加载器的主要作用是将外部资源数据解析成 Three.js 可以理解和使用的对象。例如，将 GLTF 文件解析成对象，其中包含模型、材质、纹理等信息。 5.2.2 常见的加载器类型 Three.

5.2加载器 (Loaders)

5.2 加载器 (Loaders)

在 Three.js 中，加载器 (Loaders) 扮演着至关重要的角色，它们负责将各种外部资源（如 3D 模型、纹理、音频等）导入到 Three.js 场景中。Three.js 提供了多种加载器，每种加载器都针对特定的文件格式进行了优化。

5.2.1 加载器的作用

加载器的主要作用是将外部资源数据解析成 Three.js 可以理解和使用的对象。例如，GLTFLoader 将 GLTF 文件解析成 THREE.Scene 对象，其中包含模型、材质、纹理等信息。

5.2.2 常见的加载器类型

Three.js 提供了丰富的加载器，以下是一些常用的加载器：

GLTFLoader: 用于加载 GLTF (GL Transmission Format) 文件，这是一种广泛使用的 3D 模型格式，具有高效、可扩展等优点。
OBJLoader: 用于加载 OBJ (Wavefront Object) 文件，这是一种较老的 3D 模型格式，但仍然被广泛使用。
FBXLoader: 用于加载 FBX (Filmbox) 文件，这是一种由 Autodesk 开发的专有格式，常用于 3D 动画和游戏开发。
TextureLoader: 用于加载图像文件，如 JPEG、PNG、GIF 等，并创建 THREE.Texture 对象，用于材质的纹理贴图。
AudioLoader: 用于加载音频文件，如 MP3、WAV 等，并创建 THREE.AudioBuffer 对象，用于 3D 音频。
DRACOLoader: 用于加载经过 Draco 压缩的 3D 模型，可以显著减小文件大小，提高加载速度。（需要单独引入 Draco 解码器）
RGBELoader: 用于加载 HDR (High Dynamic Range) 图像文件，用于环境光照和反射。

5.2.3 加载器的基本使用方法

大多数加载器的使用方法都遵循类似的模式：

创建加载器实例: 根据要加载的文件类型，创建相应的加载器实例。
调用 load() 方法: 调用加载器的 load() 方法，传入文件路径、加载成功的回调函数、加载过程中的回调函数（可选）、加载失败的回调函数（可选）。
处理加载结果: 在加载成功的回调函数中，处理加载后的对象，例如将模型添加到场景中，将纹理应用到材质上。


import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建 GLTFLoader 实例
const loader = new GLTFLoader();
// 加载 GLTF 模型
loader.load(
    'path/to/your/model.gltf', // 模型文件路径
    function (gltf) { // 加载成功的回调函数
        scene.add(gltf.scene); // 将模型添加到场景中
        // gltf.animations; // Array<THREE.AnimationClip>
        // gltf.scene; // THREE.Scene
        // gltf.scenes; // Array<THREE.Scene>
        // gltf.cameras; // Array<THREE.Camera>
        // gltf.asset; // Object
        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    },
    function (xhr) { // 加载过程中的回调函数（可选）
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // 加载失败的回调函数（可选）
        console.error('An error happened', error);
    }
);
camera.position.z = 5;

5.2.4 加载过程中的回调函数

加载器提供的加载过程中的回调函数可以用于显示加载进度，提升用户体验。回调函数接收一个 XMLHttpRequest 对象作为参数，该对象包含加载进度信息，例如 loaded (已加载的字节数) 和 total (总字节数)。

5.2.5 加载失败的处理

为了提高程序的健壮性，应该处理加载失败的情况。加载失败的回调函数接收一个错误对象作为参数，可以用于显示错误信息或采取其他补救措施。

5.2.6 GLTFLoader 详解

GLTFLoader 是 Three.js 中最常用的加载器之一，因为它支持 GLTF 格式，这是一种现代、高效的 3D 模型格式。

GLTF 格式的优势：

体积小: GLTF 文件通常比其他格式（如 OBJ、FBX）更小，可以减少加载时间和带宽消耗。
加载速度快: GLTF 文件针对 Web 平台进行了优化，加载速度更快。
支持 PBR 材质: GLTF 格式支持基于物理的渲染 (PBR) 材质，可以实现更逼真的渲染效果。
支持动画: GLTF 格式支持骨骼动画、变形动画等。

GLTFLoader 的使用：


import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
    'path/to/your/model.gltf',
    function (gltf) {
        // gltf.scene 包含整个场景
        scene.add(gltf.scene);
        // gltf.animations 包含动画数据
        if (gltf.animations && gltf.animations.length) {
            const mixer = new THREE.AnimationMixer(gltf.scene);
            gltf.animations.forEach((clip) => {
                mixer.clipAction(clip).play();
            });
            // 在渲染循环中更新动画混合器
            function animate() {
                requestAnimationFrame(animate);
                mixer.update(0.01); // delta time
                renderer.render(scene, camera);
            }
            animate();
        } else {
            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            animate();
        }
    },
    undefined,
    function (error) {
        console.error(error);
    }
);

GLTFLoader 的加载结果：

GLTFLoader 的 load() 方法的回调函数接收一个 gltf 对象作为参数，该对象包含以下属性：

scene: 一个 THREE.Scene 对象，包含模型的所有节点、网格、材质、纹理等。
animations: 一个 THREE.AnimationClip 数组，包含模型的动画数据。
cameras: 一个 THREE.Camera 数组，包含模型中定义的相机。
asset: 一个包含 GLTF 资产信息的对象，例如版本号、版权信息等。

5.2.7 OBJLoader 详解

OBJLoader 用于加载 OBJ 文件，这是一种较老的 3D 模型格式。OBJ 文件通常与 MTL 文件一起使用，MTL 文件包含材质信息。

OBJLoader 的使用：


import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
// 加载 MTL 文件
const mtlLoader = new MTLLoader();
mtlLoader.load('path/to/your/model.mtl', (materials) => {
  materials.preload();
  // 加载 OBJ 文件
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials); // 设置材质
  objLoader.load('path/to/your/model.obj', (object) => {
    scene.add(object);
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  },
    function (xhr) { // 加载过程中的回调函数（可选）
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // 加载失败的回调函数（可选）
        console.error('An error happened', error);
    });
});

OBJLoader 的加载结果：

OBJLoader 的 load() 方法的回调函数接收一个 object 对象作为参数，该对象是一个 THREE.Group 对象，包含模型的网格。

5.2.8 TextureLoader 详解

TextureLoader 用于加载图像文件，并创建 THREE.Texture 对象。

TextureLoader 的使用：


import * as THREE from 'three';
const textureLoader = new THREE.TextureLoader();
textureLoader.load(
    'path/to/your/texture.jpg',
    function (texture) {
        // 创建材质
        const material = new THREE.MeshBasicMaterial({ map: texture });
        // 创建几何体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建网格
        const mesh = new THREE.Mesh(geometry, material);
        // 将网格添加到场景中
        scene.add(mesh);
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    },
    function (xhr) { // 加载过程中的回调函数（可选）
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // 加载失败的回调函数（可选）
        console.error('An error happened', error);
    }
);

TextureLoader 的加载结果：

TextureLoader 的 load() 方法的回调函数接收一个 texture 对象作为参数，该对象是一个 THREE.Texture 对象，可以用于材质的 map 属性。

5.2.9 DRACOLoader 详解

DRACOLoader 用于加载经过 Draco 压缩的 3D 模型。Draco 是一种由 Google 开发的开源 3D 图形压缩库，可以显著减小文件大小，提高加载速度。

使用 DRACOLoader 的步骤：

引入 Draco 解码器: 需要从 CDN 或本地引入 Draco 解码器。


<script src="https://www.gstatic.com/draco/v1/draco_decoder.js"></script>

设置 DRACOLoader 的解码器路径: 需要设置 DRACOLoader 的 setDecoderPath() 方法，指定 Draco 解码器的路径。


import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/examples/jsm/libs/draco/'); // 替换为实际路径

使用 GLTFLoader 加载 Draco 压缩的 GLTF 模型: 将 DRACOLoader 实例传递给 GLTFLoader 的 setDRACOLoader() 方法。


import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load('path/to/your/model.gltf', (gltf) => {
    scene.add(gltf.scene);
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
},
    function (xhr) { // 加载过程中的回调函数（可选）
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // 加载失败的回调函数（可选）
        console.error('An error happened', error);
    });

5.2.10 加载器选择建议

选择合适的加载器取决于要加载的文件类型和需求。

GLTF: 如果模型是 GLTF 格式，优先使用 GLTFLoader。
OBJ: 如果模型是 OBJ 格式，使用 OBJLoader，并配合 MTLLoader 加载材质。
需要压缩: 如果需要减小模型文件大小，可以使用 Draco 压缩，并使用 DRACOLoader 加载。
纹理: 加载图像文件，使用 TextureLoader。
音频: 加载音频文件，使用 AudioLoader。

5.2.11 加载器流程图

5.2.12 总结

加载器是 Three.js 中不可或缺的一部分，它们负责将各种外部资源导入到场景中。选择合适的加载器，并正确处理加载过程中的回调函数和错误，可以提高程序的性能和健壮性。希望本文能够帮助你更好地理解和使用 Three.js 的加载器。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/220-threejs-3d%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流