threejs gltf模型加载后颜色出现偏差 学习笔记

threejs yekong

问题

gltf模型加载后和建模师做出来的效果差别很大

解决办法

根据threejs里提供的关于GLTFLoader文档来看,需要对纹理进行配置

纹理中包含的颜色信息(.map, .emissiveMap, 和 .specularMap)在glTF中总是使用sRGB颜色空间,而顶点颜色和材质属性(.color, .emissive, .specular) 则使用线性颜色空间。在典型的渲染工作流程中,纹理会被渲染器转换为线性颜色空间,进行光照计算,然后最终输出会被转换回 sRGB 颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理,否则请在使用glTF的时候将WebGLRenderer进行如下配置

renderer.outputEncoding = THREE.sRGBEncoding;
//解决加载gltf格式模型纹理贴图和原图不一样问题

加载效果

加载效果

修复后的效果

修复后的效果

教程地址

WebGL/Three.js前端3D可视化

喜欢