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

更新時間：2022年07月22日 10:47:30 作者：深夜徘徊

這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

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

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

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;代碼后的效果：

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

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

outputEncoding默認(rèn)值是LinearEncoding

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

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

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

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

總結(jié)

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

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

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

您可能感興趣的文章: