使用Three.js載入gltf模型

一、gltf文件格式

glTF（GL transmission format）是由Khronos Group發布的一種用於在3D應用程序中傳輸和渲染3D模型和場景的標準。它的目標是成為一種快速、輕量且易於擴展的中間格式，支持從現代3D工具中導出的大部分內容，包括動畫、材料和幾何體等。

通常情況下，我們使用3D建模軟體（例如Blender、Maya等）創建3D模型後，需要將模型導出為各種格式（例如OBJ、FBX、DAE等）才能進行使用。但是傳統的3D文件格式通常很重，導致載入時間長，而且不靈活。相比之下，glTF格外小巧，並且完美地與WebGL和Three.js兼容，使它成為輕量級Web 3D模型的首選格式。

二、Three.js的GLTFLoader載入器

Three.js是一款流行的JavaScript庫，用於在Web上呈現3D圖形。它提供了一些基本幾何體、貼圖、燈光等組件，同時也有一些實用的工具和監控器。Three.js的GLTFLoader是一種用於載入和解析glTF文件的JavaScript庫。

使用GLTFLoader，我們可以輕鬆地載入glTF文件，將其加入到Three.js場景中，添加不同的光照和材質，實現複雜的場景渲染。

下面的代碼片段演示了如何使用GLTFLoader載入gltf模型：

// 首先需要在HTML頁面中引入three.js和GLTFLoader
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/110/loaders/GLTFLoader.min.js"></script>

// 創建Three.js場景、相機和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(...);
var renderer = new THREE.WebGLRenderer(...);

// 創建GLTFLoader實例，並設置載入完成後的回調函數
var loader = new THREE.GLTFLoader();
loader.load( 'models/mymodel.gltf', function ( gltf ) {
    // 當模型載入完成後，可以在回調函數中對模型進行處理
    scene.add( gltf.scene );
}, function ( xhr ) {
    // 當模型載入過程中，可以在回調函數中對載入的進度進行處理
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}, function ( error ) {
    // 當模型載入失敗時，可以在回調函數中進行處理
    console.error( error );
} );

在上面的代碼中，我們先引入了three.js和GLTFLoader的庫文件，然後創建了Three.js場景、相機和渲染器。接著創建了GLTFLoader實例，使用它的load方法非同步載入gltf模型。load方法有四個參數：第一個參數是要載入的gltf文件的路徑，第二個參數是載入完成後的回調函數，第三個參數是載入進度回調函數，第四個參數是載入失敗回調函數。

當模型載入完成後，我們可以在回調函數中對模型進行處理，例如將它添加到場景中：

loader.load( 'models/mymodel.gltf', function ( gltf ) {
    // 將模型添加到場景中
    scene.add( gltf.scene );
}, ... );

三、GLTF模型的組成部分

GLTF是一種面向Web的格式，它將3D模型分解成了幾個部分，每個部分都是以JSON格式存儲的。下面是GLTF模型的主要部分：

3D場景

整個3D場景是GLTF模型的根元素，存儲了場景中所有的節點、光照、相機等信息。JSON格式的場景數據可以通過三個文件來存儲：.gltf、.glb 和.bin文件。 .gltf是一個純文本格式，包含了場景的所有信息，.glb文件則是二進位格式的，包含了所有的節點信息、二進位數據、材質文件等內容。

網格

網格是GLTF模型的物理實體，包括幾何體數據和材質數據等信息。一個網格可以包含多個幾何體，也可以使用同一個材質。

材質

材質控制了網格的外觀，包括基礎顏色、透明度、金屬度、粗糙度、環境光遮蔽等屬性。

紋理

紋理是一幅2D圖片，用於給3D物體提供顏色、紋理、法線等信息。GLTF模型中的紋理可以被用於材質的漫反射、環境遮蔽、法線貼圖等屬性。

四、GLTF模型的優化

雖然GLTF模型已經被優化過了，但是在項目中，我們仍需要進一步優化模型以提高渲染效率和減少內存佔用。

壓縮紋理

紋理是3D模型中佔用大量內存的元素之一。使用壓縮紋理會大大減少內存佔用，提高渲染效率。在Three.js中，我們可以使用CompressedTextureLoader載入已經被壓縮的圖片。

var textureLoader = new THREE.CompressedTextureLoader();
textureLoader.load( 'textures/texture.dds', function ( texture ) {

    // 在材質中使用壓縮紋理
    var material = new THREE.MeshBasicMaterial( { map: texture } );

} );

刪除不必要的節點

在導出3D模型的過程中，一些不必要的節點可能也被導出了。我們可以在載入GLTF模型後，使用Three.js的API刪除這些節點。

loader.load( 'models/mymodel.gltf', function ( gltf ) {

    // 遍歷所有節點
    for ( var i = 0; i < gltf.scene.children.length; i ++ ) {
        var node = gltf.scene.children[ i ];

        // 如果節點名字包含」不必要節點「，就刪除該節點
        if ( node.name.indexOf( '不必要節點' ) !== -1 ) {
            gltf.scene.remove( node );
        }
    }

    // 將模型添加到場景中
    scene.add( gltf.scene );

} );

使用LOD（層級漸進式顯示）技術

在渲染靜態大型場景時，使用LOD技術可以提高渲染效率。該技術根據物體與相機的距離，漸進式地顯示更為詳細或簡化的3D模型。

在Three.js中，我們可以使用THREE.LOD創建一個LOD對象，它包含一個或多個具有不同細節層次的對象。然後，我們可以使用addLevel方法，定義不同細節層次對象的距離範圍和對應的模型對象。

var lod = new THREE.LOD();

// 創建3個不同細節層次的對象，最後一個細節對象為模型對象
var modelHighDetail = new THREE.Mesh(...);
var modelMedDetail = new THREE.Mesh(...);
var modelLowDetail = new THREE.Mesh(...);
var model = new THREE.Mesh(...);

// 將不同細節層次的對象添加到LOD對象中
lod.addLevel( modelHighDetail, 0 );
lod.addLevel( modelMedDetail, 100 );
lod.addLevel( modelLowDetail, 500 );
lod.addLevel( model, 1000 );

// 將LOD對象添加到場景中
scene.add( lod );

五、總結

本文闡述了使用Three.js的GLTFLoader載入gltf模型的方法，詳細介紹了GLTF模型的組成部分、GLTF模型的優化方法與技巧。對於需要在Web上呈現3D模型的開發者來說，GLTF模型是在3D建模軟體中構建3D模型之後的最佳輸出格式之一，同時使用Three.js的GLTFLoader還可以很方便地對模型進行載入、顯示和處理。