threejs-textures

用途

Three.js Textures 是一份面向 Three.js 的纹理使用技能文档，用于在 WebGL 场景中处理图像纹理、UV 坐标、立方体贴图与 HDR 环境贴图。当需要为材质添加贴图、配置纹理采样参数、构建环境反射或生成程序化纹理时，可参考本技能。

主要能力

纹理加载

使用 THREE.TextureLoader 加载纹理，支持回调式异步加载（成功、进度、错误回调），也可封装为 Promise 以便并行加载多张贴图：

function loadTexture(url) {
  return new Promise((resolve, reject) => {
    new THREE.TextureLoader().load(url, resolve, undefined, reject);
  });
}

const [colorMap, normalMap, roughnessMap] = await Promise.all([
  loadTexture("color.jpg"),
  loadTexture("normal.jpg"),
  loadTexture("roughness.jpg"),
]);

纹理配置

色彩空间：颜色/反照率纹理使用 THREE.SRGBColorSpace；数据纹理（法线、粗糙度、金属度、AO）保持默认，不设置 colorSpace。
包裹模式：RepeatWrapping（平铺）、ClampToEdgeWrapping（默认，拉伸边缘像素）、MirroredRepeatWrapping（镜像平铺）。
重复、偏移与旋转：通过 repeat.set()、offset.set()、rotation 与 center 控制。
过滤：minFilter 与 magFilter 可选 LinearMipmapLinearFilter、NearestFilter、LinearFilter 等；各向异性过滤通过 renderer.capabilities.getMaxAnisotropy() 设置。
Mipmap：默认生成，非 2 的幂纹理或数据纹理可关闭并配合 LinearFilter。

纹理类型

常规纹理：new THREE.Texture(image)，需设置 needsUpdate = true。
数据纹理：THREE.DataTexture 从原始 Uint8Array 数据创建。
画布纹理：THREE.CanvasTexture 基于 Canvas 2D 绘制内容。
视频纹理：THREE.VideoTexture 自动更新，无需手动设置 needsUpdate。
压缩纹理：通过 KTX2Loader 加载 KTX2/Basis 纹理，需设置转码器路径并检测支持。

立方体贴图与环境贴图

CubeTextureLoader 按 +X、-X、+Y、-Y、+Z、-Z 顺序加载六张图，可用作 scene.background、scene.environment 或 material.envMap。
使用 PMREMGenerator 将等距柱状投影贴图转换为立方体贴图。
HDR 纹理通过 RGBELoader 或 EXRLoader 加载，并设置 EquirectangularReflectionMapping。
背景可配置 backgroundBlurriness、backgroundIntensity、backgroundRotation。

渲染目标

WebGLRenderTarget 可将场景渲染到纹理，再作为材质贴图使用。
可附加 DepthTexture 访问深度信息。
通过 samples 启用多重采样（MSAA）。
CubeCamera 配合 WebGLCubeRenderTarget 生成动态环境贴图，需在动画循环中更新（开销较大）。

UV 映射

通过 geometry.attributes.uv 读取与修改 UV 坐标。
AO 贴图需要第二套 UV 通道 uv2。
可在着色器中通过 uniform 对 UV 进行偏移与缩放。
纹理图集通过 offset/repeat 选择子图。

材质贴图组合

MeshStandardMaterial 支持 PBR 贴图集：map（sRGB）、normalMap、roughnessMap、metalnessMap、aoMap（使用 uv2）、emissiveMap、displacementMap、alphaMap。法线贴图类型可选 TangentSpaceNormalMap 或 ObjectSpaceNormalMap。

程序化纹理

可通过 DataTexture 生成噪声纹理，或通过 Canvas 生成渐变纹理。

内存管理

使用 texture.dispose() 释放单张纹理，或遍历材质贴图字段统一释放。
可实现纹理池（TexturePool）缓存与复用纹理。

使用方式

按需查阅对应章节的代码示例，将片段集成到 Three.js 项目中。示例均基于 ES Module 导入方式（import * as THREE from "three"），部分加载器需从 three/examples/jsm/loaders/ 引入。

适用场景

为 PBR 材质配置颜色、法线、粗糙度、金属度、AO 等贴图。
构建天空盒、环境反射与 HDR 光照环境。
使用画布、视频或数据纹理实现动态或程序化效果。
通过渲染目标实现后期效果或纹理复用。
优化纹理内存与性能（2 的幂尺寸、压缩纹理、纹理图集、mipmap、限制尺寸、复用纹理）。

限制

资料未提供该技能的安装命令、收费方式、平台支持范围或具体效果数据。
部分操作（如 CubeCamera 更新）开销较大，需注意性能。
数据纹理不应设置 colorSpace，非 2 的幂纹理需关闭 mipmap。

技能介绍

用途