three.js导入 glb模型颜色变暗_outputencoding和outputcolorspace区别three.js

渲染器加

renderer.outputEncoding = THREE.sRGBEncoding;
1

纹理加

/**
 * Textures
 */
const bakedTexture = textureLoader.load('baked.jpg')
bakedTexture.flipY = false
bakedTexture.encoding = THREE.sRGBEncoding

1
2
3
4
5
6
7

另外 因为使用了 sRGBEncoding 格式输出 虽然 glb/ gltf 模型 亮了 但是其他材料，纹理 的颜色也发生了变化 不是素材本身的颜色了 如果需要使用素材本身的颜色 可以指定 解析模式 例
texture.encoding = sRGBEncoding;

从 r151开始将encoding 重新命名成了colorSpace
需要： texture.colorSpace = THREE.SRGBColorSpace;

const textureRepeat = (texture: Texture) => {
     texture.encoding = sRGBEncoding;
};
textureLoader.load("/textures/rock/rock_pitted_mossy_diff_1k.jpg", textureRepeat),
1
2
3
4

统一解析模式让纹理恢复正确的颜色 默认是 LinearEncoding格式色彩输出 我理解是因为renderer的解析模式和纹理的解析模式不同导致的 使用相同模式 颜色即恢复正常
另外如果使用了金属度变黑是因为物理材质需要env贴图活着全局env可以参考这篇博客