应用 threeJS 的过程中，刚开始总是会遇到些问题，就比方加载 obj/gltf 等带材质的模型时老是会呈现显示成果较暗的问题。
网上找到的局部解决办法
其实通过查找后不难发现网上给出了很多解决办法，然而大部分都无奈从根本上解决问题。我之前看到有一篇文章对 gltf 的解决办法是让 gltf 减少自发光，相干的设置如下：
object.traverse((child) => {if(child.isMesh) {child.material.emissiveMap = child.material.map;}
})成果比照
在我也没有找到解决的方法下，我的确是应用了这种办法，正如我写的 vue-3d-loader 组件中，后期的代码中就是采纳的这种形式，咱们能够来看一下应用后的成果：
未应用以上代码时的 gltf 成果如下图：
windows11 中 3d viewer 关上后的成果如下：
这一比照，差距的确很大啊。
上面是减少 child.material.emissiveMap = child.material.map; 代码后的成果：
这种形式，尽管光线看上去足够了，然而确失落了细节以及发光太重大后，导致图像都失真了。
通过与官网的代码的比照以及官网文档的查看，当然少不了 github issue 的查找，最终找到解决办法。
- 据官网文档所说 WebGLRenderer 局部，其中文档提到：
- outputEncoding 默认值是 LinearEncoding
-
依据官网提供的 examples 中代码中也看到局部加载材质后的模型都批改了这个值，如下：
因而我确定，解决办法就是将 LinearEncoding 更换为 sRGBEncoding 即可。
批改代码后，能够间接看到成果如下：能够本人在减少一些灯光效果，也就能够达到 windows 的 3d viewer 成果了
总结
默认状况下 threeJS 会应用 线性编码（LinearEncoding）的形式渲染材质，因而会失落实在色彩，须要改用 RGB 模式编码（sRGBEncoding） 进行对材质进行渲染。
应用 threeJS 总是会遇到各种问题，不过我的倡议还是多看看官网的 examples 代码，你会从中找到更多解决的办法的。如果你不是本人封装 threeJS，那能够应用我编写好的 vue-3d-loader，如果好用，记得给我 start 啊！记得给我 start 啊！如果有问题，欢送提 issue，我会及时解决 bug