1000字范文 > Three.js加载.obj和.mtl文件(无法加载材质路径错误问题)

Three.js加载.obj和.mtl文件(无法加载材质路径错误问题)

时间：2019-09-30 16:53:37

加载.obj模型文件

本文是Three.js电子书的14.3节

使用三维软件导出.obj模型文件的时候，会同时导出一个材质文件.mtl，.obj和.stl文件包含的信息一样都是几何体顶点相关数据，材质文件.mtl包含的是模型的材质信息，比如颜色、贴图路径等。

加载.obj三维模型的时候，可以只加载.obj文件，然后借助three.js引擎自定义材质Material，也可以同时加载.obj和.mtl文件。

只加载obj文件

只加载obj文件，引入路径three.js-master/examples/js/loaders/OBJLoader.js下的OBJLoader.js文件即可

<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>

文件加载

/*** OBJ文件加载只加载obj文件中的几何信息，不加载材质文件.mtl*/var loader = new THREE.OBJLoader();// 没有材质文件，系统自动设置Phong网格材质loader.load('./立方体/box.obj',function (obj) {// 控制台查看返回结构：包含一个网格模型Mesh的组Groupconsole.log(obj);// 查看加载器生成的材质对象：MeshPhongMaterialconsole.log(obj.children[0].material);scene.add(obj);})

加载文件返回的对象插入场景中后，你也可以做一些自定的设置，比如缩放、居中等操作。

// 加载后的一些编辑操作obj.children[0].scale.set(20,20,20);//网格模型缩放obj.children[0].geometry.center();//网格模型的几何体居中obj.children[0].material.color.set(0xff0000);//设置材质颜色

同时加载obj文件和mtl文件

mtl文件包含了模型的材质信息，比如模型颜色、透明度等信息，还有纹理贴图的路径，比如颜色贴图、法线贴图、高光贴图等等。

<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script><script src="../../three.js-master/examples/js/loaders/MTLLoader.js"></script>

/*** OBJ和材质文件mtl加载*/var OBJLoader = new THREE.OBJLoader();//obj加载器var MTLLoader = new THREE.MTLLoader();//材质文件加载器MTLLoader.load('./立方体/box.mtl', function(materials) {// 返回一个包含材质的对象MaterialCreatorconsole.log(materials);//obj的模型会和MaterialCreator包含的材质对应起来OBJLoader.setMaterials(materials);OBJLoader.load('./立方体/box.obj', function(obj) {console.log(obj);obj.scale.set(10, 10, 10); //放大obj组对象scene.add(obj);//返回的组对象插入场景中})})

obj包含多个网格模型

obj文件可以包含多个网格模型对象，不一定就是一个，这些网格模型对象全部是并列关系，无法通过父子关系构建一个树结构层级模型。

// 没有材质文件，系统自动设置Phong网格材质OBJLoader.load('./多个模型/model.obj',function (obj) {// 控制台查看返回结构：包含一个网格模型Mesh的组Groupconsole.log(obj);scene.add(obj);// 加载后的一些编辑操作obj.scale.set(20,20,20);//网格模型缩放// 设置其中一个网格模型的颜色obj.children[0].material.color.set(0xff0000);})

模型纹理贴图

obj模型的mtl文件可能包含纹理贴图，也可能不包含，这主要看3D美术是否设置。

一个包含纹理贴图路径的.mtl文件,如果路径有问题，可能会无法加载，可以仿照该案例修改。

// 一个包含纹理贴图路径的.mtl文件newmtl material_1Ns 32d 1Tr 0Tf 1 1 1illum 2Ka 0.5880 0.5880 0.5880Kd 0.9880 0.9880 0.9880Ks 0.1200 0.1200 0.1200map_Kd ./贴图/Earth.pngmap_ks ./贴图/EarthSpec.pngnorm ./贴图/EarthNormal.png

mtl和threejs贴图对应关系

/*** OBJ和材质文件mtl加载*/var OBJLoader = new THREE.OBJLoader(); //obj加载器var MTLLoader = new THREE.MTLLoader(); //材质文件加载器MTLLoader.load('./贴图/material.mtl', function(materials) {// 返回一个包含材质的对象MaterialCreatorconsole.log(materials);//obj的模型会和MaterialCreator包含的材质对应起来OBJLoader.setMaterials(materials);OBJLoader.load('./贴图/model.obj', function(obj) {console.log(obj);scene.add(obj); //返回的组对象插入场景中// 加载后操作obj.children[0].scale.set(2, 2, 2); //缩放球体网格模型// 通过调节参数，地球表面的凹凸感更强obj.children[0].material.normalScale.set(3, 3);})})