WEBGL真实火焰实现（完整）

最新推荐文章于 2024-07-12 13:36:10 发布
最新推荐文章于 2024-07-12 13:36:10 发布
阅读量562 收藏 3
点赞数
分类专栏： WEBGL 文章标签： node.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hr_reborn/article/details/120372012
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        html, body{
            margin: 0;
            height: 100%;
        }

        canvas{
            display: block;
        }
    </style>

<body onload="drawFire2();">
</body>
<script src="../build/three.js"></script>
<script src="../node_modules/three/examples/js/renderers/Projector.js"></script>
<script src="../node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../node_modules/three/examples/js/libs/tween.min.js"></script>
<script src="../THREE.MeshLine/demo/js/dat.gui.min.js"></script>
<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="../build/three.js"></script><script id="vertexShader" type="x-shader/x-vertex">
      precision mediump float;
      precision mediump int;
      attribute vec4 color;
      uniform float blend;
      uniform sampler2D gradient;
      uniform sampler2D blendPattern;
      varying vec2 vUv;
      varying float vFade;
      varying float dissolve;
      void main()	{
            vUv = uv;
            dissolve = texture2D(blendPattern, vUv).r * 0.1;
            vec4 localPosition = vec4( position*(1.+(dissolve*5.)), 1);
            vFade = clamp((localPosition.y + 3.0) / 6.0, 0.0, 1.0);
			gl_Position = projectionMatrix * modelViewMatrix * localPosition;
	  }
</script>
<script id="fragmentShader" type="x-shader/x-vertex">

			precision mediump float;
			precision mediump int;

			uniform float time;
			uniform float blend;

			uniform sampler2D gradient;
			uniform sampler2D blendPattern;

      varying float vFade;
      varying vec2 vUv;
  		varying float dissolve;

			void main()	{

        float spread = 0.2;

        float fadeAmount = smoothstep(
          max(0., vFade - spread),
          min(1., vFade + spread),
          blend + dissolve*1.2
	      );

				gl_FragColor = texture2D(gradient, vec2(vUv.x, fadeAmount));
			}
