解決threeJS加載obj gltf模型後顏色太暗的方法

Posted on by

網上找到的部分解決方法

其實通過查找後不難發現網上給出瞭很多解決方法，但是大部分都無法從根本上解決問題。我之前看到有一篇文章對gltf的解決方法是讓gltf增加自發光，相關的設置如下：

使用threeJS的過程中，剛開始總是會遇到些問題，就比如加載obj/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

以上就是解決threeJS加載obj gltf模型後顏色太暗的方法的詳細內容，更多關於threeJS加載obj gltf顏色太暗的資料請關註WalkonNet其它相關文章！

推薦閱讀：