Threejs_08 纹理颜色的调整(颜色空间的设置)

最新推荐文章于 2024-10-10 20:37:26 发布

原创

最新推荐文章于 2024-10-10 20:37:26 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #材质

文章讲述了在Three.js中，由于人眼对光照强度感知非线性，使用sRGB颜色空间能更适应视觉，如何通过设置纹理的colorSpace属性以及使用GUI工具调整颜色空间以改善贴图显示效果。

为什么写入的贴图颜色跟实际的颜色有差别呢？

具体为啥我也不知道，总之就是threejs有两个颜色空间一个是线性的一个是rgb那种样式的，但是人眼对光照强度的感知并不是线性的，所以threejs的默认属性，到人眼中，看上去就是会有差异，所以我们要用颜色空间设置为sRGB，更能适应人眼的感光，所以看上去跟实际也就很相似了。

颜色空间的设置

//加载纹理
let texture = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_COL_VAR1_1K.png"
);
//设置颜色空间 (默认为线性)
texture.colorSpace = THREE.SRGBColorSpace;
// texture.colorSpace = THREE.LinearSRGBColorSpace;

这个代码就能设置纹理的颜色空间为sRGB类型的，并且我们可以加入一个gui调试工具来进行对比开发，但是要注意的是，如果在运行时改变颜色空间的话，需要将纹理允许中途改变颜色空间的开关设置为true。

//中途修改颜色空间的话 需要设置可以更新为true 不然会不显示效果
gui
  .add(texture, "colorSpace", {
    sRGB: THREE.SRGBColorSpace,
    Linear: THREE.LinearSRGBColorSpace,
  })
  .onChange(() => {
    texture.needsUpdate = true;
  });

这样就可以看我们的效果了

默认线性效果