GLTF加载器（GLTFLoader）

什么是GLTF

glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

导入

GLTFLoader 是一个附加组件，必须显式导入。 See Installation / Addons.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 实例化加载器
const loader = new GLTFLoader();

// 可选：提供一个DRACOLoader实例来解码压缩网格数据
//DRACO其中包含顶点坐标，法线，颜色和其他的属性，嵌入GLTF使用
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
loader.setDRACOLoader( dracoLoader );

//加载GLTF资源
loader.load(
	// 资源 URL
	'models/gltf/duck/duck.gltf',
	// 当资源加载完毕调用
	function ( gltf ) {

		scene.add( gltf.scene );

		gltf.animations; // Array<THREE.AnimationClip> 动画
		gltf.scene; // THREE.Group 包含了GLTF所有场景
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

	},
	// 加载过程中回调
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// 加载错误时回调
	function ( error ) {

		console.log( 'An error happened' );

	}
);

记录

0416

在实践中第一次用到gltf.scene，实际上是需要对一系列mesh操作的时候可以通过Object3D.add（gltf.scene）把gltf所包含的Group场景添加到父对象。
进行一系列操作，可将父对象理解为容器。
可以容器嵌套，这样不同部位可以应用不同的位移、旋转等变换。

---

本贴会随后续遇到问题持续更新