</script>
<script>
    var fireX = 0.7;
    var fireY = 0.7;
    var fireZ = 0.7;
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(new THREE.Color(0x000000));
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
    //
    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.set(0, 0, 10);
    }
    //
    let scene = new THREE.Scene();
    let tempFireObj = new THREE.Group();
    scene.add(tempFireObj);
    //
    var light;
    function initLight() {
        let light = new THREE.PointLight(0xffffff, 1, 100)
        light.position.set(10, 10, 20);
        tempFireObj.add(light);
    }
    //
    function initModel(){  //初始化轴辅助
        var object = new THREE.AxesHelper(500);
        scene.add(object);
    }
    //
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }
    //
    var controls1;
    function  initControls() {
        controls1 = new THREE.OrbitControls(camera,renderer.domElement);
        controls1.enableDamping = true;
        controls1.enableZoom = true;
        controls1.autoRotate = false;
        controls1.enablePan = true;
    }
    //
    function initRoughTexture() {
        var texture = new THREE.TextureLoader().load(
            "/example/textures/Rough.jpg",
            function () {
                console.log("loaded");
            },
            undefined,
            function (e) {
                console.log("error", e);
            }
        );
        texture.crossOrigin = ""; //"anonymous";
        let plane = new THREE.PlaneGeometry(100, 100, 100, 100)
        let planeMaterial = new THREE.MeshStandardMaterial({
            color: 0x999999,
            roughness: 0.8,
            displacementMap: texture,
            displacementScale: 2,
            displacementBias: -1.4,
            map: texture,
        });
        let groundMesh = new THREE.Mesh(plane, planeMaterial);
        groundMesh.rotateX(-90 * THREE.Math.DEG2RAD);
        groundMesh.position.y = -2;
        tempFireObj.add(groundMesh);
    }


    class fire {
        constructor(density = 30, height = 8, r = 0.2, resolution = 64) {
                this.object = new THREE.Group();
                this.fireballs = [];
                this.height = height;
                this.radius = r;
                //加载纹理
                var texture = new THREE.TextureLoader().load(
                    "/example/textures/Tendrils.png",
                    function () {
                        console.log("loaded");
                    },
                    undefined,
                    function (e) {
                        console.log("error", e);
                    }
                );
                texture.crossOrigin = ""; //"anonymous";
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                var fireGradient = new THREE.TextureLoader().load(
                    "/example/textures/Fire2.png",
                    function () {
                        console.log("loaded");
                    },
                    undefined,
                    function (e) {
                        console.log("error", e);
                    }
                );
                texture.crossOrigin = ""; //"anonymous";
                //设置属性，调用着色器
                this.fireMaterial = new THREE.ShaderMaterial({
                    uniforms: {
                        time: {
                            value: 1.0
                        },
                        blend: {
                            value: 1.0
                        },
                        gradient: {
                            type: "t",
                            value: fireGradient
                        },
                        blendPattern: {
                            type: "t",
                            value: texture
                        },
                    },
                    vertexShader: document.getElementById('vertexShader').textContent,
                    fragmentShader: document.getElementById('fragmentShader').textContent,
                    transparent: true,
                    side: THREE.DoubleSide,
                    //blending:THREE.AdditiveBlending
                });

                this.light = new THREE.PointLight(0xFF5500, 1, 100)
                this.light.position.set(0, 0.4, 0);
                this.lightIntensity = Math.random() * 5;

                this.object.add(this.light);
                //this.fireMaterial = new THREE.MeshStandardMaterial(0x661100);

                for (var i = 0; i < density; i++) {
                    let geometry = new THREE.SphereGeometry(1, resolution, resolution);
                    let mat = this.fireMaterial.clone();
                    mat.uniforms.blendPattern.value = texture;
                    mat.uniforms.gradient.value = fireGradient;
                    mat.needsUpdate = true;
                    let sphere = new THREE.Mesh(geometry, mat);
                    sphere.position.y = Math.random() * height;
                    sphere.position.x = (0.5 - Math.random()) * this.radius;
                    sphere.position.z = (0.5 - Math.random()) * this.radius;
                    sphere.rotateX(Math.random() * 1);
                    sphere.rotateZ(Math.PI + (0.5 - Math.random()));
                    sphere.rotateY(Math.random() * 3);
                    sphere.dirX = ((0.5 - Math.random()) * 0.02);
                    sphere.dirY = 0.02;
                    sphere.dirZ = ((0.5 - Math.random()) * 0.02);

                    this.fireballs.push(sphere);
                }

                this.object.add(...this.fireballs);

            }

            update() {

                this.fireballs.forEach(ball => {

                    ball.position.y += ball.dirY + Math.sin(ball.position.y * 0.002);
                    ball.position.x += Math.sin(ball.position.y * 0.5) * ball.dirX;
                    ball.position.z += Math.cos(ball.position.y * 0.25) * ball.dirZ;
                    if (ball.position.y > this.height) {
                        ball.position.y = -0.01
                        ball.position.x = (0.5 - Math.random()) * this.radius;
                        ball.position.z = (0.5 - Math.random()) * this.radius;
                    }

                    let p = ball.position.y / this.height;

                    // ball.rotateZ((1.2-p)*0.01);
                    ball.rotateY((1.2 - p) * 0.01)
                    ball.scale.set(0.4 + p, 0.4 + p, 0.4 + p);
                    ///ball.opacity = p;
                    ball.material.uniforms.blend.value = p;
                    //ball.material.needsUpdate = true;
                })

                this.light.intensity += (this.lightIntensity - this.light.intensity) * 0.02;

                if (Math.random() > 0.8) {
                    this.lightIntensity = Math.random() * 6;
                }

            }

            env(val, envelope = [0., 0., 0.1, 1., 1., 0.]) {

                function lerp(v0, v1, t) {
                    return v0 * (1 - t) + v1 * t
                }

            }

        }

        let f = new fire();
        f.object.position.y = -2;
        f.object.scale.set(fireX,fireY,fireZ);
        tempFireObj.add(f.object);
    // let cubeGeometry = new THREE.CubeGeometry(2, 2)
    // let cubeMaterial = new THREE.MeshStandardMaterial();
    // let cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
    // scene.add(cubeMesh)
    //

    //
    function resize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        requestAnimationFrame(animate);
        stats.update();
        //controls1.update();
        f.update();
        renderer.render(scene, camera);
    }
    function drawFire2() {
        initRender();
        initCamera();
        initLight();
        initModel();
        initRoughTexture();  //测试用
        //initControls();
        initStats();
        resize();
        animate();
    }



</script>
</body>
</html>

