宣告：本文涉及圖文和模型素材僅用于個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為，
背景
《艾爾登法環》是最近比較火的一款游戲，觀察可以發現它的 Logo 是由幾個圓弧和線段構成，本文使用 React + Three.js 技術堆疊，實作具有火焰效果艾爾登法環 Logo，本文中涉及到的知識點包括：Fire.js 基本使用方法及 Three.js 的其他基礎知識，
效果
實作效果如 ?? banner 圖所示，頁面主體由 Logo 圖形構成，Logo 具有由遠及近的加載效果，加載完畢后具有上下緩動影片效果，
在線預覽：
??地址1：https://3d-dragonir.vercel.app/#/ring??地址2：https://dragonir.github.io/3d/#/ring
已適配:
??PC端??移動端
實作
Logo 的火焰效果主要是通過 Fire.js 實作的， 開始實作之前先來了解一下它的基本用法，
?? Fire.js
Threejs 提供了一個可以實作火焰和煙霧效果的擴展包，通過參考并設定引數可以實作非常逼真的火焰和厭惡效果，【不過該擴展包已經從新版中移除】
火焰設定可選屬性：
color1：內焰顏色color2：外焰顏色color3：煙霧顏色colorBias：顏色偏差burnRate：燃燒率diffuse：擴散viscosity：粘度expansion：膨脹swirl：旋轉drag：拖拽airSpeed：空氣速度windX：X軸風向windY：Y軸風向speed：火焰速度massConservation：質量守恒
常用方法：
- 添加資源：
addSource(u, v, radius, density, windX, windY) - 清除資源：
clearSources() - 設定貼圖：
setSourceMap(texture)
基本用法：
通過簡單幾步：創建載體、使用Fire建構式初始化、添加火焰、添加到場景等簡單幾步，就可實作火焰效果，可以創建多個火源，多種火焰效果也可以疊加到同一個載體上，
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);
實作效果：
??在線親手嘗試調整火焰各種引數效果：threejs/examples/webgl_fire.html
資源引入
引入開發所需的的模塊資源，注意 Three.js 和 Fire.js 是從當前目錄引入的舊版本，新版本已洗掉 Fire.js，TWEEN 用于實作簡單的鏡頭補間影片、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 結構非常簡單，只包含一個渲染 WEBGL 的容器 #container，
<div className='ring_page' id="container"></div>
場景初始化
初始化渲染場景、相機和光源，（如若需要詳細了解這部分知識可翻閱我往期的文章或閱讀官網檔案，本文不再贅述）
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);
?? 設定渲染背景透明度
alpha：canvas是否開啟透明度，默認為false，renderer.setClearAlpha(alpha : Float)：設定alpha透明度值，合法引數是一個0.0到1.0之間的浮點數，
以上代碼中，通過設定 new THREE.WebGLRenderer({ antialias: true, alpha: true }) 和 renderer.setClearAlpha(0) 可以將 canvas 背景設定為透明，這樣就可以通過 CSS 設定背景樣式，本例中的背景圖片就是通過 CSS 設定的，而不是 Sence.background，
??當開啟alpha: true時，透明度默認為0，可以不用寫renderer.setClearAlpha(0)，
添加Logo主體
創建一個 PlaneBufferGeometry 平面作為火焰 Logo 載體，Logo 形狀通過呼叫 setSourceMap 使用貼圖生成，然后添加 Fire.js 的各種引數，調整平面的位置，最后將它添加到場景中即可，
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形狀也可直接使用圓環等幾何體拼接生成，本文為了簡單省時并且更加逼真，直接使用了自己在Photoshop中繪制的貼圖，注意貼圖主體部分實際應用中要使用白色，為了便于展示我改成了黑色，
頁面縮放適配
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;
});
頁面重繪影片
圖案上線往復運動的緩動影片及渲染更新，
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)));
}
到這里，一個低配版的艾爾登法環 Logo 所有效果都全部實作了 ??，希望隨著自己圖形學方面知識的積累，后續可以通過 shader 實作更加炫酷的效果 ??， 完整代碼可通過下方鏈接查看，
??完整代碼：https://github.com/dragonir/3d/tree/master/src/containers/Ring
總結
本文知識點主要包含的的新知識：
Fire.js基本使用- 設定渲染背景透明度
想了解場景初始化、光照、陰影、基礎幾何體、網格、材質及其他Three.js的相關知識，可閱讀我往期文章，轉載請注明原文地址和作者，如果覺得文章對你有幫助，不要忘了一鍵三連哦 ??，
附錄
- [1]. Three.js 實作神奇的3D文字懸浮效果
- [2]. Three.js 實作讓二維圖片具有3D效果
- [3]. Three.js 實作2022冬奧主題3D趣味頁面，冰墩墩 ??
- [4]. Three.js 制作一個專屬3D獎牌
- [5]. Three.js 實作虎年春節3D創意頁面
- [6]. Three.js 實作臉書元宇宙3D動態Logo
- [7]. Three.js 實作3D全景偵探小游戲
- [8]. Three.js 實作炫酷的酸性風格3D頁面
本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/16037812.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/447125.html
標籤：其他