Three.js 中的纹理映射（Texture Mapping）

在 Three.js 中，纹理映射是一种将 2D 图像映射到 3D 模型表面的方法。这种技术可以让我们为 3D 对象添加更丰富的视觉效果，例如法线贴图、环境光遮蔽等。本文将介绍如何在 Three.js 中使用纹理映射技术。

一、纹理映射的原理

纹理映射的核心思想是将一个二维图像（纹理）映射到一个三维物体的表面。这个过程可以分为以下几个步骤：

加载纹理图片：首先需要加载一张纹理图片，可以使用 THREE.TextureLoader 类来实现。

javascript 复制代码

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

创建材质：使用加载好的纹理创建一个材质，例如使用 THREE.MeshBasicMaterial。

javascript 复制代码

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

应用材质：将创建好的材质应用到一个几何体上，例如一个平面几何体（PlaneGeometry）。

javascript 复制代码

const geometry = new THREE.PlaneGeometry(1, 1);
const mesh = new THREE.Mesh(geometry, material);

渲染场景：将创建好的网格对象添加到场景中，并渲染整个场景。

javascript 复制代码

scene.add(mesh);
renderer.render(scene, camera);

通过以上步骤，我们可以将纹理映射到一个简单的平面几何体上。当然，实际应用中可能会涉及到更复杂的几何体和更高级的材质类型。

二、纹理映射的应用实例

下面是一个使用纹理映射技术实现的简单示例，我们将为一个立方体添加一个法线贴图，使其表面显示不同的纹理效果。

加载纹理图片：加载一张法线贴图，可以使用 THREE.TextureLoader 类来实现。

javascript 复制代码

const normalMap = loader.load('path/to/your/normal_map.jpg', function (texture) {
  // 根据法线贴图的大小设置立方体的尺寸和位置
  geometry.scale.set(normalMap.width / 512, normalMap.height / 512, normalMap.depth / 512);
  geometry.center().set(0, 0, -normalMap.depth / 2);
});

创建材质：使用加载好的法线贴图创建一个材质，并将纹理应用到材质的 Map 属性上。同时，设置材质的漫反射颜色和透明度。

javascript 复制代码

const material = new THREE.MeshPhongMaterial({ map: normalMap, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });

应用材质：将创建好的材质应用到一个立方体上。为了区分原纹理和法线贴图，我们为立方体添加一个自定义的材质层（Layer）。

javascript 复制代码

const layer = new THREE.MeshLambertMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: true, opacity: 0.5, envMap: normalMap, combine: THREE.MultiplyOperation, reflectivity: 0.5, shading: THREE.SmoothShading });
material.onBeforeCompile = (shader) => { shader.uniforms['fragment'].value = layer; }

渲染场景：将创建好的立方体添加到场景中，并渲染整个场景。此时，我们可以看到立方体表面显示了法线贴图的纹理效果。