外部模型
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