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

news2024/11/26 2:39:57

上文 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;
})