如果没有特殊需要,一般为了正常渲染,避免颜色偏差,threejs 代码中需要颜色贴图.encoding 和渲染器.outputEncoding 属性值保持一致

纹理对象 Texture 颜色空间编码属性.encoding

纹理对象 Texture 颜色空间 (opens new window)编码属性.encoding 有多个属性值,默认值是线性颜色空间 THREE.LinearEncoding

• THREE.LinearEncoding：线性颜色空间
• THREE.sRGBEncoding：sRGB 颜色空间

浏览器控制台查看 Texture.encoding 属性值

const texture = new THREE.TextureLoader().load('./earth.jpg');
texture.encoding = THREE.LinearEncoding; //默认值
// THREE.LinearEncoding变量在threejs内部表示数字3000
console.log('texture.encoding', texture.encoding);
// 修改为THREE.sRGBEncoding，
texture.encoding = THREE.sRGBEncoding;
// THREE.sRGBEncoding变量在threejs内部表示数字3001
console.log('texture.encoding', texture.encoding);

THREE.LinearEncoding、THREE.sRGBEncoding 其实在 theeejs 内部都表示一个数字,具体可以查看 src 目录下 constants.js 的源码文件

// constants.js源码部分截取
export const LinearEncoding = 3000;
export const sRGBEncoding = 3001;

gltfmap.encoding 值

threejs 加载 gltf 模型,颜色贴图 map 属性.encoding 的默认值是 sRGB 颜色空间 THREE.sRGBEncoding

// 查看gltf所有颜色贴图的.encoding值
gltf.scene.traverse(function (obj) {
  if (obj.isMesh) {
    if (obj.material.map) {
      // 判断是否存在贴图
      console.log('.encoding', obj.material.map.encoding);
    }
  }
});
// .encoding显示3001,说明是THREE.sRGBEncoding
console.log('.encoding', mesh.material.map.encoding);

WebGL 渲染器.outputEncoding

.outputEncoding 的默认值是线性空间 THREE.LinearEncoding,和纹理对象.encoding 默认值一样,如果颜色贴图.encoding 的值是 THREE.sRGBEncoding,为了避免颜色偏差,.outputEncoding 的值也需要设置为 THREE.sRGBEncoding

//解决加载gltf格式模型颜色偏差问题
renderer.outputEncoding = THREE.sRGBEncoding;

注意！最新版本属性名字有改变,渲染器属性名.outputEncoding 已经变更为.outputColorSpace

单独加载的颜色贴图设置.encoding = THREE.sRGBEncoding

如果 webgl 渲染器设置了 renderer.outputEncoding = THREE.sRGBEncoding;,你单独加载图像返回的纹理对象需要设置 texture.encoding = THREE.sRGBEncoding;

//解决加载gltf格式模型颜色偏差问题
renderer.outputEncoding = THREE.sRGBEncoding;
const texture = new THREE.TextureLoader().load('./earth.jpg');
// 和webgl渲染器renderer.outputEncoding一致
texture.encoding = THREE.sRGBEncoding;

注意！最新版本,纹理对象属性名.encoding 已经变更为.colorSpace

texture.colorSpace = THREE.SRGBColorSpace; //设置为SRGB颜色空间