Three.js+React實現(xiàn)帶火焰效果的艾爾登法環(huán)

更新時間：2022年03月22日 14:30:13 作者：Dragonir

《艾爾登法環(huán)》是最近比較火的一款游戲，觀察可以發(fā)現(xiàn)它的?Logo?是由幾個圓弧和線段構(gòu)成。本文使用?React?+?Three.js?技術(shù)棧，實現(xiàn)具有火焰效果艾爾登法環(huán)?Logo，感興趣的可以了解一下

背景

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

效果

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

在線預(yù)覽：

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

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

已適配:

PC 端
移動端

實現(xiàn)

Logo 的火焰效果主要是通過 Fire.js 實現(xiàn)的，開始實現(xiàn)之前先來了解一下它的基本用法。

Fire.js

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

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

color1：內(nèi)焰顏色
color2：外焰顏色
color3：煙霧顏色
colorBias：顏色偏差
burnRate：燃燒率
diffuse：擴散
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)

基本用法：

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

const geometry = new THREE.PlaneBufferGeometry(10, 10);
const fire = new THREE.Fire(geometry,{
  textureWidth: 10,
  textureHeight: 10,
  debug:false
});
fire.addSource(0.5, 0.1, 0.1, 1.0, 0.0, 1.0);
scene.add(fire);

實現(xiàn)效果：

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

資源引入

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

import React from 'react';
import * as THREE from './libs/three.module.js';
import { Fire } from './libs/Fire.js';
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
import ringTexture from './images/ring.png';

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

<div className='ring_page' id="container"></div>

場景初始化

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

const container = document.getElementById('container');
const renderer = new THREE.WebGLRenderer({ antialias: true,  alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
renderer.setClearAlpha(0);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

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

alpha：canvas 是否開啟透明度，默認為 false。
renderer.setClearAlpha(alpha : Float)：設(shè)置 alpha 透明度值，合法參數(shù)是一個 0.0 到 1.0 之間的浮點數(shù)。

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

當(dāng)開啟 alpha: true 時，透明度默認為 0，可以不用寫 renderer.setClearAlpha(0)。

添加Logo主體

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

const ring = new Fire(new THREE.PlaneBufferGeometry(20, 25), {
  textureWidth: 800,
  textureHeight: 1000,
  debug: false,
});
ring.setSourceMap(new THREE.TextureLoader().load(ringTexture));
ring.color1 = new THREE.Color(0xffffff);
ring.color2 = new THREE.Color(0xf59e00);
ring.color3 = new THREE.Color(0x08120a);
ring.colorBias = .6;
ring.burnRate = 10;
ring.diffuse = 1;
ring.viscosity = .5;
ring.expansion = -1.6;
ring.swirl = 10;
ring.drag = 0.4;
ring.airSpeed = 18;
ring.windX = 0.1;
ring.windY = 0.2;
ring.speed = 100;
ring.massConservation = false;
ring.position.y = 4;
ring.position.z = -6;
scene.add(ring)

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

頁面縮放適配

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}, false);

鏡頭補間動畫

頁面剛開始加載完成時由遠及近的鏡頭補間動畫。

const controls = new OrbitControls(camera, renderer.domElement);
Animations.animateCamera(camera, controls, { x: 0, y: 0, z: 22 }, { x: 0, y: 0, z: 0 }, 2400, () => {
  controls.enabled = false;
});

頁面重繪動畫

圖案上線往復(fù)運動的緩動動畫及渲染更新。

let step = 0;
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  stats && stats.update();
  TWEEN && TWEEN.update();
  step += .03;
  ring && (ring.position.y = Math.abs(2.2 + Math.sin(step)));
}

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