青海省高等级公路建设管局网站,个人网站可以做自媒体吗,一个网站制作流程,wordpress添加文件上文 WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图 我们讲了基础材质的各种纹理 但是 我们的图片 到了界面场景中 好像绿的程度有点不太一样了 这里的话 涉及到我们的色彩空间
他有两种 一种是线性的 一种是 sRGB类型的 线性呢 就是根据光照强度 去均匀分…上文 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 告诉它纹理需要更新、
现在 我们再切换它 效果就非常明显了
