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

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

具体为啥我也不知道，总之就是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;
  });

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

默认线性效果

sRGB效果

全部代码

 

//1.一个物体可以设置多个材质嘛
 
//1.设置定点组
//2 多个
 
//导入 threejs
import * as THREE from "three";
//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
//导入lil.gui
// import * as dat from "dat.gui";  // 旧
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
 
//导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比 窗口的宽高进行设置的
  0.1, // 近平面   相机最近最近能看到的物体
  1000 // 远平面   相机最远能看到的物体
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小  (窗口大小)
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的dom元素添加到body中
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 为了看到z轴
camera.position.y = 2;
// 设置x轴
camera.position.x = 2;
//设置相机的焦点 (相机看向哪个点)
camera.lookAt(0, 0, 0);
 
//添加世界坐标辅助器  (红色x轴,绿色y轴,蓝色z轴)一个线段 参数为 线段长度
const axesHelper = new THREE.AxesHelper(5);
//添加到场景之中
scene.add(axesHelper);
 
// 添加轨道控制器 (修改侦听位置)  一般监听画布的事件  不监听document.body
const controls = new OrbitControls(camera, renderer.domElement);
// 这里传递阻塞掉了 会导致无法点击
// const controls = new OrbitControls(camera, document.body);
 
//渲染函数
function animate() {
  controls.update();
  //请求动画帧
  requestAnimationFrame(animate);
  //旋转网格体
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  //渲染
  renderer.render(scene, camera);
}
animate();
//渲染
 
// 监听窗口的变化 重新设置渲染器的大小 画布自适应窗口
window.addEventListener("resize", () => {
  // 重新设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 重新计算相机的投影矩阵
  camera.updateProjectionMatrix();
});
 
//创建gui实例
const gui = new GUI();
 
// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
 
//加载纹理
let texture = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_COL_VAR1_1K.png"
);
//设置颜色空间 (默认为线性)
texture.colorSpace = THREE.SRGBColorSpace;
// texture.colorSpace = THREE.LinearSRGBColorSpace;
 
//加载AO纹理   ao = 环境遮挡效果
let aoMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_AO_1K.jpg"
);
 
// 加载透明度贴图
let alphaMap = textureLoader.load("/public/texture/door/height.jpg");
 
//加载光照贴图
let lightMap = textureLoader.load("/public/texture/colors.png");
 
//加载高光贴图
let specularMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_GLOSS_1K.jpg"
);
 
// RGBELoader 实例化
let rgbLoader = new RGBELoader();
 
// 加载hdr贴图
rgbLoader.load(
  "/public/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr",
  (envMap) => {
    //设置球形映射
    envMap.mapping = THREE.EquirectangularReflectionMapping;
    //设置环境纹理
    scene.background = envMap;
    //设置环境贴图(场景)
    scene.environment = envMap;
    //设置plane 环境贴图
    planeMaterial.envMap = envMap;
  }
);
 
// 物料
let planeGeometry = new THREE.PlaneGeometry(1, 1);
// 材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //纹理贴图
  map: texture,
 
  //允许透明
  transparent: true,
  
  //高光贴图
  specularMap: specularMap,
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
 
gui.add(planeMaterial, "aoMapIntensity").min(0).max(1).name("ao贴图强度");
 
//动态的调整颜色空间
// gui.add(texture, "colorSpace", {
//   sRGB: THREE.SRGBColorSpace,
//   Linear: THREE.LinearSRGBColorSpace,
// });
//中途修改颜色空间的话 需要设置可以更新为true 不然会不显示效果
gui
  .add(texture, "colorSpace", {
    sRGB: THREE.SRGBColorSpace,
    Linear: THREE.LinearSRGBColorSpace,
  })
  .onChange(() => {
    texture.needsUpdate = true;
  });