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
  .........完整代码请登录后点击上方下载按钮下载查看