three.js shader 火焰效果

于 2024-09-20 15:57:00 发布
阅读量262 收藏
点赞数 2
文章标签： javascript ecmascript webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579192/article/details/142387828
版权

预览效果

在这里插入图片描述

1、懒人直接上代码，全部代码效果


import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from 'https://esm.sh/three/examples/jsm/controls/OrbitControls';


let scene: THREE.Scene, renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera,
    controls: OrbitControls, material: THREE.Material,
    sizes = { width: window.innerWidth, height: window.innerHeight }
const clock = new THREE.Clock();

function init() {
  let w = window.innerWidth;
  let h = window.innerHeight;

  scene = new THREE.Scene();
  scene.background = new THREE.Color('#000000');

  camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100000);
  camera.position.set(0, 0, 2);
  camera.lookAt(new THREE.Vector3());

  renderer = new THREE.WebGLRenderer({
    antialias: true, alpha: true,
  });
  renderer.outputColorSpace = THREE.SRGBColorSpace
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.BasicShadowMap;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(w, h);

  const app = document.getElementById("app") as Element;
  while (app.firstChild) app.removeChild(app.firstChild)
  app?.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true

  // 光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
  directionalLight.castShadow = true;
  directionalLight.shadow.camera.far = 20000;
  directionalLight.shadow.mapSize.set(2048, 2048);
  directionalLight.shadow.normalBias = 0.05;
  directionalLight.shadow.camera.top = 80;
  directionalLight.shadow.camera.bottom = -80;
  directionalLight.shadow.camera.left = -80;
  directionalLight.shadow.camera.right = 80;
  directionalLight.position.set(60, 120, 80);
  scene.add(directionalLight);

  window.addEventListener("resize", resize);
}

// 顶点着色器
const vertexShader = `
varying vec2 vUv;

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

// 片元着色器
const fragmentShader = `

uniform float uTime;
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.)) * (-0.5) + 0.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, uTime * 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 v = -1.0 + 2.0 * vUv;
  // v.x *= iResolution.x / iResolution.y;

  vec3 org = vec3(0., -2., 4.);
  vec3 dir = normalize(vec3(v.x * 1.6, -v.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 * 0.02 + 0.4);

  gl_FragColor = mix(vec4(0.), col, pow(glow * 2., 4.));
}
`;


function initShader() {
  const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide,
    transparent: true,
    uniforms: {
      uTime: {
        value: 0,
      },
      uMouse: {
        value: new THREE.Vector2(0, 0),
      },
      uResolution: {
        value: new THREE.Vector2(window.innerWidth, window.innerHeight),
      },
      uVelocity: {
        value: 3,
      },
      uColor1: {
        value: new THREE.Color('#ff801a'),
      },
      uColor2: {
        value: new THREE.Color('#ff5718'),
      },
    },
  });

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

  return material
}

init()
material = initShader()
render();

function render() {
  const time = clock.getElapsedTime();
  if (material) material.uniforms.uTime.value = time;
  controls.update()
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

function resize() {
  const w = window.innerWidth;
  const h = window.innerHeight;
  sizes.width = w;
  sizes.height = h;
  renderer.setSize(w, h);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

2、第一步初始化基本的three.js 代码结构

1、导入模块初始化变量

import * as THREE from 'https://esm.sh/three';
import { OrbitControls } from 'https://esm.sh/three/examples/jsm/controls/OrbitControls';


let scene: THREE.Scene, renderer: THREE.WebGLRenderer, camera: THREE.PerspectiveCamera,
    controls: OrbitControls, material: THREE.Material,
    sizes = { width: window.innerWidth, height: window.innerHeight }
const clock = new THREE.Clock();

3、第二步初定义three.js基本的方法

function init() {
  let w = window.innerWidth;
  let h = window.innerHeight;

  scene = new THREE.Scene();
  scene.background = new THREE.Color('#000000');

  camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100000);
  camera.position.set(0, 0, 2);
  camera.lookAt(new THREE.Vector3());

  renderer = new THREE.WebGLRenderer({
    antialias: true, alpha: true,
  });
  renderer.outputColorSpace = THREE.SRGBColorSpace
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.BasicShadowMap;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(w, h);

  const app = document.getElementById("app") as Element;
  while (app.firstChild) app.removeChild(app.firstChild)
  app?.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true

  // 光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
  directionalLight.castShadow = true;
  directionalLight.shadow.camera.far = 20000;
  directionalLight.shadow.mapSize.set(2048, 2048);
  directionalLight.shadow.normalBias = 0.05;
  directionalLight.shadow.camera.top = 80;
  directionalLight.shadow.camera.bottom = -80;
  directionalLight.shadow.camera.left = -80;
  directionalLight.shadow.camera.right = 80;
  directionalLight.position.set(60, 120, 80);
  scene.add(directionalLight);

  window.addEventListener("resize", resize);
}

function render() {
  const time = clock.getElapsedTime();
  if (material) material.uniforms.uTime.value = time;
  controls.update()
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

function resize() {
  const w = window.innerWidth;
  const h = window.innerHeight;
  sizes.width = w;
  sizes.height = h;
  renderer.setSize(w, h);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

4、第三步编写shader


// 顶点着色器
const vertexShader = `
varying vec2 vUv;

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

