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

代码语言：html

所属分类：动画

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

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

<html>
<head>
    <style>
        body {
            background-color: #000;
            margin: 0;
        }

        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>

</head>
<body>
    <div id="js-app">
        <canvas width="350" height="350" style="width: 280px; height: 280px;"></canvas>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.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-vertex">
        const int MAX_MARCHING_STEPS = 255;
        const float MIN_DIST = 0.0;
        const float MAX_DIST = 1000.0;
        const float EPSILON = 0.0001;
        const float SPHERE_R = 1.0;
        const float BOX_W = 1.0;
        const float BOX_D = 1.0;
        const float BOX_H = 1.0;
        uniform vec3 uResolution;
        uniform float uTime;

        #define M_PI 3.1415926535897932384626433832795
        #define color1 vec4(1.0, 1.0, 1.0, 1.0)
        #define color2 vec4(1.0, 0.8, 0.2, 1.0)
        #define color3 vec4(1.0, 0.03, 0.0, 1.0)
        #define color4 vec4(0.05, 0.02, 0.02, 1.0)
        #define noiseSteps 1
        #define noiseAmplitude 0.06
        #define noiseFrequency 4.0
        #define animation vec3(0.0, -6.0, 0.5)
        #define background vec4(0.1, 0.0, 0.0, 1.0)

        vec3 mod289 (vec3 x) {
            return x - floor(x * (1.0 / 289.0)) * 289.0;
        }
        vec4 mod289 (vec4 x) {
            return x - floor(x * (1.0 / 289.0)) * 289.0;
        }
        vec4 permute (vec4 x) {
            return mod289(((x*34.0)+1.0)*x);
        }
        vec4 taylorInvSqrt (vec4 r) {
            return 1.79284291400159 - 0.85373472095314 * r;
        }

        float snoise (vec3 v) {
            const vec2 C = vec2(1.0/6.0, 1.0/3.0);
            const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
            vec3 i = floor(v + dot(v, C.yyy)); // First corner
            vec3 x0 = v - i + dot(i, C.xxx);
            vec3 g = step(x0.yzx, x0.xyz); // Other corners
            vec3 l = 1.0 - g;
            vec3 i1 = min(g.xyz, l.zxy);
            vec3 i2 = max(g.xyz, l.zxy);
            vec3 x1 = x0 - i1 + C.xxx;
            vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
            vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
            i = mod289(i); // Permutations
            vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));
            // Gradients: 7x7 points over a square, mapped onto an octahedron.
            // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
            float n_ = 0.142857142857; // 1.0/7.0
            vec3  ns = n_ * D.wyz - D.xzx;
            vec4 j = p - 49.0 * floor(p * ns.z * ns.z); //  mod(p,7*7)
            vec4 x_ = floor(j * ns.z);
            vec4 y_ = floor(j - 7.0 * x_); // mod(j,N)
            vec4 x = x_ *ns.x + ns.yyyy;
            vec4 y = y_ *ns.x + ns.yyyy;
            vec4 h = 1.0 - abs(x) - abs(y);
            vec4 b0 = vec4(x.xy, y.xy);
            vec4 b1 = vec4(x.zw, y.zw);
            vec4 s0 = floor(b0) * 2.0 + 1.0;
            vec4 s1 = floor(b1) * 2.0 + 1.0;
            vec4 sh = -step(h, vec4(0.0));
            vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
            vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
            vec3 p0 = vec3(a0.xy, h.x);
            vec3 p1 = vec3(a0.zw, h.y);
            vec3 p2 = vec3(a1.xy, h.z);
            vec3 p3 = vec3(a1.zw, h.w);
            //Normalise gradients
            vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
            p0 *= norm.x;
            p1 *= norm.y;
            p2 *= norm.z;
            p3 *= norm.w;
            // Mix final noise value
            vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
            m = m * m;
            return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
        }

        float turbulence (vec3 position, float minFreq, float maxFreq, float qWidth) {
            float value = 0.0;
            float cutoff = clamp(0.5 / qWidth, 0.0, maxFreq);
            float fade;
            float fOut = minFreq;
            for (int i = noiseSteps; i >= 0; i--) {
                if (fOut >= 0.5 * cutoff) break;
                fOut *= 2.0;
                value += abs(snoise(position * fOut)) / fOut;
            }
            fade = clamp(2.0 * (cutoff - fOut) / cutoff, 0.0, 1.0);
            value += fade * abs(snoise(position * fOut)) / fOut;
            return 1.0 - value;
        }

        vec4 fireShade (float distance) {
            float c1 = saturate(distance * 5.0 + 0.5);
            float c2 = saturate(distance * 5.0);
            float c3 = saturate(distance * 3.4 - 0.5);
            vec4 a = mix(color1, color2, c1);
            vec4 b = mix(a, color3, c2);
            return mix(b, color4, c3);
        }

        float maxcomp (in vec3 p) {
            return max(p.x, max(p.y, p.z));
        }

        vec3 opTrans (vec3 p, vec3 d) {
            return p - d;
        }

        vec3 opRep (vec3 p, vec3 spacing) {
            return mod(p, spacing) - spacing / 2.0;
        }

        vec3 opTwist (vec3 p, float q) {
            float c = cos(q * p.y + q);
            float s = sin(q * p.y + q);
            mat2 m = mat2(c, -s, s, c);
            return vec3(m * p.xz, p.y);
        }

        float sdPlane (vec3 p, vec4 n) {
            return dot(p, n.xyz) + n.w;
        }

        float s.........完整代码请登录后点击上方下载按钮下载查看