WEB 3D技术 three.js 色彩空间讲解

上文 WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图 我们讲了基础材质的各种纹理
但是 我们的图片

到了界面场景中 好像绿的程度有点不太一样了

这里的话 涉及到我们的色彩空间

他有两种 一种是线性的 一种是 sRGB类型的

线性呢 就是根据光照强度 去均匀分布的一种效果 sRGB 则是根据人眼的一个观察来调整颜色的
我们可以编写代码如下

let map = textureLoader.load("./public/logo.png");
map.colorSpace = THREE.SRGBColorSpace;
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    transparent: true,
    map: map,
    //specularMap: specularMap
    //lightMap: textureLoader.load("./public/background.jpg")
})

我们设置 map 图片对象 colorSpace 字段 SRGBColorSpace 就是设为 sRGB模式
这样 我们图片明显和人眼的一个效果更接近了

map.colorSpace = THREE.LinearSRGBColorSpace;

即可设置为线性类型
明显就会更白一些

一般来讲 暗度 线性是百分之十八左右 sRGB是百分之 五十左右 srgb会更接近你原图的颜色
我到觉得可以看期刊 有些时候 线性看着更真实 还是看情况选择
默认是线性的效果 具体可以看情况调整

这里 我还需要将一个对象 我们引入一下 GUI

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

然后 编写代码如下

let map = textureLoader.load("./public/logo.png");
map.colorSpace = THREE.LinearSRGBColorSpace;
const Igui = new GUI();
Igui.add(map,"colorSpace",{
        SRG8: THREE.SRGBColorSpace,
        Linear: THREE.LinearSRGBColorSpace,
    }
).onChange(() => {

})

我们先引入图片 然后设置图片对象的 colorSpace 线性色彩 然后用GUI创建操作对象
操作map对象的 colorSpace字段 选择项分别是我们的 线性和sRGB模式

但是 我们实际操作 会发现 我们来回切换 图片色彩并没有变化
GUI部分代码改一下

const Igui = new GUI();
Igui.add(map,"colorSpace",{
        SRG8: THREE.SRGBColorSpace,
        Linear: THREE.LinearSRGBColorSpace,
    }
).onChange(() => {
    map.needsUpdate = true;
})

简单说 修改前将图片对象的needsUpdate设置为true 告诉它纹理需要更新、

现在 我们再切换它

效果就非常明显了