three+gsap实现一个可调节参数的旋涡动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three+gsap实现一个可调节参数的旋涡动画效果代码，可调节速度及密度大小。

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

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

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - THREE.js Zigzag Swirl</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  margin: 0;
}
*:focus {
  outline: 2px solid #fff;
}

body {
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  
}

body[tabindex]:focus {
  outline: none;
}

canvas 
  position: fixed;
  display: block;
  width: 100vw;
  height: 100vh;
}

/* simple type scale */
h1 {font-size: 1.383rem;}
h2 {font-size: 1.296rem;}
h3 {font-size: 1.215rem;}
h4 {font-size: 1.138rem;}
h5 {font-size: 1.067rem;}
small, .text--small {font-size: 0.937rem;}

/*

.ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.8);
  padding: 1rem;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  opacity: 0;
  transition: 200ms opacity;
}

body:active, body:hover .ui {
  opacity: 1;
}

.ui h1 {
  flex-basis: 100%;
}
.field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #000;
  border-radius: .25rem;
  padding: .25rem;
}

.ui label {
  font-size: 0.937rem;
  display: block;
}

.ui button {
  background: transparent;
  border: 1px solid deeppink;
  border-radius: .25rem;
  padding: .25rem;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.ui button:active {
  background: deeppink;
}

*/
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <canvas id="canvas"></canvas>

<script type="vert">
  
  uniform float time;
  uniform vec2 resolution;

  void main() {
    // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
    gl_Position = vec4(position, 1.0);
  }
  
</script>
<script type="frag">

  uniform float time;
  uniform float swirlIntensity;
  uniform vec2 resolution;

  // cosine based palette, 4 vec3 params, by IQ
  // https://iquilezles.org/www/articles/palettes/palettes.htm
  vec3 palette(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
  {
    return a + b*cos( 6.28318*(c*t+d) );
  }

  // also by IQ
  vec3 twilight(in float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(2.0, 1.0, 0.0);
    vec3 d = vec3(0.50, 0.20, 0.25);
    return palette(t, a, b, c, d);
  }

  float sincos(in vec2 p) {
    return sin(p.x) * cos(p.y);
  }

  vec3 makeSwirl(in vec2 p0) {
    float a = atan(p0.y, p0.x);
    float len = length(p0);
    float l = log(len) - time * .4;
    float zigzag = sin(time * .5 + a * 10. + l * 20.);
    float swirl = sin(-time * .5 + a * 4. + l * 10. + zigzag);
    float bg = .5 + .5 * sincos(p0 - l * 2.);
    float blur = .2 + max(0., .5 - len);
    return twilight(time * .1 + l * .2) * vec3(bg) * .5 + .5 * smoothstep(0., blur, swirl) * .01 * swirlIntensity;
  }

  void main() {
    vec2 p = 2. * gl_FragCoord.xy / resolution - 1.;
    float aspect = resolution.x / resolution.y;
    p.x *= aspect;
    vec3 color = makeSwirl(p);
    gl_FragColor = vec4(color, 1.);
  }
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js".........完整代码请登录后点击上方下载按钮下载查看