Three.js之模型加载

外部模型

Three.js有一系列导入外部文件的辅助函数，是在three.js之外的，使用前需要额外下载，在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。

*.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js；导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLLoader.js。另有PLYLoader.js、STLLoader.js等分别对应不同格式的加载器，可以根据模型格式自行选择。

目前，支持的模型格式有：

• *.obj
• .obj, .mtl
• *.dae
• *.ctm
• *.ply
• *.stl
• *.wrl
• *.vtk

无材质模型

在init函数中，创建loader变量，用于导入模型：

var loader = new THREE.OBJLoader();

loader导入模型的时候，接受两个参数，第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中。

loader.load('../lib/port.obj', function(obj) {
    mesh = obj; //储存到全局变量中
    scene.add(obj);
});

有材质模型

建模软件中设置材质

建模软件中设置材质
使用上一节相似的方法导出模型，在选项中选中Export materials，最终导出port.obj模型文件以及port.mtl材质文件。

现在，我们不再使用OBJLoader.js，而是使用MTLLoader.js与OBJMTLLoader.js，并且要按改顺序引用：

<script type="text/javascript" src="MTLLoader.js"></script>
<script type="text/javascript" src="OBJMTLLoader.js"></script>

调用方法略有不同：

var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
    var obj = event.content;
    mesh = obj;
    scene.add(obj);
});
loader.load('../lib/port.obj', '../lib/port.mtl');

注意：
此处addEventListener方法在最新版中已被取消了，可参考原作者的github