Three.js加載.obj模型文件

Three.js加載.obj模型文件

使用三維軟件導出.obj模型文件的時候，會同時導出一個材質文件.mtl， .obj和.stl文件包含的數據同樣都是幾何體對象的頂點位置、頂點法向量等頂點相關數據， 材質文件.mtl包含的是RGB顏色值等材質信息。

加載.obj三維模型的時候，能夠只加載.obj文件，而後藉助three.js引擎自定義材質對象Material，也能夠同時加載obj和mtl文件。

obj文件不包含場景的相機、光照信息，不能導出骨骼動畫、變形動畫，若是但願導出光照信息、相機信息、骨骼動畫信息、變形動畫信息，能夠選擇fbx、gltf等格式。

我的WebGL/Three.js技術博客

只加載obj文件

obj文件包含了模型的幾何體信息

<!-- 引入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

/**
 * 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

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

關於obj模型文件加載的視頻講解和obj模型文件能夠參考我的WebGL/Three.js技術博客發佈的Threejs課程第14章第3小節。