threejs-textures

Three.js 纹理

在处理纹理资源、UV 行为、颜色/数据解释、环境贴图和 GPU 纹理内存时，使用此技能。资产传输/解码器设置交由 threejs-loaders，PBR 材质语义交由 threejs-materials，直接光照决策交由 threejs-lighting。

适用场景

• 加载和配置基础色、法线、粗糙度、金属度、AO、自发光或透明度贴图
• 修复颜色不匹配、图像模糊/远处显示模糊、接缝、重复异常、UV 错误或 AO 缺失
• 使用 HDR/立方体环境贴图、画布/视频/数据纹理或渲染目标
• 减少纹理内存、分辨率、采样开销或重复的 GPU 分配

说明

步骤 1：按含义对每种纹理分类

1. 确认纹理存储的是可见颜色还是非颜色数据。
2. 对可见颜色纹理，使用渲染器/版本文档中说明的色彩空间设置；不要对法线、粗糙度、金属度、深度或数据贴图应用显示颜色处理。
3. 确认网格具有材质贴图所需的 UV 通道。根据材质和资产管线，环境光遮蔽通常需要第二组 UV。

const baseColor = await new THREE.TextureLoader().loadAsync("/textures/albedo.jpg");
baseColor.colorSpace = THREE.SRGBColorSpace;
baseColor.wrapS = THREE.RepeatWrapping;
baseColor.wrapT = THREE.RepeatWrapping;
baseColor.repeat.set(2, 2);

步骤 2：根据视觉效果选择采样和环绕方式

需求	设置方向
可平铺贴图	使用重复/镜像环绕，并有意设置 repeat
硬边像素艺术纹理	使用最近邻过滤，避免意外的 mip 模糊
普通 3D 资产	使用 mipmap 和适当的缩小/放大过滤
倾斜表面的细节	在实测的设备限制内使用各向异性过滤
镂空透明度	使用正确的材质透明策略，而不只是调整纹理过滤
动态画布/视频	使用 CanvasTexture / VideoTexture，并管理其生命周期

不要习惯性地将最大各向异性全局设为最高值。应查询硬件能力，并根据实际视觉价值选择质量档位。

步骤 3：将环境纹理和渲染纹理视为 GPU 资源

HDR/等距柱状纹理通常需要经过与渲染器版本相适配的预处理，才能用作 PBR 环境。根据预期效果，分别设置 scene.environment 和 scene.background。渲染目标的纹理由渲染过程生成，必须随该过程一起调整大小/释放。

步骤 4：规划内存预算和资源所有权

纹理内存取决于尺寸、mip 层级、格式和副本数量，而不仅是文件大小。复用不可变纹理实例，避免多个所有者通过同一 URL 重复加载纹理；最后一个使用者卸载时，释放由功能独占的纹理/渲染目标。

function disposeTexture(texture) {
  texture?.dispose();
}

不要释放其他材质或共享资产缓存仍在使用的纹理。

步骤 5：验证视觉正确性和生命周期

• 在有代表性的光照和色彩管理设置下，测试基础色、法线、粗糙度、金属度、AO 和自发光贴图。
• 检查实际网格上的 UV 接缝和重复方向。
• 在目标设备/配置上测试内存压力和帧耗时表现。
• 调整渲染目标大小，停止/释放视频资源，并释放由功能独占的 GPU 纹理。

示例

PBR 纹理集

将每张贴图连接到语义对应的材质属性，仅为可见颜色贴图设置色彩空间，并验证资产使用的法线贴图约定。法线看起来平坦或反向时，通常是贴图约定、切线/UV 或颜色数据处理问题，而不是粗糙度问题。

动态视频表面

从明确归属的视频元素创建 VideoTexture，处理播放/暂停/错误状态和跨域设置，并根据 UI 生命周期释放纹理和媒体资源。

最佳实践

1. 设置色彩空间前，先区分显示颜色和数值数据。
2. 在资产管线中明确标注 UV 通道要求。
3. 根据设备预算选择合适的纹理尺寸和压缩方式。
4. 复用共享纹理，并且仅在最后一个使用者不再使用时释放。
5. 将渲染目标和视频/画布纹理视为需要主动管理生命周期的资源。

参考资料

• Three.js 纹理源代码覆盖范围
• 纹理文档
• Three.js 手册：纹理