使用 Three.js 实现火焰效果

于 2025-02-07 20:14:26 发布
阅读量951 收藏 21
点赞数 37
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34820371/article/details/145501805
版权

大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、ThreeJs、WebGL、Go
经验经验：6 年+ 前端开发经验，专注于图形渲染和 AI 技术
演示地址：演示地址
开源项目：智简未来、晓智元宇宙、数字孪生引擎 、源码地址

演示地址:https://shader.shuqin.cc/mdX3zr
源码地址:https://github.com/dezhizhang/shadertoy

引言

在现代 Web 开发中，使用 WebGL 渲染图形已经变得越来越流行。Three.js 作为一个高效的 3D 图形库，简化了 WebGL 的操作，使得创建复杂的 3D 图形变得更加容易。着色器（Shader）是实现视觉效果的核心之一，它允许我们直接控制像素的颜色、位置和其他属性。

在本文中，我们将探讨如何通过自定义的 GLSL (OpenGL Shading Language) 着色器来创建火焰效果，使用 Raymarching 技术来模拟火焰的形态和光辉。

环境设置

首先，我们需要引入 Three.js 并创建一个基础的 WebGL 渲染环境。你可以通过以下代码来实现：

import * as THREE from 'three';

// 创建摄像机
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
// 创建场景
const scene = new THREE.Scene();
// 创建一个平面几何体作为着色器的应用表面
const geometry = new THREE.PlaneGeometry(2, 2);
// 使用自定义的着色器创建材质
const material = new THREE.ShaderMaterial({
  ...flameShader,  // 引用我们接下来的火焰着色器
  depthWrite: false,
  transparent: true
});
// 创建网格对象并将其添加到场景中
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 创建 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

这段代码创建了一个 2D 平面，通过自定义材质和着色器将火焰效果渲染在这个平面上。接下来，我们来详细讲解如何实现火焰效果。

火焰着色器解析

火焰效果的核心在于两个部分：噪声函数和Raymarching。

1. 噪声函数

噪声是模拟自然界中随机现象的一个重要工具。我们使用一个简单的三维噪声函数来生成火焰效果中的随机波动：

float noise(vec3 p) {
  vec3 i = floor(p);
  vec4 a = dot(i, vec3(1., 57., 21.)) + vec4(0., 57., 21., 78.);
  vec3 f = cos((p-i)*acos(-1.))*(-.5)+.5;
  a = mix(sin(cos(a)*a), sin(cos(1.+a)*(1.+a)), f.x);
  a.xy = mix(a.xz, a.yw, f.y);
  return mix(a.x, a.y, f.z);
}

这个函数使用的是 Perlin 噪声的变种，通过对每个像素点进行采样，创建出自然、随机的波动效果。在火焰的表现上，这种噪声将带来动态的变化，模拟出火焰的流动感。

2. 火焰的形态

火焰本身是由许多细小的颗粒组成的，它们随着时间变化而不断变形。我们通过球形方程来定义火焰的形态，并结合噪声来创建动态的效果：

float flame(vec3 p) {
  float d = sphere(p*vec3(1.,.5,1.), vec4(.0,-1.,.0,1.));
  return d + (noise(p+vec3(.0,iTime*2.,.0)) + noise(p*3.)*.5)*.25*(p.y);
}

这里，sphere 函数用于创建一个球体的距离场，而火焰的形态则通过 flame 函数在此基础上加入噪声，并且随着时间 (iTime) 变化，使火焰的外观不断变化。

3. Raymarching 技术

Raymarching 是一种基于逐步逼近的方法，用于在复杂的距离场中寻找表面交点。通过在场景中发射光线并不断前进，直到光线与物体表面相交，可以得到物体的轮廓。

vec4 raymarch(vec3 org, vec3 dir) {
  float d = 0.0, glow = 0.0, eps = 0.02;
  vec3 p = org;
  bool glowed = false;
  
  for(int i=0; i<64; i++) {
    d = scene(p) + eps;
    p += d * dir;
    if(d > eps) {
      if(flame(p) < 0.0) glowed = true;
      if(glowed) glow = float(i)/64.;
    }
  }
  return vec4(p, glow);
}

在这个 Raymarching 循环中，我们通过不断推进光线，并检测其是否与火焰相交，来模拟火焰的光辉效果。glow 变量则控制了火焰的亮度和衰减。

4. 渲染火焰

最后，在着色器的主函数中，我们使用上述的 Raymarching 函数来渲染火焰，并根据计算出的亮度值调整颜色：

void main() {
  vec2 uv = -1.0 + 2.0 * vUv;
  uv.x *= iResolution.x/iResolution.y;
  
  vec3 org = vec3(0., -2., 4.);
  vec3 dir = normalize(vec3(uv.x*1.6, -uv.y, -1.5));
  
  vec4 p = raymarch(org, dir);
  float glow = p.w;
  
  vec4 col = mix(vec4(1.,.5,.1,1.), vec4(0.1,.5,1.,1.), p.y*.02+.4);
  
  gl_FragColor = mix(vec4(0.), col, pow(glow*2.,4.));
}

