如果没有特殊需要,一般为了正常渲染,避免颜色偏差,threejs代码中需要颜色贴图.encoding
和渲染器.outputEncoding
属性值保持一致。
纹理对象Texture
颜色空间编码属性.encoding
纹理对象Texture颜色空间 (opens new window)编码属性.encoding
有多个属性值,默认值是线性颜色空间THREE.LinearEncoding
。
- THREE.LinearEncoding:线性颜色空间
- THREE.sRGBEncoding:sRGB (opens new window)颜色空间
浏览器控制台查看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
,具体参考6.3小节最后说明。
单独加载的颜色贴图设置.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颜色空间