3. 纹理 (Textures) 与材质贴图

3. 纹理 (Textures) 与材质贴图

Three.js 纹理 (Textures) 与材质贴图详解

在 Three.js 中，纹理和材质贴图是为 3D 模型赋予表面细节和视觉效果的关键技术。它们允许我们模拟各种材料的属性，如颜色、粗糙度、金属感、法线等，从而创建更逼真和引人入胜的场景。

1. 纹理 (Textures) 的概念

纹理本质上是图像数据，可以是一张图片、一段视频，甚至是一个程序生成的图像。在 Three.js 中，纹理对象（THREE.Texture）用于存储和管理这些图像数据，并将其应用到 3D 模型的表面。

1.1 纹理的类型

Three.js 提供了多种纹理类型，以适应不同的需求：

• THREE.Texture: 最基本的纹理类型，用于加载静态图像。

• THREE.VideoTexture: 用于加载视频作为纹理。

• THREE.CanvasTexture: 用于将 HTML Canvas 元素作为纹理。

• THREE.CubeTexture: 用于创建立方体贴图，常用于天空盒或环境光照。

• THREE.DataTexture: 用于从原始数据（如像素数组）创建纹理。

1.2 加载纹理

可以使用 THREE.TextureLoader 来加载图像文件作为纹理：

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

1.3 纹理属性

THREE.Texture 对象具有许多属性，可以控制纹理的显示方式：

• wrapS 和 wrapT: 定义纹理在水平（S）和垂直（T）方向上的重复方式。常用的值有 THREE.RepeatWrapping（重复）、THREE.ClampToEdgeWrapping（边缘拉伸）和 THREE.MirroredRepeatWrapping（镜像重复）。

• minFilter 和 magFilter: 定义纹理在缩小（minification）和放大（magnification）时的过滤方式。常用的值有 THREE.NearestFilter（最近邻）和 THREE.LinearFilter（线性）。 THREE.NearestMipmapLinearFilter 和 THREE.LinearMipmapLinearFilter 等带 Mipmap 的选项可以提高渲染质量。

• repeat: 控制纹理在水平和垂直方向上的重复次数。

• offset: 控制纹理在水平和垂直方向上的偏移量。

• rotation: 控制纹理的旋转角度。

• center: 旋转中心点。

2. 材质贴图 (Material Maps) 的概念

材质贴图是一种特殊的纹理，它不直接表示颜色，而是用于控制材质的特定属性。通过使用不同的贴图，我们可以模拟各种复杂的表面效果。

2.1 常见的材质贴图类型

• map (颜色贴图/漫反射贴图): 控制材质的颜色。

• normalMap (法线贴图): 模拟表面的凹凸细节，而无需增加几何体的复杂度。

• roughnessMap (粗糙度贴图): 控制表面的粗糙程度，影响光线的反射方式。

• metalnessMap (金属度贴图): 控制表面的金属感，影响光线的反射颜色。

• aoMap (环境光遮蔽贴图): 模拟物体表面的阴影效果，增加真实感。

• displacementMap (置换贴图): 实际改变几何体的顶点位置，创建真实的凹凸效果。

• alphaMap (透明度贴图): 控制材质的透明度。

• emissiveMap (自发光贴图): 使材质发出光芒。

2.2 应用材质贴图

要应用材质贴图，需要将纹理对象赋值给材质的相应属性。例如，要应用颜色贴图，可以这样做：

const material = new THREE.MeshStandardMaterial(); // 使用 StandardMaterial
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/your/color_texture.jpg');
material.map = colorTexture;
material.needsUpdate = true; // 告诉 Three.js 材质已更新
​

2.3 材质贴图与光照

材质贴图与光照系统密切相关。不同的材质贴图会影响光线在物体表面的反射和散射方式，从而产生不同的视觉效果。例如，粗糙度贴图会使表面看起来更漫反射，而金属度贴图会使表面看起来更镜面反射。

3. 代码实践：创建带有纹理和材质贴图的立方体

下面是一个完整的例子，演示如何创建一个带有颜色贴图和法线贴图的立方体：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 1. 创建场景、相机和渲染器
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);
// 2. 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 3. 设置相机位置
camera.position.z = 3;
// 4. 创建光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 5. 加载纹理
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('textures/color.jpg'); // 替换为你的颜色贴图路径
const normalTexture = textureLoader.load('textures/normal.jpg'); // 替换为你的法线贴图路径
// 6. 创建材质
const material = new THREE.MeshStandardMaterial({
    map: colorTexture,
    normalMap: normalTexture,
});
// 7. 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 8. 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 9. 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 更新轨道控制器
    renderer.render(scene, camera);
}
animate();
​

代码详解:

1. 导入 Three.js 模块: 导入必要的 Three.js 模块和 OrbitControls。

2. 创建场景、相机和渲染器: 创建 Three.js 场景、透视相机和 WebGL 渲染器。

3. 创建轨道控制器: 使用 OrbitControls 允许用户使用鼠标控制相机。

4. 设置相机位置: 设置相机的初始位置。

5. 创建光源: 添加环境光和方向光，照亮场景。

6. 加载纹理: 使用 THREE.TextureLoader 加载颜色贴图和法线贴图。 请确保替换 'textures/color.jpg' 和 'textures/normal.jpg' 为你实际的纹理文件路径。