HR_Reborn
关注
专栏目录
webgl-fire-particles:用于火焰效果的 WebGL 粒子系统演示
07-07
用于火焰效果的 WebGL 粒子系统。
用javascript实现模拟火焰
10-30
3. **颜色渐变**：为了使火焰看起来更加真实，需要根据不同的位置使用不同的颜色渐变。 #### 三、代码解析 接下来，我们将详细分析提供的代码片段。 ##### 1. 创建像素矩阵 ```javascript function PixelAxis...
webGL——体现烟雾，火焰，喷泉不同粒子对象的主要因素
最新发布
m0_46543935的博客
07-12 506
在计算机图形学和游戏开发中，烟雾、火焰和喷泉等效果通常通过粒子系统来实现。粒子系统是一种用于模拟复杂效果的方法，通过大量简单的粒子来创建复杂的视觉效果。不同的粒子效果主要通过以下因素来体现。
webgl火焰特效（证实可用）
HR_Reborn的博客
08-27 467
1、代码如下 <!DOCTYPE html> <html lang="en"> <head> <title>TJH ar.js</title> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta
webgl 火焰特效（未证实可用）
HR_Reborn的博客
08-27 252
js const renderer = new THREE.WebGLRenderer({ antialias: true }); document.body.appendChild(renderer.domElement); let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000)
three.js实现火焰效果，代码怎么写，详细一点
weixin_42577735的博客
01-05 815
很好，我来为您介绍一下如何使用 three.js 实现火焰效果。 首先，你需要准备一些图片资源，这些图片资源用于模拟火焰的动画效果。你可以使用 Photoshop 或其他图像编辑软件制作火焰图片。 然后，你需要使用 three.js 创建一个场景，并在场景中添加一个平面几何体。这个平面几何体用于显示火焰的图片资源。 接下来，你需要为这个平面几何体设置材质。你可以使用 THREE.MeshBasic...
使用THREE.js库的 WebGL 火灾模拟器.zip
07-14
使用THREE.js库的 WebGL 火灾模拟器
SuperMap iClient3D for WebGL教程 粒子特效-基础火焰特效
beauful88的博客
08-08 2023
SuperMap iClient3D for WebGL教程 粒子特效粒子特效简介使用粒子特效完整代码 作者: NIck Cheng 粒子特效简介 粒子特效通常使用与要表现某些动态粒子效果的情况下(火焰,喷泉,烟雾等),这些效果通常无法通过单一图片来表示,就需要借助粒子特效来加以实现. 超图iClient3D for WebGL对原有Cesium的ParticleSystem类进行了一定的优...
WebGL-water
03-13
WebGL-water是一个利用HTML5和WebGL技术实现的交互式水波纹...通过理解WebGL的基本概念、着色器编程以及图形渲染的物理原理，开发者可以创建出各种令人惊叹的视觉效果，如水波纹、火焰、烟雾等，丰富网页的视觉表现力。
webGL3D机房模型
10-17
WebGL是一种在网页上实现3D图形渲染的技术，它基于OpenGL标准，并且完全用JavaScript编写，无需任何插件。在“webGL3D机房模型”这个项目中，开发人员利用WebGL的强大功能，创建了一个交互式的3D机房演示。这个Demo...
webgl-fire:在使用 WebGL 的旧演示中看到的旧学校火灾效果的转世。 在 FF 和 Chrome 中测试
06-03
webgl-fire 在使用 WebGL 的旧演示中看到的旧学校火灾效果的转世。 在 FF 和 Chrome 中测试。 ![火在行动] ( )
GLSL opengl Shader 火焰效果实现
03-12
本部分包含火焰效果的两个特效文件 只要将文件拖入gpu文档即可运行该效果
Cesium粒子特效喷泉特效代码及模型.zip
08-08
基于webgl开发的粒子特效,喷泉效果,包括喷泉的gltf模型,粒子图片以及完整vue组件代码
HTML5 Canvas邪恶之眼火焰燃烧动画特效
06-11
HTML5 Canvas基于webgl绘制的邪恶之眼火焰燃烧动画特效，仿似液态的火焰岩浆动画效果。
HTML5+Three.js+WebGL实现带重力效果的粒子喷泉动画特效源码.zip
11-03
在本项目中，"HTML5+Three.js+WebGL实现带重力效果的粒子喷泉动画特效源码"，开发者利用HTML5的Canvas元素，结合Three.js库和WebGL技术，构建了一个具有真实物理效果的粒子系统，模拟出带有重力的粒子喷泉动画。...
laderToHeaven:WebGL巴比伦游戏
05-08
4. **动画与粒子效果**：实现角色动作、特殊效果（如火焰、烟雾）的动画序列和粒子系统。 5. **物理引擎**：通过集成的物理引擎，模拟真实世界的重力、碰撞等物理现象。 6. **网络通信**：如果游戏有在线功能，可能...
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
w844916072的专栏
02-08 2250
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课 项目背景 消防安全一直是各大都市关注的重要课题，在消防体系中，特别是高楼消防体系中，消防系统整体布控与监控，火情有效准确定位，防火器材定位，人员逃生路径规划，火情预警，消防演习都是特别重要的环节。所以一套直观的，迅速治控的系统展现，可体验式演戏游戏也就变得那么的不可或缺了。 解决方案 技术选型：使用webGL技术...
WebGL高性能烟花绽放HTML5动画
ICode联盟
05-18 221
下载地址 webgl fireworks，基于canvas性能表现最好的一个烟花绽放html5动画，比CSS3的版本好太多！ dd:
（转） [Flash/Flex] 用柏林噪音和滤镜制作翻腾的火焰效果----Flash AS3效应
weixin_33725807的博客
11-25 181
下图展示的是通过柏林噪声和一些滤镜制作的火焰效果。这个效果是从舞台底部燃起的熊熊烈火。这个效果使用了BitmapData里的perlinNoise方法，以及ColorMatrixFilter和DisplacementMapFilter两个滤镜，点击截图下面的链接，可以在新窗口中查看运行的效果。   http://www.flashandmath.com/flashcs5/fire/fire...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值