我们根据计算出的火焰的亮度来混合颜色，使得火焰看起来既明亮又充满动感。

动画与实时更新

为了使火焰效果随时间动态变化，我们需要不断更新着色器中的 iTime 和 iResolution 参数。我们可以通过如下代码来实现动画效果：

function animate() {
  requestAnimationFrame(animate);
  
  material.uniforms.iTime.value += 0.01;
  material.uniforms.iResolution.value.set(
    renderer.domElement.width,
    renderer.domElement.height
  );
  
  renderer.render(scene, camera);
}
animate();

每一帧我们都会增加 iTime 的值，从而让火焰在屏幕上不断变化。

处理窗口大小变化

为了确保火焰效果在窗口尺寸变化时正确显示，我们需要监听窗口的 resize 事件，并更新渲染器的大小以及着色器的分辨率：

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  material.uniforms.iResolution.value.set(
    renderer.domElement.width,
    renderer.domElement.height
  );
});

源码

import * as THREE from 'three';

const flameShader = {
  uniforms: {
    iTime: { value: 0 },
    iResolution: { value: new THREE.Vector2(1, 1) }
  },

  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  fragmentShader: `
    uniform vec2 iResolution;
    uniform float iTime;
    varying vec2 vUv;

    float noise(vec3 p) {
      vec3 i = floor(p);
      vec4 a = dot(i, vec3(1., 57., 21.)) + vec4(0., 57., 21., 78.);
      vec3 f = cos((p-i)*acos(-1.))*(-.5)+.5;
      a = mix(sin(cos(a)*a), sin(cos(1.+a)*(1.+a)), f.x);
      a.xy = mix(a.xz, a.yw, f.y);
      return mix(a.x, a.y, f.z);
    }

    float sphere(vec3 p, vec4 spr) {
      return length(spr.xyz-p) - spr.w;
    }

    float flame(vec3 p) {
      float d = sphere(p*vec3(1.,.5,1.), vec4(.0,-1.,.0,1.));
      return d + (noise(p+vec3(.0,iTime*2.,.0)) + noise(p*3.)*.5)*.25*(p.y);
    }

    float scene(vec3 p) {
      return min(100.-length(p), abs(flame(p)));
    }

    vec4 raymarch(vec3 org, vec3 dir) {
      float d = 0.0, glow = 0.0, eps = 0.02;
      vec3 p = org;
      bool glowed = false;
      
      for(int i=0; i<64; i++) {
        d = scene(p) + eps;
        p += d * dir;
        if(d > eps) {
          if(flame(p) < 0.0) glowed = true;
          if(glowed) glow = float(i)/64.;
        }
      }
      return vec4(p, glow);
    }

    void main() {
      vec2 uv = -1.0 + 2.0 * vUv;
      uv.x *= iResolution.x/iResolution.y;
      
      vec3 org = vec3(0., -2., 4.);
      vec3 dir = normalize(vec3(uv.x*1.6, -uv.y, -1.5));
      
      vec4 p = raymarch(org, dir);
      float glow = p.w;
      
      vec4 col = mix(vec4(1.,.5,.1,1.), vec4(0.1,.5,1.,1.), p.y*.02+.4);
      
      gl_FragColor = mix(vec4(0.), col, pow(glow*2.,4.));
    }
  `
};

// 使用示例
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.ShaderMaterial({
  ...flameShader,
  depthWrite: false,
  transparent: true
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 更新uniforms
function animate() {
  requestAnimationFrame(animate);
  
  material.uniforms.iTime.value += 0.01;
  material.uniforms.iResolution.value.set(
    renderer.domElement.width,
    renderer.domElement.height
  );
  
  renderer.render(scene, camera);
}

animate();

// 窗口大小变化处理
window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  material.uniforms.iResolution.value.set(
    renderer.domElement.width,
    renderer.domElement.height
  );
});

总结

在这篇博客中，我们通过使用 Three.js 和 GLSL 编写自定义着色器，成功实现了一个动态的火焰效果。通过噪声函数、Raymarching 技术以及实时更新参数，我们能够模拟出真实的火焰效果，并将其渲染到 Web 页面上。希望本教程能为你提供一些灵感，帮助你在自己的项目中实现类似的效果！

