Three.js 高级纹理（Advanced Textures）：超越基础，打造沉浸式 3D 世界

在 Three.js 的世界里，纹理就像是画家的颜料，是赋予 3D 模型生命力的关键。如果说几何体是模型的骨架，材质是皮肤，那么纹理就是皮肤上的花纹、色彩和故事。当我们超越基础纹理，探索高级纹理技术时，就像是从水彩画过渡到了全息投影 ------ 不仅能模拟真实世界的每一个细节，还能创造出梦幻般的虚拟世界。

一、纹理的本质：比特与像素的舞蹈

在深入高级纹理之前，我们需要理解纹理的本质。简单来说，纹理是一个二维图像，它存储着颜色信息（RGBA）。但从底层来看，纹理是 GPU 显存中的一块连续内存区域，存储着经过压缩或未压缩的二进制数据。当我们在 Three.js 中使用纹理时，实际上是在告诉 GPU："嘿，从这块内存里取颜色值，贴到模型表面！"

ini 复制代码

// 基础纹理加载示例
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/wood.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

这段代码看似简单，实则包含了复杂的底层操作：

纹理加载器从磁盘读取图像文件

将图像数据解码为像素数组

将像素数据上传到 GPU 显存

在材质中引用该纹理的 GPU 内存地址

二、高级纹理类型解析

1. 法线纹理（Normal Maps）：让平面拥有千沟万壑

法线纹理是高级纹理技术的基石之一。想象一下，你有一个平整的墙面，但你想让它看起来像有砖石凹凸的效果。传统方法是创建复杂的几何模型，但这会消耗大量性能。法线纹理提供了一个聪明的解决方案：通过存储表面法线方向的变化，欺骗光照系统。

php 复制代码

// 法线纹理应用示例
const normalTexture = textureLoader.load('textures/brick_normal.jpg');
const material = new THREE.MeshStandardMaterial({
  normalMap: normalTexture,
  normalScale: new THREE.Vector2(1, 1)
});

法线纹理的每个像素不是存储颜色值，而是存储一个三维向量（x,y,z），表示表面法线的方向。当光照计算时，会使用这个伪造的法线方向来计算阴影和高光，从而在不增加几何复杂度的情况下创造出丰富的细节。

2. 位移纹理（Displacement Maps）：真正的几何变形

位移纹理与法线纹理类似，但它不仅仅是欺骗光照系统 ------ 它实际上会改变顶点的位置。想象一下，你有一块平整的布料，通过位移纹理，你可以让它看起来像褶皱的丝绸。

ini 复制代码

// 位移纹理应用示例
const displacementTexture = textureLoader.load('textures/wave_displacement.jpg');
const geometry = new THREE.PlaneGeometry(10, 10, 100, 100); // 高细分度几何体
const material = new THREE.MeshPhongMaterial({
  displacementMap: displacementTexture,
  displacementScale: 0.5
});

位移纹理的每个像素值（通常是灰度值）表示顶点应该移动的距离。注意，位移纹理需要几何体有足够的细分度才能生效 ------ 就像你不能用乐高积木雕刻出蒙娜丽莎一样，低细分度的几何体无法表现出精细的位移效果。

3. 环境光遮蔽纹理（Ambient Occlusion Maps）：阴影中的细节

环境光遮蔽是模拟物体表面凹陷处因光线难以到达而产生的自然阴影的技术。环境光遮蔽纹理存储的是一个灰度图，白色表示完全光照，黑色表示完全遮蔽。

php 复制代码

// 环境光遮蔽纹理应用示例
const aoTexture = textureLoader.load('textures/stone_ao.jpg');
const material = new THREE.MeshStandardMaterial({
  aoMap: aoTexture,
  aoMapIntensity: 1.0
});
// 注意：需要在几何体中设置第二组UV坐标
geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2));

环境光遮蔽纹理的一个有趣之处在于它不依赖于场景中的实际光源 ------ 它是一种预计算的全局光照效果。这就像是给模型穿上了一件阴影外套，无论光线从哪个方向照射，阴影都会自然地呈现出来。

