申明：本文波及图文和模型素材仅用于集体学习、钻研和观赏，请勿二次批改、非法流传、转载、出版、商用、及进行其余获利行为。
背景
《艾尔登法环》是最近比拟火的一款游戏，察看能够发现它的 Logo 是由几个圆弧和线段形成。本文应用 React + Three.js 技术栈，实现具备火焰成果艾尔登法环 Logo，本文中波及到的知识点包含：Fire.js 根本应用办法及 Three.js 的其余基础知识。
成果
实现成果如 👆 banner 图所示，页面主体由 Logo 图形形成，Logo 具备由远及近的加载成果，加载结束后具备高低缓动动画成果。
在线预览：
👀地址1：https://3d-dragonir.vercel.ap…👀地址2：https://dragonir.github.io/3d…
已适配:
💻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/3…
总结
本文知识点次要蕴含的的新常识：
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页面
发表回复