three.js跳动的火焰 流动的河
07-14
很简单的一个效果
vue2+three.js实现火焰效果
weixin_50379372的博客
06-27 358
【代码】vue2+three.js实现火焰效果。
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
three.js如何实现火焰效果，代码怎么写，详细
weixin_42601134的博客
01-05 787
在 three.js 中实现火焰效果有许多方法，具体的实现方式可能会因为你所希望得到的火焰样式而有所不同。 在这里，我们可以提供一种基本的实现方式，你可以根据这个方法来进行更加细致的调整和优化。 首先，我们需要准备一张火焰的纹理图片。你可以使用 Photoshop 或其他图像处理软件来制作纹理图片，也可以在网上找一张适合的纹理图片。 然后，我们可以使用 three.js 的 SpriteMater...
three.js实现火焰效果
weixin_42611177的博客
01-04 1833
三维场景的火焰效果可以通过使用粒子系统和纹理动画来实现。 首先，需要准备一张火焰的纹理图片，并将它分成若干帧，每一帧都是一个小的火焰图片。然后，使用粒子系统，在场景中添加若干个粒子，每个粒子都可以通过设置纹理坐标来显示不同的火焰帧。为了让火焰看起来更加真实，可以设置每个粒子的大小、颜色、速度、寿命等参数，以及将粒子移动到合适的位置上。 最后，可以使用定时器或者动画帧循环来更新粒子的纹理坐标，使得火...
threejs 特效 简单 火焰
qq_32039213的博客
09-13 1077
企鹅 🐧 3448829451。
threejs 火焰效果
04-13
本文将探讨如何使用Three.js实现火焰效果的几个关键知识点。 首先，Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中使用WebGL的复杂性，使得开发者可以更加方便地创建和显示3D图形。WebGL（Web图形库）...
使用THREE.js库的 WebGL 火灾模拟器.zip
07-14
THREE.js是一个强大的JavaScript库，专门用于在Web浏览器中创建3D图形，它利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，允许开发者在网页上实现高性能的交互式3D图形。在这个“使用THREE.js库的WebGL...
基于Threejs的火焰烟雾动画效果代码
09-12
**Three.js 概述** Three.js 是一个JavaScript库...总的来说，这个项目展示了如何使用Three.js库来创建复杂的3D火焰和烟雾动画效果，通过理解Three.js的核心概念和技术，我们可以进一步探索和创建更多的3D交互式内容。
Three.js如何实现雾化效果示例代码
10-19
雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了关于Three.js如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
HTML5 canvas+Three.js实现木板上的火焰蜡烛燃烧3D动画特效源码.zip
11-20
5. **动画**：利用Three.js的动画系统，如 `THREE.Animation` 或 `THREE.Object3D.rotation.y += angle`，来实现火焰的动态效果和蜡烛的燃烧过程。 6. **事件监听器**：可能添加鼠标或触摸事件，使用户能够与3D场景...
【threejs】火焰特效制作
qq_61834461的博客
06-26 762
使用shader创建threejs火焰效果
threejs fire 火焰与烟雾效果
热门推荐
凌风子夜
08-28 1万+
在threejs中有一个为我们提供了可以实现火焰和烟雾效果的包，我们可以直接引用这个包，通过设置某些参数实现需要的效果。 第一步引入fire包，可在工程文件夹下的example文件夹中找到 <script type="text/javascript" src="js/objects/Fire.js" ></script> 后续马上更新，工作… ...
three.js太阳火焰shader
宏斌的博客
11-17 732
threejs 代码。
html5 冒烟效果,HTML5 Three.js 3D洞穴中的火焰和烟雾以及热变形动画特效
weixin_35193131的博客
06-09 832
JavaScript语言：JaveScriptBabelCoffeeScript确定var fireVertexShader = `attribute vec4 orientation;attribute vec3 offset;attribute vec2 scale;attribute float life;attribute float random;varying vec2 vUv;var...
探索 Three.js 中的粒子系统：创建星空、烟雾与特效
最新发布
mmc123125的博客
01-18 668
Three.js粒子系统为3D场景提供了丰富的动态效果，适用于星空、烟雾、火焰等多种特效场景。通过材质、纹理和动画的组合，甚至可以实现类似AAA游戏中的炫酷效果。粒子系统是一种强大的工具，可以用来模拟自然现象，比如星空、烟雾、火焰、雪花等。Three.js提供了灵活的粒子系统支持，结合材质、纹理和动画，可以轻松实现令人惊艳的特效。星空是粒子系统的经典应用之一，模拟点状粒子分布在三维空间中，生成随机闪烁的效果。烟雾粒子通常通过半透明的纹理叠加实现，需要粒子平滑过渡的视觉效果。
使用three.js创建粒子火焰效果
凡事有果必有因
05-23 8699
在线地址
1、three.js shader 入门 红旗飘动效果
淋雨一直走~
09-20 501
three.js shader 入门案例，红旗随风飘扬，带高光效果。
探索火焰的艺术：THREE.Fire —— 实时三维火焰的奇迹
gitblog_00124的博客
08-23 503
探索火焰的艺术：THREE.Fire —— 实时三维火焰的奇迹 THREE.FireRay tracing based procedural volumetric fire for three.js项目地址:https://gitcode.com/gh_mirrors/th/THREE.Fire 在数字艺术与交互体验的前沿，有一种技术能够让虚拟世界中的火焰栩栩如生——这就是THREE.Fire。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值