three实现火焰火海动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three实现火焰火海动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

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

#container {
  position: fixed;
  touch-action: none;
}
</style>




</head>

<body >
<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 vec3 u_colours[ 5 ];
    uniform sampler2D u_clouds;
  
    const float multiplier = 1.5;
  
    const float zoomSpeed = 4.;
    const int layers = 10;
  
    const int octaves = 1;
    const float seed = 43758.5453123;
    const float seed2 = 73156.8473192;
  
    float random(float val) {
      return fract(sin(val) * seed);
    }
  
    vec2 random2(vec2 st, float seed){
        st = vec2( dot(st,vec2(127.1,311.7)),
                  dot(st,vec2(269.5,183.3)) );
        return -1.0 + 2.0*fract(sin(st)*seed);
    }
  
    mat2 rotate2d(float _angle){
        return mat2(cos(_angle),sin(_angle),
                    -sin(_angle),cos(_angle));
    }
  
    // Value Noise by Inigo Quilez - iq/2013
    // https://www.shadertoy.com/view/lsf3WH
    float noise(vec2 st, float seed) {
        vec2 i = floor(st);
        vec2 f = fract(st);

        vec2 u = f*f*(3.0-2.0*f);

        return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ), 
                         dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),
                    mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ), 
                         dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);
    }
  
    float fbm(in vec2 st, float seed) {
      float value = 0.0;
      float amp = 0.5;
      vec2 shift = vec2(100);
      // Rotate to reduce axial bias
      mat2 rot = mat2(cos(1.5), sin(1.5), -sin(1.5), cos(1.50));
      for (int i = 0; i < octaves; ++i) {
        value += amp * abs(noise(st, seed));
        st = rot * st * 2.0 + shift;
        amp *= 0.5;
      }
      return value;
    }
  
    vec3 renderNoise(vec2 uv) {
      float r = fbm(uv, seed);
      return vec3(r * r * 10.);
    }
  
    // The render function is where we render the pattern to be added to the layer
    vec3 render(vec2 uv, float multiplier, inout vec2 id) {
      return texture2D(u_clouds, uv).rgb;

    }
  
    vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, inout vec2 id, in vec3 colour) {
      // Scale
      // Generating a scale value between zero and 1 based on a mod of u_time
      // A frequency of 10 dixided by the layer index (10 / layers * layer)
      float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
      float vignette = smoothstep(.1, .3, length(uv * scale * 1.5));
      uv *= 1. + scale; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
      uv *= (1. + random(float(layer)));
      uv *= scale; // then modifying the overall scale by the generated amount
      // uv += .5*float(layer);
      uv = rotate2d((u_time * .1 + (scale*2.))) * uv; // rotarting
      // uv += vec2(1.5) * float(layer) * random(float(layer+10)); // ofsetting the UV by an arbitrary amount to make the layer appear different
      
      // id = random2(floor(uv), seed);

      // render
      vec3 pass = render(uv * multiplier + colour.z, multiplier, id); // render the pass

       // this is the opacity of the layer fading in from the "bottom"
      opacity = clamp(1. + scale * 1.1, 0., 1.) - smoothstep(.5, 0.2, pass.x);
      opacity -= smoothstep(.0, .8, clamp(1. - vignette * 2. * (1. + (scale) * -1.) * pass.x, 0., 1.));
      float _opacity = opacity;

      // This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
      float endOpacity = 1.;
      endOpacity = smoothstep(0., 0.05, scale * -1.);
      opacity += endOpacity;

      return clamp(pass * _opacity * endOpacity, 0., 1.) * 2.;
    }
  
  // smooth min
  // reference: http://iquilezles.org/www/articles/smin/smin.htm
  float smin(float a, float b, float k) {
      float res = exp(-k*a) + exp(-k*b);
      return -log(res)/k;
  }

    void main() {
        vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy);

        if(u_resolution.y < u_resolution.x) {
     .........完整代码请登录后点击上方下载按钮下载查看