ThreeJS载入3D模型（Loading 3D models）步骤与常见问题（FAQ）【2/2​】

一、简介
1-threejs.jpg

目前，Web3D模型的格式有成千上万种可供选择，但每一种格式都具有不同的目的、用途以及复杂性。 three.js已经提供了多种模型格式导入类（obj、fbx、gltf、stl等等）， 但是选择正确的文件格式以及工作流程将可以节省很多时间，以及避免遭受很多挫折。

某些格式难以使用，或者实时体验效率低下，或者目前尚未得到完全支持。

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

二、在开始之前搭建www（WEB服务器）运行代码
如果你是第一次运行一个本地服务器，可以先阅读搜索如何搭建www服务器，比如使用phpstudy搭建web服务器。通过使用www服务器启动，可以避免很多查看3D模型时的常见错误。

三、推荐的工作流程
如果有可能的话，我们推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本， 都可以被很好地支持。glTF这种格式有如下一些优点：

1、glTF = The GL Transmission Format，使用gltf可以享受三维数据格式统一的好处，并避免各个三维软件间处理大量的导入/导出脚本有缩放问题，动画问题，纹理绑定问题，材质问题。甚至连opengl中的纹理平铺方法这类的属性都保存下来，保证效果一定是对的了。

2、对GL的api非常友好，可以用glBufferData将每个缓冲区加载到GPU中，然后用glVertexAttribPointer解析每个访问器，以绑定到缓冲区中每个顶点元素的位置。

3、可以使用pbr材质模型

4、glTF这种格式专注于在程序运行时呈现三维物体，因此它的传输效率非常高，且加载速度非常快。

Gltf数据功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

three.js同样支持其它格式（例如FBX、Collada以及OBJ等）提供了载入工具。即便如此，你应当还是首先尝试着在你的项目中建立一个基于glTF的工作流程。

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

glTF-Blender-Exporter by the Khronos Group

COLLADA2GLTF by the Khronos Group

FBX2GLTF by Facebook

OBJ2GLTF by Analytical Graphics Inc

Substance Painter by Allegorithmic

Modo by Foundry

Toolbag by Marmoset

……还有更多

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

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

四、加载
three.js中默认仅包含了几个加载器（例如：ObjectLoader）——其它加载器需要你分别地添加到页面中。 取决于你对构建工具的偏好，选择以下任意一种方式：

// global script

// commonjs
var THREE = window.THREE = require(‘three’);
require(‘three/examples/js/loaders/GLTFLoader’);

目前three.js示例不能作为ES modules （import … from ‘…’）来使用。 这里讨论了一些解决方法： #9562.

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

var loader = new THREE.GLTFLoader();
loader.load( ‘路径/model.glb’, function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );

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

五、故障排除
模型导入到网页中以后完全失真了、材质贴图丢了、或者说整个模型完全丢失了！
接下来我们来按照下面的步骤排除故障：

1. 在Javascript的Console中查找错误，并确定当你调用.load()的时候，使用了onError回调函数来输出结果。

2. 请在其它的应用程序中查看3D模型。对于glTF格式的模型来说，可以直接在下面的应用程序中进行查看：three.js和 babylon.js。 如果该模型能够在一个或者多个应用程序中正确地呈现，请点击这里向three.js提交Bug报告。 如果模型不能在任意一个应用程序里显示，我们强烈鼓励你向我们提交Bug报告，并告知我们你的模型是使用哪一款应用程序创建的。

3. 尝试将模型放大或缩小到原来的1000倍。许多模型的缩放比例各不相同，如果摄像机位于模型内，则大型模型将可能不会显示。

4. 在网络面板中查找失败的纹理贴图请求，比如说C:\\Path\To\Model\texture.jpg。载入贴图时，请使用相对于模型文件路径，例如 images/texture.jpg —— 这或许需要在文本编辑器中来对模型文件进行修改。

六、请求帮助
如果你已经尝试经历了以上故障排除的过程，但是你的模型仍然无法工作，寻求正确的方法来获得帮助将使您更快地获得解决方案。 您可以将您的问题发布到three.js forum， 同时，尽可能将你的模型（或者一个简单的、具有相同问题的模型）包含在你能够使用的任何格式中，为其他人提供足够的信息，以便快速重现这个问题 —— 最好是一个能够现场演示的Demo。

或者您可以加入交流群讨论。