Three.js+React实现带火焰效果的艾尔登法环

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

背景

《艾尔登法环》是最近比较火的一款游戏,观察可以发现它的 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:空气速度
  • windXX 轴风向
  • windYY 轴风向
  • 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.jsTWEEN 用于实现简单的镜头补间动画、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);

设置渲染背景透明度

  • alphacanvas 是否开启透明度,默认为 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+React实现带火焰效果的艾尔登法环的详细内容,更多关于Three.js React艾尔登法环的资料请关注我们其它相关文章!

(0)

相关推荐

  • Three.js+React实现3D文字悬浮效果

    目录 背景 效果 实现 资源引入 DOM结构 设置状态 网格背景 场景初始化 创建材质 创建文字模型 创建几何体模型 鼠标事件监听 背景色切换 后期渲染 动画 缩放适配 双击全屏 总结 背景 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontL

  • 基于Three.js制作一个3D中国地图

    目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

  • Three.js实现脸书元宇宙3D动态Logo效果

    目录 背景 什么是元宇宙 实现效果 试炼一:THREE.TorusGeometry 试炼二:THREE.TorusKnotGeometry 试炼三:THREE.TubeGeometry 试炼四:Blender + Three.js 用Blender建模 加载Logo模型 添加材质 展示加载进度 点击更换材质 加载人物模型 总结 参考资料 本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo,内容包括基础模型圆环.环面扭结.管道及模型生成

  • 使用Three.js制作一个3D奖牌页面

    目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球

  • Three.js+React使二维图片呈现3D效果

    目录 背景 效果 实现 素材制作 资源引入 场景初始化 创建漫画主体 创建Boom背景 镜头控制.缩放适配.动画 总结 背景 逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子,于是仿照他们的例子,使用 Three.js + React 技术栈,将二维漫画图片转化为三维视觉效果.本文包含的内容主要包括:THREE.Group 层级模型.MeshPhongMaterial 高光网格材质.正弦余弦函数 创建模型移动轨迹等. 效果 实现效果如下图所示:页面主要有背景图.漫画图片

  • Three.js+React实现带火焰效果的艾尔登法环

    目录 背景 效果 实现 Fire.js 资源引入 场景初始化 添加Logo主体 页面缩放适配 镜头补间动画 页面重绘动画 总结 背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Logo 是由几个圆弧和线段构成.本文使用 React + Three.js 技术栈,实现具有火焰效果艾尔登法环 Logo,本文中涉及到的知识点包括:Fire.js 基本使用方法及 Three.js 的其他基础知识. 效果 实现效果如banner 图所示,页面主体由 Logo 图形构成,Logo 具有由远及

  • D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    上篇文章给大家介绍了圆柱图:https://www.jb51.net/article/160958.htm 散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点.由此可以猜到,需要的元素包括circle(圆)和axis(坐标轴).需要进行可视化的数据有: //圆心数据 var center = [ [0.5,0.5],[0.7,0.8],[0.4,0.9], [0.11,0.32],[0.88,0.25],[0.75,0

  • D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,

  • Three.js+React实现3D冰墩墩2022冬奥会主题

    目录 背景 效果 实现 引入资源 页面DOM结构 场景初始化 添加光源 加载进度管理 创建地面 创建冬奥吉祥物冰墩墩 创建奥运五环 TorusGeometry 圆环面 MeshLambertMaterial 非光泽表面材质 创建旗帜 创建树木 MeshDepthMaterial 深度网格材质 custromMaterial 自定义材质 创建雪花 Points 粒子 PointsMaterial 点材质 材质属性 .blending 材质属性 .sizeAttenuation Three.js 向

  • Three.js+React制作3D梦中海岛效果

    目录 背景 效果 实现 素材准备 资源引入 页面结构 场景初始化 海 天空 虹 岛 鸟 交互点 动画 总结 背景 深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落……本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及 Three.

  • Ext JS 4实现带week(星期)的日期选择控件(实战二)

    前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇. Javascript 有提供Date 对象用于处理时间.但是Date 并没有提供获取星期的方法. 要在web 端通过js 方式获取某个时间是这一年的第几个星期,可以根据一些算法去实现. 当然, jquery 的扩展组件 等有直接提供这样的一些现成包. 像Ext js 就有提供获取星期的方法 Ext.Date.getWeekOfYear(d

  • 使用JS组件实现带ToolTip验证框的实例代码

    本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va

  • js循环动态绑定带参数函数遇到的问题及解决方案[转]

    众所周知,不带参数的绑定非常简单,只要使用(语法:"document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);")(示例:"document.getElementById("select_0").attachEvent("onchange",modifyFunction);")即可.(注:以下只写示例) 带参数的绑

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • JS+CSS实现带小三角指引的滑动门效果

    本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

随机推荐