網(wǎng)上找到的部分解決方法

其實(shí)通過(guò)查找后不難發(fā)現(xiàn)網(wǎng)上給出了很多解決方法，但是大部分都無(wú)法從根本上解決問(wèn)題。我之前看到有一篇文章對(duì)gltf的解決方法是讓gltf增加自發(fā)光，相關(guān)的設(shè)置如下：

使用threeJS的過(guò)程中，剛開(kāi)始總是會(huì)遇到些問(wèn)題，就比如加載obj/gltf等帶材質(zhì)的模型時(shí)老是會(huì)出現(xiàn)顯示效果較暗的問(wèn)題。

object.traverse((child) => {
  if(child.isMesh) {
    child.material.emissiveMap = child.material.map;
  }
})

效果對(duì)比

在我也沒(méi)有找到解決的辦法下，我確實(shí)是使用了這種方法，正如我寫的vue-3d-loader組件中，前期的代碼中就是采用的這種方式，我們可以來(lái)看一下使用后的效果：

未使用以上代碼時(shí)的gltf效果如下圖：

windows11 中 3d viewer打開(kāi)后的效果如下：

這一對(duì)比，差距確實(shí)很大啊。

下面是增加child.material.emissiveMap = child.material.map;代碼后的效果：

這種方式，雖然光線看上去足夠了，但是確丟失了細(xì)節(jié)以及發(fā)光太嚴(yán)重后，導(dǎo)致圖像都失真了。經(jīng)過(guò)與官方的代碼的對(duì)比以及官方文檔的查看，當(dāng)然少不了github issue的查找，最終找到解決方法。

據(jù)官方文檔所說(shuō)WebGLRenderer部分，其中文檔提到：

• outputEncoding默認(rèn)值是LinearEncoding

根據(jù)官方提供的examples中代碼中也看到部分加載材質(zhì)后的模型都修改了這個(gè)值，如下：

因此我確定，解決辦法就是將LinearEncoding更換為sRGBEncoding即可。

修改代碼后，可以直接看到效果如下：

可以自己在增加一些燈光效果，也就可以達(dá)到windows的3d viewer效果了

總結(jié)

默認(rèn)情況下threeJS會(huì)使用線性編碼（LinearEncoding）的方式渲染材質(zhì)，因此會(huì)丟失真實(shí)顏色，需要改用RGB模式編碼（sRGBEncoding）進(jìn)行對(duì)材質(zhì)進(jìn)行渲染。

使用threeJS總是會(huì)遇到各種問(wèn)題，不過(guò)我的建議還是多看看官方的examples代碼，你會(huì)從中找到更多解決的方法的。如果你不是自己封裝threeJS，那可以使用我編寫好的vue-3d-loader，如果好用，記得給我start啊！記得給我start?。∪绻袉?wèn)題，歡迎提issue，我會(huì)及時(shí)解決bug

以上就是解決threeJS加載obj gltf模型后顏色太暗的方法的詳細(xì)內(nèi)容，更多關(guān)于threeJS加載obj gltf顏色太暗的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論