three.js 载入3D模型

目前，3D模型的格式有成千上万种可供选择，但每一种格式都具有不同的目的、用途以及复杂性。 虽然 three.js已经提供了多种导入工具， 但是选择正确的文件格式以及工作流程将可以节省很多时间，以及避免遭受很多挫折。某些格式难以使用，或者实时体验效率低下，或者目前尚未得到完全支持。

对大多数用户，本指南向你推荐了一个工作流程，并向你提供了一些当没有达到预期效果时的建议。

在开始之前

如果你是第一次运行一个本地服务器，可以先阅读如何在本地运行Three.js。 正确地托管文件，可以避免很多查看3D模型时的常见错误。

推荐的工作流程

如果有可能的话，我们推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本， 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。 功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

公共领域的glTF文件可以在网上找到，例如 Sketchfab，或者很多工具包含了glTF的导出功能：

• Blender by the Blender Foundation
• Substance Painter by Allegorithmic
• Modo by Foundry
• Toolbag by Marmoset
• Houdini by SideFX
• Cinema 4D by MAXON
• COLLADA2GLTF by the Khronos Group
• FBX2GLTF by Facebook
• OBJ2GLTF by Analytical Graphics Inc
• …and 还有更多

倘若你所喜欢的工具不支持glTF格式，请考虑向该工具的作者请求glTF导出功能， 或者在the glTF roadmap thread贴出你的想法。

当glTF不可用的时候，诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。

加载

在three.js中只会内置一部分加载器（例如：ObjectLoader） —— 其它的需要在你的应用中单独引入。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

一旦你引入了一个加载器，你就已经准备好为场景添加模型了。不同加载器之间可能具有不同的语法 —— 当使用其它格式的时候请参阅该格式加载器的示例以及文档。对于glTF，使用全局script的用法类似：

const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );

请参阅GLTFLoader documentation来深入了解详细信息。

故障排除

你花了几个小时亲手建了一个堪称杰作的模型，现在你把它给导入到网页中—— 哦，天呐~