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演示

本文由 Leo's Blog 创作,采用 署名-非商业性使用 2.5 中国大陆 进行许可。
如需转载、引用请署名作者且注明文章出处。
2016年12月30日 2541 浏览 评论 Threejs webgl OBJLoader MTLLoader 加载模型
上一篇:Threejs教程——动画 | 下一篇:Threejs教程——交互