three水滴变换动画效果-html代码-BFW代码库

three水滴变换动画效果

代码语言：html

所属分类：动画

代码描述：three水滴变换动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
          padding: 0;
          margin: 0;
      }
</style>

</head>

<body>
<div id="container"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.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">
    #ifdef GL_ES
    precision mediump float;
    #endif

    #extension GL_OES_standard_derivatives : enable

    uniform float time;
    uniform vec2 mouse;
    uniform vec2 resolution;

    const float ZOOM = 100.0;
    const int TIMES = 5;
    const float SPEED = 10.0;
        
      float map(vec2 p) {
        return length(p) - 0.5;
      }
        
    void main( void ) {

        float dist;
        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
        float d = dot(uv,uv);
        float a = atan(uv.y,uv.x);
            // for(int i = 0; i < TIMES; i++) {
            //     dist = distance(uv.x, uv.y);
            //     uv.x = uv.x + sin(uv.y + sin(dist*0.1)) + cos(time/SPEED);
            //     uv.y = uv.y - cos(uv.x + cos(dist*0.1)) + sin(time/SPEED);
            // }
            for(int i = 0; i < TIMES; i++) {
                dist = map(uv);
                uv.x = uv.x + sin(uv.y + sin(dist*0.1))*sin(time*0.2)*2.0 + cos(time/SPEED);
                uv.y = uv.y + cos(uv.x + cos(dist*0.1))*cos(time*0.2)*2.0 + sin(time/SPEED);
            }
        uv.x = map(uv);
         uv.y = map(uv);
        uv *= d;
                
 
              .........完整代码请登录后点击上方下载按钮下载查看