Three.js - 加载 3D 模型

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

注意- Three.js 中仅内置了少数格式加载器。要加载其他格式模型，您需要包含它们的 JavaScript 文件。您可以在 Three.js 存储库的 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 官方推荐的格式。Three.js 很好地支持该格式的 .GLB 和 .GLTF 版本。由于 glTF 专注于运行时资产交付，因此传输紧凑且加载速度快。

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

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

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

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

德拉科装载机

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/')
// Load a Draco geometry
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' })
// loading glTF model that uses draco library
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\texture.jpg。请使用相对于模型的路径，例如 images/texture.jpg - 这可能需要在文本编辑器中编辑模型文件。

寻求帮助

假设您已完成上述故障排除过程，但您的模型仍然无法正常工作。在这种情况下，寻求帮助的正确方法可以让您更快地找到解决方案。在Three.js 论坛上发布问题，并尽可能以您可用的任何格式包含您的模型（或具有相同问题的更简单的模型）。包含足够的信息，以便其他人快速重现问题 - 最好是现场演示。