Threejs教程——加载模型

在Threejs中我们可以使用代码创建简单的模型，可是对于复杂的模型，就没有办法使用代码来创建了。这个时候我们会采用加载3d模型的方式，直接加载美工人员使用专业工具制作的3d模型和动画。Threejs支持的格式还不少，基本上常用的都有支持。具体可以看看官方文档，这里我们简单介绍下加载.obj格式的模型文件和材质。

首先，我们需要准备原材料，也就是模型文件，这个文件一般由美工人员导出，例如从3dmax软件里面导出画好的模型文件。记得一定要连材质一起导出，并且选取贴图材质路径是相对路径，一般导出的模型及材质会包括一个obj文件和一个材质mtl文件。如果有贴图的话导出的文件夹里面还会有贴图的图片文件。这里我给出一个导出文件的目录

接下来我们使用代码加载以上的材质和模型

先引用加载需要的loader文件，在源码项目的examples\js\loaders文件夹里面有很多loader，我们选取自己需要的obj以及mtl的loader

<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>

然后再代码中初始化loader

var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();

使用时

function loadModel(folder,name,position)
    {
        mtlLoader.setBaseUrl(folder);
        mtlLoader.setPath(folder);
        mtlLoader.load(name + ".mtl", function (materials) {  
            objLoader.setMaterials(materials); 
            objLoader.load(folder+ name + ".obj", function (object) {


                object.position.set(position.x, position.y, position.z);
                object.rotateX(-Math.PI/2)
                scene.add(object);


            });


        }); 


    }

调用loadModel("obj/humvee/", "humvee", { x: 0, y: 0, z: 0 });就可以加载obj/humvve文件夹下面的humvee.mtl已经obj了。这里值得注意的是如果有贴图的图片，我们需要设置mtlLoader的setBaseUrl 以及setPath到图片当前目录，否则会报图片路径找不到。

最终显示效果如下

点击查看在线demo演示