webgl 火焰特效（未证实可用）

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);
camera.position.set(0, 0, 10);


let rig = new THREE.Group();
rig.add(camera);

scene.add(rig);

var texture = new THREE.TextureLoader().load(
    "/uploads/1908/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;
scene.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(
            "/uploads/2103/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(
            "/uploads/2103/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() * 5;
        }

    }
    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.4;

scene.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)



let light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set(10, 10, 20);

scene.add(light);

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

window.addEventListener("resize", resize)

let mx = 0;
let my = 0;


window.addEventListener("mousemove", (e) => {

    mx = -(0.5 - (e.clientX / window.innerWidth)) * 2.;
    my = -(0.8 - (e.clientY / window.innerHeight)) * 2.;


})
var targetIntensity = Math.random() * 5;

function draw() {
    requestAnimationFrame(draw)
    f.update();
    rig.rotation.y += (mx * .2 - rig.rotation.y) * 0.2;
    rig.rotation.x += (my * 0.02 - rig.rotation.x) * 0.2;

    camera.rotation.z += (mx * 0.5 - camera.rotation.z) * 0.2;
    camera.rotation.y += (-mx - camera.rotation.y) * 0.1;
    camera.rotation.x += (my * -0.2 - camera.rotation.x) * 0.1;
    camera.position.z += ((7 + (my * 3)) - camera.position.z) * 0.2;
    camera.position.y += (my - camera.position.y) * 0.2;

    //f.object.rotateY(0.01)
    // mesh.rotateX(0.01);
    // mesh.rotateY(0.02);
    // mesh.rotateZ(0.03)
    renderer.render(scene, camera);
}

resize();
draw();

html

<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>

css

body {
    margin: 0;
    overflow: hidden;
}
img {
    display: none;
}