使用Three.js提升场景：纹理贴图和GLB模型加载

Three.js入门：纹理贴图和GLB模型加载

在Three.js的奇妙世界里，纹理贴图和GLB模型的加入可以极大地增强场景的逼真度和沉浸感。本指南将带领你逐步了解如何使用Three.js将这些元素纳入你的场景中，从纹理贴图的基础到加载复杂GLB模型的技巧。

纹理贴图

纹理贴图是赋予3D模型外观和深度的关键元素。它是一种2D图像，包裹在模型表面，提供颜色、细节和纹理。

加载纹理

使用Three.js加载纹理非常简单：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./path/to/texture.jpg');

应用纹理

加载纹理后，你可以使用它来覆盖模型的材质：

const material = new THREE.MeshPhongMaterial({
  map: texture
});

GLB模型加载

GLB（GL Transmission Format）是一种高效的3D模型格式，它将几何体、材料和动画打包成一个紧凑的文件。它提供了比OBJ和FBX格式更小的文件大小和更快的加载速度。

加载GLB模型

在Three.js中加载GLB模型需要一个GLTF加载器：

const loader = new THREE.GLTFLoader();
loader.load('./path/to/model.glb', function (gltf) {
  // 加载成功后处理GLTF对象
});

添加到场景

加载GLB模型后，将其添加到场景中：

const scene = new THREE.Scene();
scene.add(gltf.scene);

示例场景

让我们结合纹理贴图和GLB模型，创建一个简单的场景。我们将创建一个带有纹理草坪的平坦地面，并添加一个直升机模型：

设置场景

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建草坪纹理

const textureLoader = new THREE.TextureLoader();
const grassTexture = textureLoader.load('./textures/grass.jpg');

创建草坪几何体和材质

const grassGeometry = new THREE.PlaneGeometry(100, 100);
const grassMaterial = new THREE.MeshPhongMaterial({
  map: grassTexture
});
const grass = new THREE.Mesh(grassGeometry, grassMaterial);
grass.rotation.x = -Math.PI / 2;
scene.add(grass);

加载直升机GLB模型

const loader = new THREE.GLTFLoader();
loader.load('./models/helicopter.glb', function (gltf) {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.y = 1;
  scene.add(gltf.scene);
});

渲染场景

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

结论

纹理贴图和GLB模型的添加可以显著提升Three.js场景的视觉效果。通过了解这些元素并遵循本指南中的步骤，你可以为你的场景增添丰富的细节和逼真度。随着你对Three.js的深入探索，你将发现更多令人兴奋的方式来创建引人入胜的3D体验。