GLTF文件格式概述
GLTF（GL Transmission Format）是一种用于3D场景和模型的传输格式，它旨在优化Web3D应用中的模型加载。GLTF模型文件有几种不同的组织形式：
- 单独的
.gltf文件：包含模型的所有数据，以JSON格式编码。 - 单独的
.glb文件：.gltf的二进制版本，更紧凑，加载速度更快。 .gltf+.bin+ 纹理文件：模型数据、顶点数据和纹理分别存储在不同的文件中。
加载GLTF模型
无论GLTF模型的组织形式如何，加载它们的代码非常相似。以下是加载不同形式GLTF模型的示例代码。
加载单独的.gltf文件
javascript
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
});加载单独的.glb文件
javascript
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
scene.add(gltf.scene);
});加载.gltf + .bin + 纹理文件
javascript
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model/folder.gltf', function (gltf) {
scene.add(gltf.scene);
});Blender导出GLTF模型
Blender是一款流行的3D建模软件，它支持以不同的形式导出GLTF模型：
- 单独导出
.gltf文件：模型的所有数据都包含在一个文件中。 - 单独导出
.glb文件：模型数据的二进制版本，文件更小，加载更快。 - 导出
.gltf+.bin+ 纹理文件：模型数据、顶点数据和纹理分别存储在不同的文件中。
注意事项
- 当模型的纹理和其他资源以单独的文件形式存在时，确保这些文件相对于
.gltf文件的路径正确，否则Three.js可能无法正确加载这些资源。 .glb文件的加载方式与.gltf文件相同，不需要特殊处理。
完整示例代码
以下是一个完整的HTML示例，展示如何在Three.js中加载不同形式的GLTF模型：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js GLTF Model Loading</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
const loader = new THREE.GLTFLoader();
// 选择要加载的GLTF模型类型
const modelPath = 'path/to/your/model.gltf'; // 可以是.gltf、.glb或包含.bin和纹理的文件夹路径
loader.load(modelPath, function (gltf) {
scene.add(gltf.scene);
camera.lookAt(gltf.scene.position);
});
function animate() {
requestAnimationFrame(animate);
controls.update(); // 更新相机控件
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>