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 - 这可能需要在文本编辑器中编辑模型文件。
寻求帮助
假设您已经完成了上述故障排除过程,但模型仍然无法正常工作。在这种情况下,正确的寻求帮助的方法可以让您更快地找到解决方案。在 Three.js 论坛上发布问题,并尽可能以任何可用的格式包含您的模型(或具有相同问题的更简单模型)。包含足够的信息,以便其他人可以快速重现问题 - 最好是现场演示。