5.3模型加载与使用

5.3模型加载与使用

5.3 模型加载与使用

5.3.1 模型加载流程

模型加载的一般流程如下：

1. 创建加载器实例： 根据模型文件的格式，选择合适的加载器，并创建其实例。

2. 加载模型文件： 使用加载器的 load() 方法加载模型文件。该方法通常接受模型文件的 URL、加载成功时的回调函数、加载过程中的回调函数（可选）以及加载失败时的回调函数（可选）作为参数。

3. 处理加载完成的模型： 在加载成功的回调函数中，可以对加载的模型进行各种操作，例如添加到场景中、修改材质、调整位置等。

4. 处理加载过程（可选）： 在加载过程中的回调函数中，可以获取加载进度，并用于显示加载进度条等。

5. 处理加载失败（可选）： 在加载失败的回调函数中，可以处理加载失败的情况，例如显示错误信息。

5.3.2 常用加载器

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

• GLTFLoader： 用于加载 GLTF (glTF) 模型。GLTF 是一种开放标准的 3D 模型格式，被广泛用于 Web 上的 3D 内容。

• OBJLoader： 用于加载 OBJ (Wavefront OBJ) 模型。OBJ 是一种简单的文本格式，被广泛用于 3D 建模软件。

• FBXLoader： 用于加载 FBX (Autodesk FBX) 模型。FBX 是一种专有的 3D 模型格式，被广泛用于游戏开发和电影制作。

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

• TextureLoader： 用于加载纹理图片。

5.3.3 代码实践：加载 GLTF 模型

以下是一个使用 GLTFLoader 加载 GLTF 模型的示例：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 创建场景、相机和渲染器
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);
// 设置相机位置
camera.position.z = 5;
// 创建 GLTFLoader 实例
const loader = new GLTFLoader();
// 加载 GLTF 模型
loader.load(
    'models/scene.gltf', // 模型文件 URL
    function (gltf) {
        // 模型加载完成后的回调函数
        scene.add(gltf.scene); // 将模型添加到场景中
        // 可选：遍历模型的所有子对象
        gltf.scene.traverse(function (child) {
            if (child.isMesh) {
                // 调整材质
                child.material = new THREE.MeshStandardMaterial({
                    color: 0xffffff,
                    metalness: 0.5,
                    roughness: 0.5
                });
                child.castShadow = true;
                child.receiveShadow = true;
            }
        });
        // 可选：调整模型的位置、旋转和缩放
        gltf.scene.position.set(0, 0, 0);
        gltf.scene.rotation.set(0, 0, 0);
        gltf.scene.scale.set(1, 1, 1);
        // 渲染场景
        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);
    }
);
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
scene.add(ambientLight);
// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

代码详解：

1. 导入 Three.js 和 GLTFLoader： 首先，需要导入 Three.js 库和 GLTFLoader。GLTFLoader 位于 three/examples/jsm/loaders/GLTFLoader。

2. 创建场景、相机和渲染器： 创建 Three.js 场景、相机和渲染器，这是 Three.js 应用的基本步骤。

3. 创建 GLTFLoader 实例： 创建 GLTFLoader 的实例，用于加载 GLTF 模型。

4. 加载 GLTF 模型： 使用 loader.load() 方法加载 GLTF 模型。该方法接受四个参数：

   • 模型文件 URL：指定要加载的 GLTF 文件的 URL。

   • 加载成功的回调函数：在模型加载成功后调用。该回调函数接受一个 gltf 对象作为参数，该对象包含加载的模型数据。

   • 加载过程中的回调函数（可选）：在模型加载过程中定期调用。该回调函数接受一个 xhr 对象作为参数，该对象包含加载进度信息。

   • 加载失败的回调函数（可选）：在模型加载失败后调用。该回调函数接受一个 error 对象作为参数，该对象包含错误信息。

5. 处理加载完成的模型： 在加载成功的回调函数中，可以对加载的模型进行各种操作。例如，可以使用 scene.add(gltf.scene) 将模型添加到场景中。gltf.scene 包含模型的场景图。

6. 调整模型属性： 可以遍历模型的子对象，并修改它们的材质、位置、旋转和缩放。

