Three.js 快速入门教程 04 - 加载模型文件

在 Web 3D 可视化项目中，我们往往需要通过加载模型文件的方式添加模型。本篇章将介绍如何使用 Three.js 内置的加载器来加载模型文件。

glTF 格式简介

在讲如何加载模型文件前，我们需要对 glTF 格式的三维模型文件有所了解

glTF（gl 传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载 3D 内容。该类文件以 JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个 glTF 组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

由于 glTF 格式的广泛支持，不仅在 Three.js 中，像其他 Web 3D 可视化框架（例如 cesium），3D 建模软件（例如 Blender）都有着良好的支持。因此 glTF 格式是基于 Three.js 项目开发的首选。

GLTF 加载器

Three.js 内置了许多不同的 加载器（Loader） 来加载不同格式的模型文件，其中GLTFLoader是专门用于加载 glTF 格式的

// 引入GLTFLoader加载器
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// 如果基于npm安装，可能需要使用这种方式引入
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

模型的加载方式在第一篇教程已经有所提及

// 加载外部模型文件
const loader = new GLTFLoader();
loader.load(
  "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
);

需要注意的是这里的加载过程是异步的，需要等待加载完毕触发回调函数，才能将模型添加进场景中。

其他加载器

除了 GLTF 加载器，Three.js还提供了针对其他模型文件格式的加载器，可以根据项目需要去选择使用。

• DracoLoader
  一个用于加载经过Draco压缩的图形库。Draco是一个开源的库，主要用于压缩和解压缩三维模型及点云。 以客户端上解压缩为代价，显著减少压缩的图形。
• OBJLoader
  OBJ 文件格式是一种简单的数据格式， 这种格式以人类可读的形式来表示3D几何体，即每个顶点的位置、每个纹理坐标顶点的UV位置、顶点法线、 将使每个多边形定义为顶点列表的面以及纹理顶点。
• MTLLoader
  一个用于加载 .mtl 资源的加载器，材质模版库（MTL）或 .MTL 文件格式是 .OBJ 的配套文件格式， 用于描述一个或多个 .OBJ 文件中物体表面着色（材质）属性。
• MMDLoader
  一个用于加载MMD资源的加载器，MMDLoader从MMD资源（例如PMD、PMX、VMD和VPD文件）中创建Three.js物体。

加载管理器

由于模型文件需要通过网络加载，当文件很大时，又或者需要加载多个文件时，需要手动去管理这些加载器保证模型文件的顺利加载。所幸的是 Three.js 已内置了LoadingManager对象来减轻我们的管理负担。

// 加载外部模型文件
const loader = new GLTFLoader();
loader.load(
  "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
);

const manager = new THREE.LoadingManager();

// 加载开始的回调
manager.onStart = function (url, itemsLoaded, itemsTotal) {
  console.log("Started loading");
};

// 加载完成的回调
manager.onLoad = function () {
  console.log("Loading complete");
};

// 加载错误的回调
manager.onError = function (url) {
  console.log("There was an error loading ");
};

// 加载每一个项完成的回调
manager.onProgress = async (url, loaded, total) => {

};

当我们有多个模型文件需要同时加载时，可以通过onProgress的回调函数去获取当前的加载进度。

// 加载外部模型文件
const loader = new GLTFLoader();
loader.load(
  "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
);

const manager = new THREE.LoadingManager();

// 加载每一个项完成的回调
manager.onProgress = async (url, loaded, total) => {
  console.log(loaded);
  console.log(total);
  console.log(Math.floor((loaded / total) * 100));
};

通过LoadingManager提供的事件回调，使得我们可以处理并跟踪已加载和待处理的数据。