聲明：本文涉及圖文和模型素材僅用于個(gè)人學(xué)習(xí)、研究和欣賞，請(qǐng)勿二次修改、非法傳播、轉(zhuǎn)載、出版、商用、及進(jìn)行其他獲利行為。

背景

《艾爾登法環(huán)》是最近比較火的一款游戲，觀察可以發(fā)現(xiàn)它的?Logo?是由幾個(gè)圓弧和線段構(gòu)成。本文使用?React + Three.js?技術(shù)棧，實(shí)現(xiàn)具有火焰效果艾爾登法環(huán)?Logo，本文中涉及到的知識(shí)點(diǎn)包括：Fire.js?基本使用方法及?Three.js?的其他基礎(chǔ)知識(shí)。

效果

實(shí)現(xiàn)效果如????banner?圖所示，頁(yè)面主體由?Logo?圖形構(gòu)成，Logo?具有由遠(yuǎn)及近的加載效果，加載完畢后具有上下緩動(dòng)動(dòng)畫(huà)效果。

手機(jī)端預(yù)覽效果：

在線預(yù)覽：

• ???地址1：https://3d-dragonir.vercel.app/#/ring

• ???地址2：https://dragonir.github.io/3d/#/ring

已適配:

• ???PC?端

• ???移動(dòng)端

  
  

實(shí)現(xiàn)

Logo?的火焰效果主要是通過(guò)?Fire.js?實(shí)現(xiàn)的， 開(kāi)始實(shí)現(xiàn)之前先來(lái)了解一下它的基本用法。

?? Fire.js

Threejs?提供了一個(gè)可以實(shí)現(xiàn)火焰和煙霧效果的擴(kuò)展包，通過(guò)引用并設(shè)置參數(shù)可以實(shí)現(xiàn)非常逼真的火焰和厭惡效果。【不過(guò)該擴(kuò)展包已經(jīng)從新版中移除】

火焰設(shè)置可選屬性：

• color1：內(nèi)焰顏色

• color2：外焰顏色

• color3：煙霧顏色

• colorBias：顏色偏差

• burnRate：燃燒率

• diffuse：擴(kuò)散

• viscosity：粘度

• expansion：膨脹

• swirl：旋轉(zhuǎn)

• drag：拖拽

• airSpeed：空氣速度

• windX：X?軸風(fēng)向

• windY：Y?軸風(fēng)向

• speed：火焰速度

• massConservation：質(zhì)量守恒

常用方法：

• 添加資源：addSource(u, v, radius, density, windX, windY)

• 清除資源：clearSources()

• 設(shè)置貼圖：setSourceMap(texture)

基本用法：

通過(guò)簡(jiǎn)單幾步：創(chuàng)建載體、使用Fire構(gòu)造函數(shù)初始化、添加火焰、添加到場(chǎng)景等簡(jiǎn)單幾步，就可實(shí)現(xiàn)火焰效果?？梢詣?chuàng)建多個(gè)火源，多種火焰效果也可以疊加到同一個(gè)載體上。

實(shí)現(xiàn)效果：

???在線親手嘗試調(diào)整火焰各種參數(shù)效果：threejs/examples/webgl_fire.html

資源引入

引入開(kāi)發(fā)所需的的模塊資源，注意?Three.js?和?Fire.js?是從當(dāng)前目錄引入的舊版本，新版本已刪除?Fire.js。TWEEN?用于實(shí)現(xiàn)簡(jiǎn)單的鏡頭補(bǔ)間動(dòng)畫(huà)、ringTexture?是需要顯示火焰效果輪廓的貼圖。

頁(yè)面?DOM?結(jié)構(gòu)非常簡(jiǎn)單，只包含一個(gè)渲染?WEBGL?的容器?#container。

場(chǎng)景初始化

初始化渲染場(chǎng)景、相機(jī)和光源。（如若需要詳細(xì)了解這部分知識(shí)可翻閱我往期的文章或閱讀官網(wǎng)文檔，本文不再贅述）