7. 创建材质: 创建一个 THREE.MeshStandardMaterial 并将加载的纹理赋值给 map 和 normalMap 属性。 MeshStandardMaterial 是一种基于物理的渲染 (PBR) 材质，可以更好地模拟真实世界的材质效果。

8. 创建几何体: 创建一个立方体几何体。

9. 创建网格: 使用几何体和材质创建一个网格对象，并将其添加到场景中。

10. 渲染循环: 使用 requestAnimationFrame 创建一个循环，不断更新场景并渲染。 controls.update() 用于更新轨道控制器，使相机能够响应用户的交互。

项目结构建议:

将纹理文件放在一个单独的 textures 文件夹中，以便更好地组织项目。

your-project/
├── index.html
├── main.js       (包含上述代码)
└── textures/
    ├── color.jpg
    └── normal.jpg
​

4. 纹理坐标 (UV Mapping)

纹理坐标 (UV 坐标) 定义了纹理如何映射到 3D 模型的表面。每个顶点都有一组 UV 坐标，范围通常在 0 到 1 之间。U 坐标表示纹理的水平方向，V 坐标表示纹理的垂直方向。

4.1 纹理坐标的原理

可以将纹理坐标想象成将 3D 模型的表面 "展开" 成 2D 平面，然后将纹理图像应用到这个平面上。UV 坐标定义了 3D 模型上的每个点对应于纹理图像上的哪个位置。

4.2 修改纹理坐标

可以通过修改几何体的 uvs 属性来改变纹理坐标。这允许你控制纹理在模型上的显示方式，例如旋转、缩放或偏移纹理。

4.3 自动生成纹理坐标

对于一些简单的几何体，Three.js 可以自动生成纹理坐标。但是，对于复杂的模型，通常需要手动创建或修改纹理坐标，以获得最佳效果。 专业的 3D 建模软件通常提供强大的 UV 展开和编辑工具。

5. 纹理过滤 (Texture Filtering)

纹理过滤用于控制纹理在缩小或放大时的显示效果。当纹理的像素数量与屏幕上的像素数量不匹配时，就需要进行纹理过滤。

5.1 常见的过滤方式

• NearestFilter (最近邻过滤): 选择距离当前像素最近的纹理像素。这种过滤方式速度快，但会产生锯齿状的边缘。

• LinearFilter (线性过滤): 对周围的纹理像素进行线性插值，以生成当前像素的颜色。这种过滤方式可以减少锯齿，但会使纹理看起来有些模糊。

• Mipmapping: 生成一系列不同分辨率的纹理图像，并根据物体与相机的距离选择合适的纹理。Mipmapping 可以显著提高渲染质量，尤其是在观察远处的物体时。 常用的 Mipmap 过滤方式有 NearestMipmapNearestFilter, LinearMipmapNearestFilter, NearestMipmapLinearFilter, 和 LinearMipmapLinearFilter。 LinearMipmapLinearFilter 通常是最好的选择，因为它提供了良好的视觉效果和性能。

5.2 设置纹理过滤

可以通过设置纹理的 minFilter 和 magFilter 属性来控制纹理过滤方式。

texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.magFilter = THREE.LinearFilter;
​

6. 使用 CanvasTexture

THREE.CanvasTexture 允许你将 HTML Canvas 元素作为纹理使用。这对于动态生成纹理非常有用，例如绘制文本、图表或动画。

// 1. 创建 Canvas 元素
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const context = canvas.getContext('2d');
// 2. 在 Canvas 上绘制内容
context.fillStyle = 'white';
context.fillRect(0, 0, 256, 256);
context.fillStyle = 'black';
context.font = '48px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('Hello', 128, 128);
// 3. 创建 CanvasTexture
const texture = new THREE.CanvasTexture(canvas);
// 4. 将纹理应用到材质
const material = new THREE.MeshBasicMaterial({ map: texture });
​

7. 性能优化

• 纹理尺寸: 使用尽可能小的纹理尺寸，以减少内存占用和加载时间。 建议使用 2 的幂次方大小的纹理（例如 64x64, 128x128, 256x256, 512x512, 1024x1024），因为这些尺寸在硬件上更易于处理。

• 纹理格式: 使用压缩的纹理格式 (例如 DDS, PVRTC, ETC) 可以减少纹理的内存占用和加载时间。 Three.js 支持多种压缩纹理格式，但需要根据目标平台和设备选择合适的格式。

• 纹理重复利用: 尽可能重复利用纹理，避免加载重复的纹理数据。

• Mipmapping: 启用 Mipmapping 可以提高渲染质量，但会增加纹理的内存占用。 在移动设备上，需要权衡渲染质量和性能。

• 异步加载: 使用 THREE.TextureLoader 的回调函数，异步加载纹理，避免阻塞主线程。

• 纹理预加载: 在场景加载之前，预加载纹理，以减少运行时卡顿。

8. 总结

纹理和材质贴图是 Three.js 中非常重要的概念，它们可以极大地丰富 3D 场景的视觉效果。通过掌握纹理的加载、属性设置、纹理坐标、纹理过滤以及各种材质贴图的使用，可以创建出更加逼真和引人入胜的 3D 体验。

希望这篇文章能够帮助你更好地理解 Three.js 中的纹理和材质贴图。