三、纹理过滤与采样：像素的魔法

当纹理被应用到 3D 模型上时，GPU 需要解决一个棘手的问题：如何将二维纹理图像映射到三维曲面上？这涉及到纹理过滤和采样技术，它们决定了纹理在不同情况下的显示效果。

1. 纹理过滤模式

Three.js 提供了多种纹理过滤模式，最常用的是：

最近邻过滤（Nearest Filtering）：使用最接近的纹理像素值，产生像素化效果

双线性过滤（Bilinear Filtering）：对周围 4 个像素进行插值，产生平滑效果

三线性过滤（Trilinear Filtering）：在多级纹理间插值，解决不同缩放级别间的过渡问题

ini 复制代码

// 纹理过滤设置示例
texture.minFilter = THREE.NearestFilter; // 缩小过滤
texture.magFilter = THREE.LinearFilter;  // 放大过滤
texture.generateMipmaps = false;         // 是否生成多级纹理

2. 多级纹理（Mipmapping）：远处的秘密

多级纹理是一种预计算技术，它会创建一系列分辨率逐渐降低的纹理图像。当物体远离相机时，GPU 会自动选择较低分辨率的纹理，从而提高性能并减少锯齿。这就像是用望远镜看远处的风景 ------ 细节不再重要，但整体效果依然存在。

四、高级纹理应用技巧

1. 纹理组合：叠加的艺术

在实际应用中，我们很少只使用一种纹理。通过组合不同类型的纹理，我们可以创造出极其复杂的表面效果。

ini 复制代码

// 纹理组合示例
const colorTexture = textureLoader.load('textures/metal_color.jpg');
const roughnessTexture = textureLoader.load('textures/metal_roughness.jpg');
const metalnessTexture = textureLoader.load('textures/metal_metalness.jpg');
const material = new THREE.MeshStandardMaterial({
  map: colorTexture,
  roughnessMap: roughnessTexture,
  metalnessMap: metalnessTexture
});

这种组合方式就像是画家使用多层颜料：颜色纹理提供基础色调，粗糙度纹理控制表面的光滑程度，金属度纹理决定表面的金属特性。

2. 程序化纹理：数学创造的奇迹

除了使用图像文件作为纹理，我们还可以在运行时生成程序化纹理。这就像是让计算机成为一名即兴创作的艺术家。

ini 复制代码

// 程序化纹理生成示例
function generateCheckerboardTexture(size) {
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  
  const context = canvas.getContext('2d');
  const tileSize = size / 8;
  
  for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
      context.fillStyle = (i + j) % 2 === 0 ? '#ffffff' : '#000000';
      context.fillRect(i * tileSize, j * tileSize, tileSize, tileSize);
    }
  }
  
  return new THREE.CanvasTexture(canvas);
}
const checkerboardTexture = generateCheckerboardTexture(512);

程序化纹理的优势在于无限的灵活性和零加载时间。你可以根据需要生成任何图案的纹理，甚至可以让纹理随时间变化，创造出动画效果。

五、性能优化与陷阱规避

高级纹理虽然强大，但也带来了性能挑战。以下是一些实用的优化技巧：

纹理压缩：使用 ETC、ASTC 等压缩格式减少纹理内存占用

纹理图集：将多个小纹理合并成一个大纹理，减少 GPU 状态切换

适当的分辨率：根据纹理在场景中的重要程度选择合适的分辨率

懒加载：对于远距离或不经常看到的物体，延迟加载高分辨率纹理

结语

高级纹理技术是 Three.js 开发者工具箱中最强大的工具之一。通过理解纹理的底层原理和巧妙运用各种高级纹理类型，你可以创造出令人惊叹的 3D 场景，从逼真的游戏环境到梦幻般的艺术作品。记住，纹理不仅仅是一张图片 ------ 它是连接数字世界与现实感知的桥梁。

现在，拿起你的 "纹理画笔"，开始创造属于你的 3D 奇迹吧！