SuperAPI AI 工具集

r3f-textures

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:在 React Three Fiber 中正确配置纹理,解决纹理外观异常与显存占用问题。使用前先检查已安装的 Three.js、Fiber、Drei 与渲染器版本;示例面向 Fiber 9 / React 19、Three.js r185 与 WebGL。已正确配置的资源应保留,不要全部重置。

色彩与数据:基础色或自发光贴图用 SRGBColorSpace;粗糙度、金属度、法线、AO、遮罩等标量/矢量数据用 NoColorSpace,它不等于 LinearSRGBColorSpace;线性 HDR/EXR 光照数据保留加载器提供的线性元数据。不要把所有贴图统一转成 sRGB。

加载与缓存:可在 Canvas 内 Suspense 下用 Drei 的 useTexture 加载颜色贴图并设置 colorSpace 与 needsUpdate。useTexture/useLoader 按加载器与 URL 缓存,同一来源可能返回同一 Texture 对象,repeat、offset、wrapping、filter、colorSpace 改动会影响所有使用者;需按实例配置时先克隆 Texture,复用底层图像,只释放自己拥有的克隆,不要释放缓存源,也不要在渲染中清空加载器缓存。避免每帧替换 uniform/纹理对象;按需渲染循环中命令式修改后要 invalidate。

UV 与采样:texture.channel 选择 uv/uv1/uv2/uv3,需匹配几何体实际属性。超出 [0,1] 的重复需 RepeatWrapping 或 MirroredRepeatWrapping。wrapping、色彩空间与上传配置变更可能需要 needsUpdate,offset/repeat 走纹理矩阵通常不需重新上传。像素风可有意使用最近邻过滤;缩小表面用 mipmap 减少闪烁,各向异性上限取渲染器支持值与场景需要。2 的幂尺寸并非 WebGL2 通用要求,应按屏幕覆盖、内存、压缩格式与质量决定。下载体积不等于显存体积,可考虑 KTX2/Basis 并配置能力检测与解码资源。替换 glTF 颜色贴图要匹配 UV/朝向,手动加载通常需 flipY=false,已配置的 glTF 贴图不要再次翻转。

专用纹理:视频优先用 useVideoTexture,注意自动播放/静音、CORS、用户手势与资源清理,分辨率变化可能需新纹理,不能保证所有浏览器自动播放成功。Canvas/DataTexture 内容变化需 needsUpdate,数据纹理保持数据色彩空间语义,帧循环中创建纹理会泄漏资源。渲染目标用于离屏渲染,切勿在渲染进同一目标时采样它。环境贴图应走 Environment/useEnvironment 光照路径,不要直接赋普通 2D 图像。

验证:测试已知色块、变化光照下的数据贴图、纹理朝向、重复挂载,以及两个使用不同 UV 变换的使用者;检查 GPU 纹理数量,它只是计数而非精确字节内存。