应用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的查找，最终找到解决办法。

  1. 据官网文档所说WebGLRenderer局部，其中文档提到：
  2. outputEncoding默认值是LinearEncoding

  3. 依据官网提供的examples中代码中也看到局部加载材质后的模型都批改了这个值，如下：

    因而我确定，解决办法就是将LinearEncoding更换为sRGBEncoding即可。
    批改代码后，能够间接看到成果如下：

    能够本人在减少一些灯光效果，也就能够达到windows的3d viewer成果了

    总结

    默认状况下threeJS会应用线性编码（LinearEncoding）的形式渲染材质，因而会失落实在色彩，须要改用RGB模式编码（sRGBEncoding）进行对材质进行渲染。
    应用threeJS总是会遇到各种问题，不过我的倡议还是多看看官网的examples代码，你会从中找到更多解决的办法的。如果你不是本人封装threeJS，那能够应用我编写好的vue-3d-loader，如果好用，记得给我start啊！记得给我start啊！如果有问题，欢送提issue，我会及时解决bug