Three.js加載.obj和.mtl文件(無法加載材質、路徑錯誤問題)

加載.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文件即可

<!-- 引入obj模型加載庫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的組Group
  console.log(obj);
  // 查看加載器生成的材質對象：MeshPhongMaterial
  console.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文件包含了模型的材質信息，比如模型顏色、透明度等信息，還有紋理貼圖的路徑，比如顏色貼圖、法線貼圖、高光貼圖等等。

<!-- 引入obj模型加載庫OBJLoader.js -->
<script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
<!-- 引入obj模型材質加載庫MTLLoader.js -->
<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) {
  // 返回一個包含材質的對象MaterialCreator
  console.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的組Group
  console.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_1
	Ns 32
	d 1
	Tr 0
	Tf 1 1 1
	illum 2
	Ka 0.5880 0.5880 0.5880
	Kd 0.9880 0.9880 0.9880
	Ks 0.1200 0.1200 0.1200
	map_Kd ./貼圖/Earth.png
  map_ks ./貼圖/EarthSpec.png
	norm ./貼圖/EarthNormal.png

mtl和threejs貼圖對應關係

mtl貼圖	Threejs貼圖
map_kd	map
map_ks	specularMap
map_bump/bump	bumpMap

/**
 * OBJ和材質文件mtl加載
 */
var OBJLoader = new THREE.OBJLoader(); //obj加載器
var MTLLoader = new THREE.MTLLoader(); //材質文件加載器
MTLLoader.load('./貼圖/material.mtl', function(materials) {
  // 返回一個包含材質的對象MaterialCreator
  console.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);
  })
})

導出.obj和.mtl的名稱、路徑問題

3dmax導出的obj和mtl模型文件有時候需要修改一下個別位置字符，比如.obj中.mtl文件的名稱可能是亂碼mtllib �����.mtl，.mtl文件中貼圖的路徑要設置正確，比如導出的是絕對路徑還是相對路徑，可以打開看下。

.obj文件不包含信息

.obj文件不包含場景的相機Camera、光源Light等信息，不能導出骨骼動畫、變形動畫，如果希望導出光照信息、相機信息、骨骼動畫信息、變形動畫信息，可以選擇.fbx、.gltf等格式。