如何用Three.js React制作火焰效果的艾尔登法环长尾？

本文共计1950个文字，预计阅读时间需要8分钟。

目录 + 背景 + 效果 + 实现 + Fire.js + 资源引入 + 场景初始化 + 添加Logo主体 + 页面缩放适配 + 镜头过渡动画 + 页面重绘动画 + 总结 + 背景 + 《阿尔登法环》是近期比较火的一款游戏，玩家可以观察到它的Logo。

目录

• 背景
• 效果
• 实现
• Fire.js
• 资源引入
• 场景初始化
• 添加Logo主体
• 页面缩放适配
• 镜头补间动画
• 页面重绘动画
• 总结

背景

《艾尔登法环》是最近比较火的一款游戏，观察可以发现它的Logo是由几个圆弧和线段构成。本文使用React + Three.js技术栈，实现具有火焰效果艾尔登法环Logo，本文中涉及到的知识点包括：Fire.js基本使用方法及Three.js的其他基础知识。

效果

实现效果如banner图所示，页面主体由Logo图形构成，Logo具有由远及近的加载效果，加载完毕后具有上下缓动动画效果。

在线预览：

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

地址2：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实现更加炫酷的效果。 完整代码可通过下方链接查看。

完整代码：github.com/dragonir/3d/tree/master/src/containers/Ring

总结

本文知识点主要包含的的新知识：

• Fire.js基本使用
• 设置渲染背景透明度

以上就是Three.js+React实现带火焰效果的艾尔登法环的详细内容，更多关于Three.js React艾尔登法环的资料请关注自由互联其它相关文章！