??設(shè)置渲染背景透明度

• alpha：canvas?是否開(kāi)啟透明度，默認(rèn)為?false。

• renderer.setClearAlpha(alpha : Float)：設(shè)置?alpha?透明度值，合法參數(shù)是一個(gè)?0.0?到?1.0?之間的浮點(diǎn)數(shù)。

以上代碼中，通過(guò)設(shè)置?new THREE.WebGLRenderer({ antialias: true, alpha: true })?和?renderer.setClearAlpha(0)?可以將?canvas?背景設(shè)置為透明，這樣就可以通過(guò)?CSS?設(shè)置背景樣式。本例中的背景圖片就是通過(guò)?CSS?設(shè)置的，而不是?Sence.background。

???當(dāng)開(kāi)啟?alpha: true?時(shí)，透明度默認(rèn)為?0，可以不用寫(xiě)?renderer.setClearAlpha(0)。

添加Logo主體

創(chuàng)建一個(gè)?PlaneBufferGeometry?平面作為火焰?Logo?載體，Logo?形狀通過(guò)調(diào)用?setSourceMap?使用貼圖生成，然后添加?Fire.js?的各種參數(shù)，調(diào)整平面的位置，最后將它添加到場(chǎng)景中即可。

???Logo?形狀也可直接使用圓環(huán)等幾何體拼接生成，本文為了簡(jiǎn)單省時(shí)并且更加逼真，直接使用了自己在?Photoshop?中繪制的貼圖。注意貼圖主體部分實(shí)際應(yīng)用中要使用白色，為了便于展示我改成了黑色。

頁(yè)面縮放適配

鏡頭補(bǔ)間動(dòng)畫(huà)

頁(yè)面剛開(kāi)始加載完成時(shí)由遠(yuǎn)及近的鏡頭補(bǔ)間動(dòng)畫(huà)。

頁(yè)面重繪動(dòng)畫(huà)

圖案上線往復(fù)運(yùn)動(dòng)的緩動(dòng)動(dòng)畫(huà)及渲染更新。

到這里，一個(gè)低配版的艾爾登法環(huán)?Logo?所有效果都全部實(shí)現(xiàn)了???，希望隨著自己圖形學(xué)方面知識(shí)的積累，后續(xù)可以通過(guò)?shader?實(shí)現(xiàn)更加炫酷的效果???。 完整代碼可通過(guò)下方鏈接查看。

???完整代碼：https://github.com/dragonir/3d/tree/master/src/containers/Ring

總結(jié)

本文知識(shí)點(diǎn)主要包含的的新知識(shí)：

• Fire.js?基本使用

• 設(shè)置渲染背景透明度

想了解場(chǎng)景初始化、光照、陰影、基礎(chǔ)幾何體、網(wǎng)格、材質(zhì)及其他Three.js的相關(guān)知識(shí)，可閱讀我往期文章。轉(zhuǎn)載請(qǐng)注明原文地址和作者。如果覺(jué)得文章對(duì)你有幫助，不要忘了一鍵三連哦 ??。

附錄

• [1].?Three.js 實(shí)現(xiàn)神奇的3D文字懸浮效果

• [2].?Three.js 實(shí)現(xiàn)讓二維圖片具有3D效果

• [3].?Three.js 實(shí)現(xiàn)2022冬奧主題3D趣味頁(yè)面，冰墩墩 ??

• [4].?Three.js 制作一個(gè)專(zhuān)屬3D獎(jiǎng)牌

• [5].?Three.js 實(shí)現(xiàn)虎年春節(jié)3D創(chuàng)意頁(yè)面

• [6].?Three.js 實(shí)現(xiàn)臉書(shū)元宇宙3D動(dòng)態(tài)Logo

• [7].?Three.js 實(shí)現(xiàn)3D全景偵探小游戲

• [8].?Three.js 實(shí)現(xiàn)炫酷的酸性風(fēng)格3D頁(yè)面