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