three模拟火焰火苗燃烧动画效果代码-html代码-BFW代码库

three模拟火焰火苗燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：three模拟火焰火苗燃烧动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: fixed;
            touch-action: none;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ccapture.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4(position, 1.0);
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;
        uniform sampler2D u_noise;

        #define PI 3.14159265359
        #define TAU 6.283185307179586


        float tri(float x) {
            return abs(fract(x) - .5);
        }

        vec3 tri3(vec3 p) {

            return vec3(
                tri(p.z + tri(p.y * 1.)),
                tri(p.z + tri(p.x * 1.)),
                tri(p.y + tri(p.x * 1.))
            );

        }
        float triNoise3D(vec3 p, float spd, float time) {

            float z = 1.4;
            float rz = 0.;
            vec3  bp = p;

            for (float i = 0.; i <= 3.; i++) {

                vec3 dg = tri3(bp * 2.);
                p += (dg + time * .1 * spd);

                bp *= 1.8;
                z *= 1.5;
                p *= 1.2;

                float t = tri(p.z + tri(p.x + tri(p.y)));
                rz += t / z;
                bp += 0.14;

            }

            return rz;

        }


        void main() {

            float scale = .4;
            vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

            vec3 highlightColour;
            vec3 bodyColour;
            vec3 bgColour = mix(vec3(0., .0, .1), vec3(.6, .45, .1) * .5, uv.y + .1);
            bgColour += (1. - length(uv * 1.5)) * .2;

            vec2 pos = uv / .5;
            float bottom = 0.5*(pos.y+1.0) * sin(u_time);
            vec2 wave = vec2(0.);
            wave.x += bottom*sin(4.0*pos.y-8.0*u_time)*.5;

            pos += .25*wave;
            pos.x += pos.x / (1.0-(pos.y));

            float flameMask = clamp(1.0-length(pos), 0.0, 1.0);
            flameMask = 1.0-pow(1.0-flameMask, 4.);

            bodyColour = mix(vec3(0.5, 0.2, 0.2), vec3(0.55, 0.25, 0.0), uv.y + flameMask);
            highlightColour = mix(vec3(1.0, .5, 0.0), vec3(1.0, 2.0, 0.0), uv.y * (1. - flameMask * flameMask));

            vec3 uv3d = scale*0.1*vec3(uv.x, uv.y, 0.0);
            uv3d += vec3(0.0, -u_time*0.04, u_time*0.02); // Time component
            float noise = triNoise3D(uv3d * 5. + flameMask * .05, 0., u_time);
            noise = noise * 1.5 - .2;

            vec3 colour;

            float value = flameMask*noise;
            value += .5*flameMask;

            float flame_edge = flameMask * 0.3*(pos.y+1.0);
            float edge = clamp(value-flame_edge*2., 0.0, 1.0);
            float hardMask = smoothstep(flame_edge, flame_edge+0.1, value);
            float highlight = 1.0-edge*edge;

            uv3d = vec3(uv.x, uv.y, 0.0) + vec3(0.0, -u_time*0.01, u_time*0.025);

            highlight = pow(highlight, 2.0);

            // colour += glow * 2.;
            colour = highlightColour*(hardMask*highlight);
            colour = mix(bgColour, colour, hardMask);
            colour += bodyColour*flameMask*flameMask;

            gl_FragColor = vec4(colour, 1.0);
        }
    </script>


</head>
<body style="">
    <div id="container" touch-action="none">

    </div>
    <script>
        /*
              Most of the stuff in here is just bootstrapping. Essentially it's just
              setting ThreeJS up so that it renders a flat surface upon which to draw
              the shader. The only thing to see here really is the uniforms sent to
              the shader. Apart from that all of the magic happens in the HTML view
              under the frag.........完整代码请登录后点击上方下载按钮下载查看