古法编程

在 Three.js 中高效管理与优化纹理贴图

解决 3D 场景中材质粗糙、显存占用高或颜色失真的问题：通过规范化纹理加载、配置颜色空间及优化采样策略，实现电影级的表面细节与流畅的运行性能。

为什么需要这个技能

在 Three.js 中，仅仅加载一张图片作为纹理是不够的。如果忽略了颜色空间（Color Space），模型会出现色差；如果不对纹理进行过滤（Filtering）和 Mipmap 设置，远距离物体会出现闪烁；而如果不正确管理内存（Dispose），会导致 Web 页面崩溃。

掌握纹理高级配置，可以让你在 PBR（基于物理的渲染）工作流中精准控制法线、粗糙度和金属度，并利用 HDR 环境贴图提升场景的真实感。

适用场景

  • 写实渲染：需要配置 PBR 材质套件（颜色、法线、粗糙度、金属度、AO 贴图）。
  • 环境构建：创建天空盒（Skybox）或使用 .hdr / .exr 文件实现全局光照。
  • 动态效果：使用 Canvas 纹理实时绘制文字，或使用视频纹理创建动态屏幕。
  • 性能优化：针对移动端优化纹理尺寸，或使用 KTX2 压缩纹理降低显存占用。

核心工作流

1. 纹理加载与色彩空间

根据纹理用途区分颜色空间：颜色贴图使用 SRGBColorSpace，而数据贴图（法线、粗糙度等）保持默认。

const loader = new THREE.TextureLoader();
const colorTexture = loader.load("color.jpg");
colorTexture.colorSpace = THREE.SRGBColorSpace; // 必须设置，否则颜色暗淡

2. 贴图重复与变换

通过 wrapS 和 wrapT 设置平铺模式，利用 repeat 和 offset 控制纹理密度。

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4); // 4x4 平铺

3. 环境贴图与 HDR

使用 RGBELoader 加载高动态范围图像，通过 PMREMGenerator 转化为环境映射。

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

new RGBELoader().load("env.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});

4. 内存回收

在移除对象时，必须手动调用 .dispose() 释放 GPU 显存，防止内存泄漏。

texture.dispose();
material.dispose();

下载和安装

下载 threejs-textures 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