Three.js - 加载 3D 模型

3D 模型有多种格式。您可以将大多数模型导入 Three.js 并快速使用它们。有些格式难以使用，对于实时体验效率低下，或者目前 Three.js 尚未完全支持。让我们讨论一些标准格式以及如何将它们加载到 Three.js 文件中。

注意 − Three.js 中仅内置了少数格式加载器。要加载其他格式的模型，您需要包含它们的 JavaScript 文件。您可以在 Three.js repo 的 three/examples/jsm/loaders 目录中找到所有不同的加载器。

对于加载任何模型，我们使用这三个简单的步骤 −

在您的网页中包含 [NameOfFormat]Loader.js。
使用 [NameOfFormat]Loader.load() 加载 URL。
检查回调函数的响应格式并呈现结果。

OBJ 模型加载器

OBJ 文件以文本形式定义材质的几何形状。许多其他 3D 模型软件可以创建 OBJ 格式的模型。在 Threejs 中，导入 OBJ 时，默认材质是白色的 MeshPhongMaterial。您的场景中至少需要一个光源。您可以使用 OBJLoader 加载 OBJ 格式的模型。

要在 Three.js 项目中使用 OBJLoader，您需要添加 OBJLoader JavaScript 文件。

<script type="text/javascript" src="../scripts/OBJLoader.js"></script>

然后，您可以像使用 .load 方法加载纹理一样加载模型。

const loader = new THREE.OBJLoader()
loader.load('path/to/your/.obj file', (object) => {
    scene.add(object)
})

在此代码中，我们使用 OBJLoader 从 URL 加载模型。模型加载完成后，我们提供的回调函数就会被调用，如果您愿意，我们可以自定义加载的网格。

MTL 模型加载器

OBJ 和 MTL 是配套格式，经常一起使用。MTL 文件定义了 OBJ 文件中几何体所使用的材料。MTL 也是一种基于文本的格式。

<script type="text/javascript" src="../scripts/MTLLoader.js"></script>

我们将在此代码片段中同时使用 MTLLoader 和 OBJLoader。

const mtlLoader = new THREE.MTLLoader()
mtlLoader.load('/path/to/your/.mtl file', (materials) => {
   materials.preload()
   // loading geometry
   const objLoader = new THREE.OBJLoader()
   objLoader.setMaterials(materials)
   objLoader.load('path/to/your/.obj file', (object) => {
      mesh = object
      scene.add(mesh)
   })
})

它首先加载材质。然后我们将要加载的 OBJ 文件的材质设置为已加载材质，然后加载 OBJ 文件。它创建我们需要将对象渲染到场景的网格，自定义网格或材质，就像 Three.js 项目中的网格或材质一样。

GLTF 模型加载器

glTF 文件可能包含一个或多个场景、网格、材质、纹理、皮肤、骨架、变形目标、动画、灯光和相机。它是 Three.js 官方推荐的格式。.GLB 和 .GLTF 版本的格式都得到 Three.js 的良好支持。由于 glTF 专注于运行时资产交付，因此传输紧凑且加载速度快。

<script src="../scripts/GLTFLoader.js"></script>

使用 GLTFLoader 对象，您可以导入 JSON (.gltf) 或二进制 (.glb) 格式。

const loader = new THREE.GLTFLoader()
// 加载模型
loader.load('path/to/model.glb', (gltf) => {
    scene.add(gltf.scene)
})

导入的 glTF 模型的场景已添加到我们的 Three.js 项目中。加载的模型可能包含两个场景;您可以指定要导入的场景。

DRACO Loader

DRACOLoader 用于加载使用 Draco 库压缩的几何图形(.drc 格式文件)。 Draco 是一个用于压缩和解压缩 3D 网格和点云的开源库。

glTF 文件也可以使用 DRACO 库进行压缩，也可以使用 glTFLoader 进行加载。在这种情况下，我们可以配置 glTFLoader 以使用 DRACOLoader 解压缩文件

<script src="../scripts/GLTFLoader.js"></script>
<script src="../scripts/DRACOLoader.js"></script>

与任何其他模型一样，您可以使用 DRACOLoader 轻松加载 .drc 文件。然后，您可以将材质添加到加载的几何体并将网格渲染到场景中。

const loader = new THREE.DRACOLoader()
loader.setDecoderPath('/scripts/draco/')
// 加载 Draco 几何体
loader.load('path/to/your/.drc file', (geometry) => {
   const material = new THREE.MeshStandardMaterial({ color: 0xffffff })
   const mesh = new THREE.Mesh(geometry, material)
   scene.add(mesh)
})

当您想要导入使用 Draco 库压缩几何图形的 glTF 文件格式时，使用此代码片段。

const dracoLoader = new THREE.DRACOLoader()
dracoLoader.setDecoderPath('/scripts/draco/')
dracoLoader.setDecoderConfig({ type: 'js' })
// 加载使用 draco 库的 glTF 模型
const loader = new THREE.GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load('models/monkey_compressed.glb', (gltf) => {
    scene.add(gltf.scene)
})

STL 模型加载器

STL 模型格式广泛用于快速原型制作、3D 打印和计算机辅助制造。

STL 文件仅描述 3D 对象的表面几何形状，不包含任何颜色、纹理或其他常见 3D 建模属性的表示。您可以将它们添加到回调函数中。

<script src="../scripts/STLLoader.js"></script>

我们使用 .stl 文件中的几何形状，并在将其添加到场景之前为其添加材质。

const material = new THREE.MeshPhysicalMaterial({ color: 0xaaaaaa })
const loader = new THREE.STLLoader()
loader.load('path/to/your/.stl file', (geometry) => {
   const mesh = new THREE.Mesh(geometry, material)
   scene.add(mesh)
})

您可以将许多其他格式加载到 Three.js 项目中。上面提到的是标准格式。加载器文件有据可查且易于使用。

故障排除

如果您无法正确加载模型，或者模型扭曲、变色或完全丢失。以下是 Three.js 官方网站中提到的一些故障排除步骤 −

检查 JavaScript 控制台是否有错误，并确保在调用 .load() 时使用了 onError 回调来记录结果。
在另一个应用程序中查看模型。对于 glTF，Three.js 和 Babylon.js 提供拖放查看器。如果模型在一个或多个应用程序中正确显示，请针对 Three.js 提交错误。如果模型无法在任何应用程序中显示，您应该向用于创建模型的应用程序提交错误。
尝试将模型放大或缩小 1000 倍。许多模型的缩放比例不同，如果相机位于模型内部，大型模型可能不会显示。
尝试添加和定位光源。模型可能隐藏在黑暗中。
在网络选项卡中查找失败的纹理请求，例如 C:\Path\To\Model exture.jpg。改用相对于模型的路径，例如 images/texture.jpg - 这可能需要在文本编辑器中编辑模型文件。