7. 渲染场景： 创建一个 animate() 函数，该函数使用 requestAnimationFrame() 循环调用 renderer.render() 方法，以渲染场景。

8. 添加光照： 添加环境光和平行光，以照亮模型。

5.3.4 代码实践：加载 OBJ 模型

以下是一个使用 OBJLoader 加载 OBJ 模型的示例：

import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
// 创建场景、相机和渲染器
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);
// 设置相机位置
camera.position.z = 5;
// 创建 OBJLoader 实例
const objLoader = new OBJLoader();
const mtlLoader = new MTLLoader();
// 加载 MTL 文件 (材质)
mtlLoader.load('models/model.mtl', (materials) => {
    materials.preload();
    objLoader.setMaterials(materials);
    // 加载 OBJ 模型
    objLoader.load(
        'models/model.obj', // 模型文件 URL
        function (object) {
            // 模型加载完成后的回调函数
            scene.add(object); // 将模型添加到场景中
            // 可选：调整模型的位置、旋转和缩放
            object.position.set(0, 0, 0);
            object.rotation.set(0, 0, 0);
            object.scale.set(1, 1, 1);
            // 渲染场景
            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);
        }
    );
});
// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
scene.add(ambientLight);
// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
​

代码详解：

1. 导入 Three.js 和 OBJLoader： 首先，需要导入 Three.js 库和 OBJLoader。OBJLoader 位于 three/examples/jsm/loaders/OBJLoader。

2. 创建场景、相机和渲染器： 创建 Three.js 场景、相机和渲染器，这是 Three.js 应用的基本步骤。

3. 创建 OBJLoader 实例： 创建 OBJLoader 的实例，用于加载 OBJ 模型。

4. 加载 OBJ 模型： 使用 objLoader.load() 方法加载 OBJ 模型。该方法接受三个参数：

   • 模型文件 URL：指定要加载的 OBJ 文件的 URL。

   • 加载成功的回调函数：在模型加载成功后调用。该回调函数接受一个 object 对象作为参数，该对象包含加载的模型数据。

   • 加载过程中的回调函数（可选）：在模型加载过程中定期调用。该回调函数接受一个 xhr 对象作为参数，该对象包含加载进度信息。

   • 加载失败的回调函数（可选）：在模型加载失败后调用。该回调函数接受一个 error 对象作为参数，该对象包含错误信息。

5. 处理加载完成的模型： 在加载成功的回调函数中，可以对加载的模型进行各种操作。例如，可以使用 scene.add(object) 将模型添加到场景中。

6. 调整模型属性： 可以调整模型的位置、旋转和缩放。

7. 渲染场景： 创建一个 animate() 函数，该函数使用 requestAnimationFrame() 循环调用 renderer.render() 方法，以渲染场景。

8. 添加光照： 添加环境光和平行光，以照亮模型。

9. 加载 MTL 材质文件 OBJ 文件通常伴随一个 MTL 文件，用于定义模型的材质。 需要使用 MTLLoader 加载 MTL 文件，并将加载的材质传递给 OBJLoader。

5.3.5 模型优化

加载大型或复杂的模型可能会影响性能。以下是一些优化模型加载和使用的方法：

• 使用 Draco 压缩： 使用 Draco 压缩可以显著减小模型文件的大小，从而加快加载速度。

• 使用 LOD (Level of Detail)： 使用 LOD 可以根据相机距离动态调整模型的细节程度，从而提高渲染性能。

• 合并几何体： 将多个几何体合并成一个几何体可以减少渲染调用的次数，从而提高渲染性能。

• 优化材质： 使用简单的材质可以提高渲染性能。避免使用过于复杂的着色器。

• 使用纹理压缩： 使用纹理压缩可以减小纹理文件的大小，从而加快加载速度。

5.3.6 总结

模型加载是 Three.js 应用开发中的重要环节。通过选择合适的加载器、正确处理加载过程和优化模型，可以有效地将外部 3D 模型集成到场景中，并创建出令人惊叹的 3D 应用。希望本文能够帮助你更好地理解 Three.js 中的模型加载与使用。