// 片元着色器
const fragmentShader = `

uniform float uTime;
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.)) * (-0.5) + 0.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, uTime * 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 v = -1.0 + 2.0 * vUv;
  // v.x *= iResolution.x / iResolution.y;

  vec3 org = vec3(0., -2., 4.);
  vec3 dir = normalize(vec3(v.x * 1.6, -v.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 * 0.02 + 0.4);

  gl_FragColor = mix(vec4(0.), col, pow(glow * 2., 4.));
}
`;


function initShader() {
  const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide,
    transparent: true,
    uniforms: {
      uTime: {
        value: 0,
      },
      uMouse: {
        value: new THREE.Vector2(0, 0),
      },
      uResolution: {
        value: new THREE.Vector2(window.innerWidth, window.innerHeight),
      },
      uVelocity: {
        value: 3,
      },
      uColor1: {
        value: new THREE.Color('#ff801a'),
      },
      uColor2: {
        value: new THREE.Color('#ff5718'),
      },
    },
  });

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

  return material
}

5、第四步运行

init()
material = initShader()
render();
淋雨一直走~
关注
three.js跳动的火焰 流动的河
07-14
很简单的一个效果
threejs 火焰效果
04-13
Three.js 火焰效果的实现是通过结合WebGL技术，利用Three.js库来创建视觉上的火焰和烟雾效果。本文将探讨如何使用Three.js实现火焰效果的几个关键知识点。 首先，Three.js是一个基于WebGL的JavaScript库，它简化了...
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
1、three.js shader 入门 红旗飘动效果
最新发布
淋雨一直走~
09-20 401
three.js shader 入门案例，红旗随风飘扬，带高光效果。
three.js创建火焰
weixin_35757531的博客
01-04 717
要在 three.js 中创建火焰，可以使用粒子系统来模拟火焰的效果。 首先，需要准备一张火焰的贴图。然后，可以使用 THREE.TextureLoader 加载该贴图，并将它赋值给粒子的材质的 map 属性。 接着，可以创建一个粒子系统，设置粒子的数量、发射速度、发射角度、漂浮时间等参数。最后，将粒子系统添加到场景中即可。 具体代码实现细节可以参考 three.js 官方文档或者搜索相关的教程。...
three.js 使用粒子系统和材质动画来模拟火焰的运动
weixin_42601134的博客
02-13 572
three.js 可以使用粒子系统和材质动画来模拟火焰的运动。 使用粒子系统，你可以使用多个粒子来模拟火焰的效果。每个粒子都有一些基本属性，例如位置、大小、颜色等。你可以调整这些属性来模拟火焰的运动，例如，让粒子向上飘浮来模拟烟雾。 使用材质动画，你可以使用帧动画来模拟火焰的运动。帧动画是一种将一个图像序列分成多帧的技术，你可以把每一帧看作是一张照片，连续播放这些照片就可以产生动画效果。在 thr...
使用THREE.js库的 WebGL 火灾模拟器.zip
07-14
THREE.js是一个强大的JavaScript库，专门用于在Web浏览器中创建3D图形，它利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，允许开发者在网页上实现高性能的交互式3D图形。在这个“使用THREE.js库的WebGL...
基于Three.JS的孔明灯效果
11-17
总结来说，利用Three.js和GLSL着色器，我们可以创建一个逼真的孔明灯飞翔效果，通过自定义的材质实现动态的光照和纹理效果，同时通过JavaScript控制动画，为用户带来引人入胜的3D交互体验。这个过程涉及到了WebGL的...
使用3D引擎threeJS实现星空粒子移动效果
11-30
在本文中，我们将深入探讨如何使用JavaScript库Three.js来实现一个星空粒子移动的效果。Three.js是一个强大的工具，它允许开发者在浏览器中创建丰富的3D图形，包括粒子系统、光照、材质以及相机控制等多个方面。 ...
d3-flame-graph:一个D3.js插件，可从分层数据生成火焰图
05-02
d3-火焰图 一个D3.js插件，可从分层数据生成火焰图。 如果您不知道什么是火焰图，请查看。 火焰图是配置文件软件的可视化，可以快速，准确地识别出最频繁的代码路径。 可以使用我在上的开源程序生成它们，该程序创建交互式 。 布伦丹·格雷格（Brendan Gregg） 例子 单击查看演示和。 单击查看动画的装配体演示和 单击以查看bl.ocks.org上的简化演示。 入门 jsdelivr CDN 只需引用CDN托管CSS和JS文件即可！ < head > < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/d3-flame-graph@4.0.6/dist/d3-flamegraph.css " > </ head > < body > < div id
js+css3火焰燃烧动画特效
06-11
这是一款比较逼真的js+css3火焰燃烧动画特效，仿似蜡烛或火柴燃烧晃动的火苗。
JQ js css3火焰燃烧动画特效.zip
07-11
代码片段： <title>A Pen by  FE_dev</title> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body> <div class="container"> <div class="fire"></div> </div> [removed][removed]
CSS3五星红旗国庆节庆祝动画特效.zip
11-02
CSS3五星红旗国庆节庆祝动画特效.zip
CSS3 SVG绘制模拟旗帜飘动特效特效代码
03-20
CSS3 SVG绘制模拟旗帜飘动特效是一款被风吹动的小旗帜动画特效。
three.js实现火焰效果，代码怎么写，详细一点
weixin_42577735的博客
01-05 804
很好，我来为您介绍一下如何使用 three.js 实现火焰效果。 首先，你需要准备一些图片资源，这些图片资源用于模拟火焰的动画效果。你可以使用 Photoshop 或其他图像编辑软件制作火焰图片。 然后，你需要使用 three.js 创建一个场景，并在场景中添加一个平面几何体。这个平面几何体用于显示火焰的图片资源。 接下来，你需要为这个平面几何体设置材质。你可以使用 THREE.MeshBasic...
threejs 特效 简单 火焰
qq_32039213的博客
09-13 1002
企鹅 🐧 3448829451。
基于ThreeJS的火焰围栏
weixin_47893737的博客
02-21 813
通过Web Shader的实现的火焰围栏
使用three.js创建粒子火焰效果
凡事有果必有因
05-23 8523
在线地址
three.js如何实现火焰效果，代码怎么写，详细
weixin_42601134的博客
01-05 733
在 three.js 中实现火焰效果有许多方法，具体的实现方式可能会因为你所希望得到的火焰样式而有所不同。 在这里，我们可以提供一种基本的实现方式，你可以根据这个方法来进行更加细致的调整和优化。 首先，我们需要准备一张火焰的纹理图片。你可以使用 Photoshop 或其他图像处理软件来制作纹理图片，也可以在网上找一张适合的纹理图片。 然后，我们可以使用 three.js 的 SpriteMater...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淋雨一直走~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值