关于前端:threeJS加载objgltf模型后颜色太暗的解决方法

27次阅读

共计 984 个字符,预计需要花费 3 分钟才能阅读完成。

应用 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

正文完
 0