解決threeJS加載obj?gltf模型后顏色太暗的方法
網(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í)是使用了這種方法，正如我寫(xiě)的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，那可以使用我編寫(xiě)好的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)文章！
相關(guān)文章
Vue3狀態(tài)管理之Pinia的入門(mén)使用教程
Pinia是Vue.js的輕量級(jí)狀態(tài)管理庫(kù),比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門(mén)使用教程,需要的朋友可以參考下2022-04-04
過(guò)濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒(méi)有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中，表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制，用于防止惡意攻擊和機(jī)器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06
用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法
今天小編就為大家分享一篇用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
本篇文章主要介紹了深入理解vue的狀態(tài)管理模式vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
今天通過(guò)本文給大家分享Vue.use是什么，主要包括vueEsign?插件的install是什么，element-ui的install是什么，為什么有的庫(kù)就不需要使用Vue.use，對(duì)vue.use()相關(guān)知識(shí)感興趣的朋友一起看看吧2022-06-06
vue-cli 3.0 自定義vue.config.js文件,多頁(yè)構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁(yè)構(gòu)建的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-05-05
實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過(guò)程實(shí)現(xiàn)
這篇文章主要介紹了實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過(guò)程實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12