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官方推荐的格式。.GLB和.GLTF版本的格式都得到了Three.js的良好支持。由于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项目中。加载的模型可能包含两个场景；您可以指定要导入的场景。

DRACO加载器

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论坛上发布问题，并在可能的情况下，包含您拥有的任何格式的模型（或具有相同问题的更简单的模型）。包含足够的信息以便其他人能够快速重现问题 - 最好是一个实时演示。

打印页面