Three.js 动态加载 GLTF 模型：高效加载和渲染复杂的 3D 模型

在数字世界的魔法城堡里，Three.js 就是那位手持魔杖的魔法师，它能将冰冷的代码化作栩栩如生的 3D 场景。而 GLTF 模型，就像是城堡里的神秘宝藏，承载着各种复杂而精美的 3D 模型。今天，我们就来学习如何让 Three.js 这位魔法师，优雅且高效地打开 GLTF 宝藏的大门，将里面的 3D 模型动态加载并呈现在我们眼前。

一、初识 Three.js 与 GLTF

Three.js 是 JavaScript 世界里的 3D 建模大师，它基于 WebGL 构建，能够在浏览器中轻松绘制出绚丽的 3D 场景。想象一下，它就像一个超级厉害的 3D 工匠，用代码作为砖块，在浏览器这个空地上搭建出各种奇妙的世界。

GLTF（GL Transmission Format），则是 3D 模型的 "通用语言"，它是一种用于传输和加载 3D 场景和模型的格式。就好比是 3D 模型的 "行李箱"，里面整齐地收纳着模型的几何形状、纹理、材质等各种信息。它的优势在于，能以较小的体积存储丰富的 3D 数据，让复杂的 3D 模型在加载时不会像一头笨重的大象，而是像轻盈的小鸟般迅速。

二、准备工作：搭建魔法舞台

在正式开始加载 GLTF 模型之前，我们需要先搭建好 Three.js 的运行环境。

引入 Three.js 库：首先，在 HTML 文件中引入 Three.js 库。这就像是给魔法师 Three.js 准备好它的魔法书，有了这本魔法书，它才能施展各种神奇的魔法。

xml 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

创建场景、相机和渲染器：我们需要创建一个空白的场景，就像搭建一个空荡荡的舞台；再放置一台 "相机"，用来决定观众的视角；最后准备一个渲染器，它会把场景中的内容绘制到浏览器上。

ini 复制代码

// 创建场景
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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

三、加载 GLTF 模型：打开宝藏的钥匙

接下来，就是见证奇迹的时刻 ------ 使用 Three.js 动态加载 GLTF 模型。这里我们需要借助GLTFLoader，它就像是打开 GLTF 宝藏的神奇钥匙。

javascript 复制代码

// 引入GLTFLoader
import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/loaders/GLTFLoader.js';
// 创建GLTFLoader实例
const loader = new GLTFLoader();
// 加载GLTF模型
loader.load(
    // 模型文件路径
    'yourModel.gltf',
    // 加载成功的回调函数
    function (gltf) {
        scene.add(gltf.scene);
    },
    // 加载过程中的回调函数（可选，用于显示加载进度）
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // 加载错误的回调函数
    function (error) {
        console.log('An error happened');
    }
);

在这段代码中，loader.load方法就像是派遣了一位信使，去寻找指定路径下的 GLTF 模型。当信使成功找到模型（加载成功），就会执行第一个回调函数，把模型添加到场景中；在寻找的过程中（加载过程中），第二个回调函数可以用来显示加载的进度，就像给我们一个小提示，告诉我们宝藏快到手啦；如果信使在寻找过程中遇到了问题（加载错误），第三个回调函数就会触发，告诉我们哪里出了岔子。

四、高效加载与渲染的小秘诀

当面对复杂的 3D 模型时，为了实现更高效的加载和渲染，我们还有一些小技巧可以使用。

模型优化：在将模型导出为 GLTF 格式之前，可以使用专业的 3D 建模软件对模型进行优化，比如减少多边形数量、压缩纹理等。这就好比给宝藏行李箱进行整理，扔掉不必要的杂物，让它变得更轻便，这样信使寻找和搬运起来就更快啦。

延迟加载：如果场景中有多个 GLTF 模型，可以采用延迟加载的策略。也就是说，先只加载当前需要展示的模型，等用户进行某些操作（比如视角移动到特定区域）时，再加载其他模型。这就像魔术师变魔术，先展示一部分惊喜，等观众期待值拉满，再慢慢揭晓更多精彩。

设置 LOD（Level of Detail，细节层次） ：根据模型与相机的距离，设置不同的细节层次。当模型离相机很远时，使用低细节版本；当模型靠近相机时，再切换到高细节版本。这就像是给模型穿上了一件 "变形衣"，根据距离自动调整自己的模样，既能保证视觉效果，又能减轻加载和渲染的压力。

五、让模型动起来：赋予生命的魔法

加载好 GLTF 模型后，我们还可以给它添加一些动画效果，让它在场景中 "活" 过来。

ini 复制代码

// 假设模型中有一个名为"myModel"的动画片段
const animationClip = gltf.animations.find(clip => clip.name === "myModel");
const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(animationClip);
action.play();

这段代码就像是给模型注入了生命的魔法药水。AnimationMixer是掌管动画的小精灵，它能读取模型中的动画片段；clipAction则像是动画的遥控器，通过它来控制动画的播放、暂停、快进等操作。

通过以上步骤，我们就成功地使用 Three.js 动态加载并渲染了 GLTF 模型，还学会了一些让加载和渲染更高效的小技巧，以及如何给模型添加动画。在数字的魔法世界里，Three.js 和 GLTF 模型还有更多奇妙的组合等待我们去探索，快发挥你的创意，打造属于自己的 3D 奇幻世界吧！

上述文章涵盖了从基础到进阶的知识，希望能帮你掌握动态加载技巧。若你想对内容深度、案例复杂度做调整，随时和我说。