threejs实现宇宙黑洞星云旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:threejs实现宇宙黑洞星云旋转动画效果代码

代码标签: 黑洞 星云 旋转 动画 效果

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

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

#container {
  position: fixed;
}
</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">
    uniform float u_time;
  
    const float spawnrate = .01;
    const float life = 200.;
    const float fadetime = 20.;
    const int octaves = 5;
    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);
    }
  
    float random2d(vec2 uv) {
      return fract(
                sin(
                  dot( uv.xy, vec2(12.9898, 78.233) )
                ) * seed);
    }
  
  varying float v_z;
  
  float easeLinear(float time, float begin, float change, float duration)
  {
    return change * time / duration + begin;
  }
  vec2 easeLinear(float time, vec2 begin, vec2 change, float duration)
  {
    return change * time / duration + begin;
  }
      
  void main() {
    vec4 pos = vec4(position,1.0);
    float id = position.z;
    bool emitter = mod(id, 2.) == 0.;
    float rand = random(id);
    float rand1 = random(id + 1.);
    float pointsize = 100. * rand * rand1;
    
    // float spawnrate = spawnrate + (sin(u_time / 10.) + 1.) * .01;
    float time = mod(u_time - id * spawnrate, life);
    float step = time / life;
    bool alive = time >= 0.;
    
    vec2 polar = vec2(0., 0.);
    
    if(alive) {
      if(emitter) {
        // pos.xy = vec2(10. * rand);
        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10., 200.);
        polar = easeLinear(time, vec2(sin(u_time / 50.), 100. + sin(u_time / 10.) * 50.), outerPolar, life);
        // polar.x += sin(u_time / 10. * rand) + 1.;
        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);

        if(time < fadetime) {
          pointsize = easeLinear(time, 0., pointsize, fadetime);
        } else if(time > life - fadetime) {
          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
        }
        pointsize *= (sin((u_time + 100.) / 10. * rand1) + 1.);
        pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
        pos.z = 100.;
      } else {
        // pos.xy = vec2(10. * rand);
        vec2 outerPolar = vec2(30. + sin(u_time / 50.) * 10. + 3.14, 200.);
        polar = easeLinear(time, vec2(sin(u_time / 50.) + 3.14, 100. + cos(u_time / 10.) * 50.), outerPolar, life);
        // polar.x += sin(u_time / 10. * rand) + 1.;
        polar.y += (sin((u_time + 100.) / 10. * rand) + 1.) * (polar.x * 2. + 10.);

        if(time < fadetime) {
          pointsize = easeLinear(time, 0., pointsize, fadetime);
        } else if(time > life - fadetime) {
          pointsize = easeLinear(time - life + fadetime, pointsize, -pointsize, fadetime);
        }
        pointsize *= 1. - (sin((u_time + 100.) / 10. * rand1) + 1.);
        // pointsize *= cos(polar.x * 1.5 + u_time * .1) * .5 + 1.;
        pos.z = 90.;
      }
    }
    
    pos.x += cos(polar.x) * polar.y;
    pos.y += sin(polar.x) * polar.y;
    
    v_z = pos.z / 100. + polar.x / 100.;
    gl_PointSize = pointsize;

    gl_Position = projectionMatrix *
                  modelViewMatrix *
                  pos;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 u_resolution;
    uniform float u_time;
    uniform sampler2D tSprite;
  
    varying float v_z;

    vec3 hsb2rgb( in vec3 c ){
      vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                               6.0)-3.0)-1.0,
                       0.0,
                       1.0 );
      rgb = rgb*rgb*(3.0-2.0*rgb);
      return c.z * mix( vec3(1.0), rg.........完整代码请登录后点击上方下载按钮下载查看

网友评论0