Three.js 火焰效果实现艾尔登法环动态logo 🔥
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
背景
《艾尔登法环》是最近比较火的一款游戏,观察可以发现它的 Logo
是由几个圆弧和线段构成。本文使用 React + Three.js
技术栈,实现具有火焰效果艾尔登法环 Logo
,本文中涉及到的知识点包括:Fire.js
基本使用方法及 Three.js
的其他基础知识。
效果
实现效果如
banner
图所示,页面主体由 Logo
图形构成,Logo
具有由远及近的加载效果,加载完毕后具有上下缓动动画效果。
在线预览:
已适配:
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
Three.js 火焰效果实现艾尔登法环动态logo 🔥的更多相关文章
- C# “贝格尔”编排法
采用“贝格尔”编排法,编排时如果参赛队为双数时,把参赛队数分一半(参赛队为单数时,最后以“0”表示形成双数),前一半由1号开始,自上而下写在左边:后一半的数自下而上写在右边,然后用横线把相对的号数连接 ...
- POJ:3292-Semi-prime H-numbers(艾氏筛选法拓展)
Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10466 Accepted: 4665 ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- Three.js实现脸书元宇宙3D动态Logo
背景 Facebook 近期将其母公司改名为 Meta,宣布正式开始进军 元宇宙 领域.本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo ...
- JS产生徐特尔图表
徐特尔图表是一个小游戏,在5*5的格子上,无序的写着1~25这25个数子,然后再找出来.其实在JS中也就是将25个数进行随机产生然后放到一个表格中.主要分为两部分,一是随机数的产生,还有一部分就是表格 ...
- poj1151 Atlantis && cdoj 1600艾尔大停电 矩形面积并
题目: Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 23758 Accepted: 8834 Des ...
- poj 3292 H-素数问题 扩展艾氏筛选法
题意:形似4n+1的被称作H-素数,两个H-素数相乘得到H-合成数.求h范围内的H-合成数个数 思路: h-素数 ...
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 【struts2】中method={1}详解
我们在使用struts2的时候,有时候为了简化struts2的配置项而采用通配符的方式,如下代码: <action name="ajaxregister!*" class=& ...
- zabbix 监控系统概述及部署
zabbix 监控系统概述及部署 1.Zabbix是什么: zabbix是一个个基于web界而的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系 ...
- Spark算子 - aggregate
释义 将每个partition内元素进行聚合,然后将每个partition的聚合结果进行combine,得到最终聚合结果.最终结果允许跟原始RDD类型不同 方法签名如下: def aggregate[ ...
- PHP面试常考内容之Memcache和Redis(1)
你好,是我琉忆.继上周(2019.2-11至2-15)发布的"PHP面试常考内容之面向对象"专题后,发布的第二个专题,感谢你的阅读.本周(2019.2-18至2-22)的文章内容点 ...
- 面向对象—继承(Day19)
初识继承 继承是一种创建新类的方式,在python中新类可以继承一个或多个父类,父类又可称为基类或超类,新建的类为派生类或子类.(类与类之间的关系是什么是什么的关系.) 继承语法: class Par ...
- SonarQube之采购选型参考
SonarQube是DevOps实践中主流的一款质量内建工具,过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具,比如pmd-cpd.checkstyle.findbugs ...
- Https原理与演变
巨人的肩膀 为了一个HTTPS,浏览器操碎了心··· (qq.com)
- Java超全大纲.jpg
Java超全大纲.jpg
- 有了这个BI工具,财务分析再也不用愁
财务软件的发展已基本上将财会工作者从登记凭证.记账.编制会计报表等繁重和重复性的工作中解放出来.但是,当前大多数管理软件或财务软件的财务分析功能还停留在会计信息或财务指标的数据处理.图表展现层面,支持 ...
- 2021年企业bi工具推荐
数据时代,商业智能工具对于企业了解复杂的大数据非常重要. 我们研究整理了国内外几十个商业智能BI工具,主要就其在功能.性能.价格.体验.安全等方面进行评测,希望帮助企业更好的进行BI产品选型. 一.t ...