用途:为 Three.js 项目提供纹理相关操作的技能参考,覆盖纹理类型、UV 映射、环境贴图与纹理设置,适用于图片、UV 坐标、立方体贴图、HDR 环境等场景。
主要能力:
- 纹理加载:THREE.TextureLoader 支持回调与 Promise 封装,可一次并行加载 color、normal、roughness 等多张贴图。
- 配置:颜色纹理设 THREE.SRGBColorSpace,数据纹理不设 colorSpace;wrapS/wrapT 支持 ClampToEdgeWrapping、RepeatWrapping、MirroredRepeatWrapping;可设置 repeat、offset、rotation、center 及 minFilter/magFilter、anisotropy、generateMipmaps。
- 纹理类型:普通纹理、DataTexture、CanvasTexture、VideoTexture,以及 KTX2Loader 压缩纹理。
- 立方体与环境:CubeTextureLoader、RGBELoader、EXRLoader,配合 PMREMGenerator 将等距柱状图转为立方体贴图,用于 scene.background 与 scene.environment,并支持 backgroundBlurriness、backgroundIntensity、backgroundRotation。
- 渲染目标:WebGLRenderTarget、DepthTexture、多采样渲染目标,以及用于动态反射的 CubeCamera。
- UV 映射:读取和修改 geometry.attributes.uv,为 aoMap 设置 uv2 通道,在着色器中变换 UV,使用纹理图集按 UV 偏移缩放选取精灵。
- 材质贴图:MeshStandardMaterial 的 map、normalMap、roughnessMap、metalnessMap、aoMap、emissiveMap、displacementMap、alphaMap 等配置。
- 内存管理:dispose、disposeMaterial、TexturePool 池化复用。
使用方式:通过 import * as THREE from "three" 引入,按需创建加载器并配置纹理属性,再赋给材质或场景。示例命令保持原样,如 import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js"。
适用场景:Web 3D 场景的贴图、PBR 材质、环境光照与天空盒、动态反射、程序化纹理生成。
限制:部分加载器来自 examples/jsm 路径;KTX2 需设置 transcoderPath 并调用 detectSupport;aoMap 依赖 uv2;CubeCamera 每帧更新开销较大;非 2 的幂纹理或数据纹理建议关闭 mipmap。性能建议使用 2 的幂尺寸、压缩纹理、图集与纹理复用。价格、平台等未在资料中提供。