使用Three.js載入外部模型及貼圖

Three.js有很多種載入模型的方式，在本文中使用的是筆者常用的載入方式，若有更好的方式歡迎留言建議。
在Three.js官方文件中有提到，建議使用.gltf格式的3D模型來進行外部模型的載入，可以得到更好的支援性及速度，所以若要載入的模型並非.gltf格式的檔案建議可以使用Blender來進行模型的製作以及模型的轉換(使用3D軟體轉換比較能夠確保轉出的結果接近自己想要的樣子，本文介紹主要以Blender為主，其他支援的3D軟體可以參考官方文件)，再由Three.js的載入器將模型載入。

Blender輸出成.gltf檔

點選要輸出的模型

上方菜單中找到檔案->匯出->glTF2.0

在彈出的視窗右側的選單中將格式修改為[glTF Embedded (.gltf)]，並且勾選[所選的物體]選項

選取存檔位置後匯出 glTF2.0

使用Three.js載入glTF模型檔

載入GLTFLoader

1
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

使用GLTFLoader載入模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const loader = new GLTFLoader();

// 壓縮模型的插件
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' ); // 路徑需指向此插件位置
loader.setDRACOLoader( dracoLoader );

loader.load(
	// 模型位置
	'models/gltf/test/test.gltf',
	// 模型非同步載入後的回調函式
	( gltf ) => {
		scene.add( gltf.scene ); // 將載入的模型加入場景
	},
	// 載入過程，可以用來製作進度條
	(xhr) => {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// 錯誤時
	(error) => {
		console.log( 'An error happened' );
	}
);

模型載入後，相關的模型資料都會在參數gltf內，比較需要注意的是模型是非同步載入，所以必須要留意一下render的時機。