深入理解GLTF模型加载
GLTF（GL Transmission Format）是一种高效的3D模型传输格式，专为Web3D应用设计。在Three.js中加载GLTF模型是一个涉及多个步骤的过程，包括引入加载器、设置相机参数以及调整渲染器设置。以下是详细的教程和完整的实例代码。
1. 引入GLTFLoader
首先，需要引入Three.js的GLTF加载器库GLTFLoader.js。
html
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>2. 初始化场景和渲染器
创建一个基本的Three.js场景，并设置渲染器。
javascript
<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 loader = new GLTFLoader();
// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
</script>3. 加载GLTF模型
使用GLTFLoader加载外部的.gltf模型，并将其添加到场景中。
javascript
<script type="module">
// ... 引入和初始化代码 ...
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
camera.lookAt(gltf.scene.position);
});
</script>4. 设置相机参数
根据模型的尺寸和场景需求，设置相机的位置和参数。
javascript
<script type="module">
// ... 加载模型代码 ...
// 假设模型的几何中心位于世界坐标原点
camera.position.set(0, 0, 5);
</script>5. 解决纹理颜色偏差
在Three.js中加载.gltf模型时，可能会遇到纹理颜色偏差的问题。可以通过设置渲染器的输出编码来解决。
javascript
<script type="module">
// ... 引入和初始化代码 ...
renderer.outputColorSpace = THREE.SRGBColorSpace;
</script>完整实例代码
将上述代码整合到一个HTML文件中，创建一个完整的示例。
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 loader = new GLTFLoader();
// 创建相机控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
// 加载gltf模型
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
camera.lookAt(gltf.scene.position);
});
// 设置相机位置
camera.position.set(0, 0, 5);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update(); // 更新相机控件
renderer.render(scene, camera);
}
animate();
// 解决纹理颜色偏差
renderer.outputColorSpace = THREE.SRGBColorSpace;
</script>
</body>
</html>