three+webgl实现一个彩虹飘飘动画效果代码-html代码-BFW代码库

three+webgl实现一个彩虹飘飘动画效果代码

代码语言：html

所属分类：动画

代码描述：three+webgl实现一个彩虹飘飘动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

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


</head>

<body >
  <div id="container"></div>

<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">

  #ifdef GL_ES
  precision mediump float;
  #endif
  #define PI 3.14159265359

  uniform float u_time;
  uniform vec2 u_resolution;

  float V(float v) {
    return v/255.0;
  }

  float sharpRainbow(float y, vec2 st, float offset, float width) {

    float edge = y-(offset*width);
    return step(edge-width, st.y) - step(edge, st.y);
  }

  void main() {

    //original 1978 colors
    //https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)
    vec3 pink   = vec3(V(255.0),    V(105.0),   V(180.0));
    vec3 red    = vec3(V(255.0),    0.0,        0.0);
    vec3 orange = vec3(V(255.0),    V(142.0),   0.0);
    vec3 yellow = vec3(V(255.0),    V(255.0),   0.0);
    vec3 green  = vec3(0.0,         V(142.0),   0.0);
    vec3 turq   = vec3(0.0,         V(192.0),   V(192.0));
    vec3 indigo = vec3(V(64.0),     0.0,        V(152.0));
    vec3 violet = vec3(V(142.0),    0.0,        V(142.0));

    vec2 st = gl_FragCoord.xy / u_resolution;

    float width = (1.0/20.0);
    float y = 0.5 + (8.0*width/2.0) + sin(u_time+st.x*PI)*sin(u_time*1.5)*0.25;

    vec3 color = mix(pink, violet, (1.0 + sin(u_time))/2.0);
    color = mix(color, pink,    sharpRainbow(y, st, 0.0, width));
    color = mix(color, red,     sharpRainbow(y, st, 1.0, width));
    color = mix(color, orange,  sharpRainbow(y, st, 2.0, width));
    color = mix(color, yellow,  sharpRainbow(y, st, 3.0, width));
    color = mix(color, green,   sharpRainbow(y, st, 4.0, width));
    color = mix(color, turq,    sharpRainbow(y, st, 5.0, width));
    color = mix(co.........完整代码请登录后点击上方下载按钮下载查看