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

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

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