three实现天空鸟群飞翔鼠标交互背景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three实现天空鸟群飞翔鼠标交互背景动画效果代码，鸟儿成群结队在空中飞行，鼠标放上去还会故意躲避鼠标。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}
body {
  font-family: "Asap", sans-serif;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
  background: linear-gradient(
    to bottom,
    hsl(200deg, 80%, 55%),
    hsl(200deg, 80%, 80%),
    hsl(200deg, 80%, 80%),
    hsl(230deg, 80%, 80%),
    hsl(260deg, 80%, 80%),
    hsl(290deg, 80%, 80%),
    hsl(320deg, 80%, 80%),
    hsl(340deg, 80%, 80%),
    hsl(340deg, 80%, 70%) 100%
  );
  color: white;
  font-size: clamp(13px, 5.5vw, 30px);
}
#cloud div::before,
#cloud div::after {
  content: "";
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-image: url(https://raw.githubusercontent.com/happy358/misc/main/image/cloud_X.png);

  background-repeat: repeat-x;
  -webkit-animation: cloud var(--duration) linear infinite forwards;
          animation: cloud var(--duration) linear infinite forwards;

  --posX: right;
  --duration: 15s;
  --lowHeight: 20vh;
  --highHeight: 90vh;
  --layerNum: 4;
  --index: 0;
  --opacity: 0.5;
  --moveX: 300px;

  -webkit-animation-delay: calc(
    (var(--duration) / var(--layerNum)) * var(--index) * -1
  );

          animation-delay: calc(
    (var(--duration) / var(--layerNum)) * var(--index) * -1
  );
  opacity: 0;
}
#cloud div::before {
  --index: 0;
  /*
  --posX: right;
*/
}
#cloud div::after {
  --index: 2;
  /*
  --posX: left;
*/
  transform: scale3d(-1, 1, 1); /*左右反転*/
}
#cloud div#cloud_layer2::before,
#cloud div#cloud_layer2::after {
  background-image: url(https://raw.githubusercontent.com/happy358/misc/main/image/cloud.png);
}
#cloud div#cloud_layer2::before {
  --index: 3;
}
#cloud div#cloud_layer2::after {
  --index: 1;
}
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
main {
  position: relative;
  mix-blend-mode: overlay;
}
section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrows {
  width: 60px;
  height: 75px;
  position: absolute;
  bottom: 0;
  transform: scale3d(0.5, 0.5, 1);
}
.arrows path {
  stroke: black;
  fill: transparent;
  stroke-width: 5px;
  -webkit-animation: arrow 2s infinite;
          animation: arrow 2s infinite;
}
@-webkit-keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.arrows path.a1 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.arrows path.a2 {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.arrows path.a3 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes cloud {
  0% {
    opacity: 0;
    background-position: var(--posX) var(--moveX) bottom
      calc(-1 * var(--lowHeight));
    background-size: calc(1 * var(--lowHeight)) var(--lowHeight);
  }
  5% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: var(--posX) bottom;
    background-size: calc(3 * var(--highHeight)) var(--highHeight);
  }
}

@keyframes cloud {
  0% {
    opacity: 0;
    background-position: var(--posX) var(--moveX) bottom
      calc(-1 * var(--lowHeight));
    background-size: calc(1 * var(--lowHeight)) var(--lowHeight);
  }
  5% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: var(--posX) bottom;
    background-size: calc(3 * var(--highHeight)) var(--highHeight);
  }
}
</style>

  
</head>

<body translate="no">

<canvas id='canvas'></canvas>
<div id='cloud'>
  <div id='cloud_layer1'></div>
  <div id='cloud_layer2'></div>
</div>
<main>
  <section>
    <div>
      <h1>Sky and Birds</h1>
      <p>Background</p>

    </div>
    <svg class="arrows">
      <path class="a1" d="M0 0 L30 32 L60 0"></path>
      <path class="a2" d="M0 20 L30 52 L60 20"></path>
      <path class="a3" d="M0 40 L30 72 L60 40"></path>
    </svg>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section><svg class="arrows">
      <path class="a1" d="M0 0 L30 32 L60 0"></path>
      <path class="a2" d="M0 20 L30 52 L60 20"></path>
      <path class="a3" d="M0 40 L30 72 L60 40"></path>
    </svg>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section>
    <div>
      <p>Fin.</p>
    </div>
  </section>
</main>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script>

    <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/162/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/162/jsm/"
    }
  }
</script>
      <script  type="module">

"use strict";

import * as THREE from "three";

import { GPUComputationRenderer as e } from "three/addons/misc/GPUComputationRenderer.js";

!function () {
  function n() {
    h = window.innerWidth / 2,
    y = window.innerHeight / 2,
    u.aspect = window.innerWidth / window.innerHeight,
    u.updateProjectionMatrix(),
    m.setSize(window.innerWidth, window.innerHeight);
  }
  function t(e) {
    !1 !== e.isPrimary && (v = e.clientX - h, p = e.clientY - y);
  }
  const o = {
    color1: "turquoise",
    color2: "#aaaaaa",
    colorMode: "lerpGradient",
    alphaBackground: !0,
    separation: 21,
    alignment: 20,
    cohesion: 20,
    freedom: 0.75,
    speedLimit: 10,
    birdSize: 1,
    wingSpan: 20,
    numRatio: 0.3 };

  o.color1 = o.color1 || "red",
  o.color2 = o.color2 || "#aaaaaa",
  o.colorMode = o.colorMode || "varianceGradient",
  o.alphaBackground = o.alphaBackground || !1,
  o.bgColor = o.bgColor || "white",
  o.separation = o.separation || 20,
  o.alignment = o.alignment || 20,
  o.cohesion = o.cohesion || 20,
  o.freedom = o.freedom || 0.75,
  o.speedLimit = o.speedLimit || 10,
  o.birdSize = o.birdSize || 1,
  o.wingSpan = o.wingSpan || 20,
  o.numRatio = o.numRatio || 1;
  const i = 32,
  a = Math.round(i * i * o.numRatio),
  r =
  "uniform float time;\nuniform float delta;\n\nvoid main() {\n\n  vec2 uv = gl_FragCoord.xy / resolution.xy;\n  vec4 tmpPos = texture2D( texturePosition, uv );\n  vec3 position = tmpPos.xyz;\n  vec3 velocity = texture2D( textureVelocity, uv ).xyz;\n\n  float phase = tmpPos.w;\n\n  phase = mod( ( phase + delta +\n    length( velocity.xz ) * delta * 3. +\n    max( velocity.y, 0.0 ) * delta * 6. ), 62.83 );\n\n  gl_FragColor = vec4( position + velocity * delta * 15. , phase );\n\n}",
  l =
  "uniform float time;\nuniform float testing;\nuniform float delta; // about 0.016\nuniform float separationDistance; // 20\nuniform float alignmentDistance; // 40\nuniform float cohesionDistance;\nuniform float speedLimit;\nuniform float freedomFactor;\nuniform vec3 predator;\n\nconst float width = resolution.x;\nconst float height = resolution.y;\n\nconst float PI = 3.141592653589793;\nconst float PI_2 = PI * 2.0;\n// const float VISION = PI * 0.55;\n\nfloat zoneRadius = 40.0;\nfloat zoneRadiusSquared = 1600.0;\n\nfloat separationThresh = 0.45;\nfloat alignmentThresh = 0.65;\n\nconst float UPPER_BOUNDS = BOUNDS;\nconst float LOWER_BOUNDS = -UPPER_BOUNDS;\n\nfloat rand(vec2 co){\n  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvoid main() {\n\n  zoneRadius = separationDistance + alignmentDistance + cohesionDistance;\n  separationThresh = separationDistance / zoneRadius;\n  alignmentThresh = ( separationDistance + alignmentDistance ) / zoneRadius;\n  zoneRadiusSquared = zoneRadius * zoneRadius;\n\n\n  vec2 uv = gl_FragCoord.xy / resolution.xy;\n  vec3 birdPosition, birdVelocity;\n\n  vec3 selfPosition = texture2D( texturePosition, uv ).xyz;\n  vec3 selfVelocity = texture2D( textureVelocity, uv ).xyz;\n\n  float dist;\n  vec3 dir; // direction\n  float distSquared;\n\n  float separationSquared = separationDistance * separationDistance;\n  float cohesionSquared = cohesionDistance * cohesionDistance;\n\n  float f;\n  float percent;\n\n  vec3 velocity = selfVelocity;\n\n  float limit = speedLimit;\n  \n  dir = predator * UPPER_BOUNDS - selfPosition;\n  dir.z = 0.;\n  // dir.z *= 0.6;\n  dist = length( dir );\n  distSquared = dist * dist;\n\n  float preyRadius = 150.0;\n  float preyRadiusSq = preyRadius * preyRadius;\n\n  // move birds away from predator\n  if (dist < preyRadius) {\n\n    f = ( distSquared / preyRadiusSq - 1.0 ) * delta * 100.;\n    velocity += normalize( dir ) * f;\n    limit += 5.0;\n  }\n\n  // if (testing == 0.0) {}\n  // if ( rand.........完整代码请登录后点击上方下载按钮下载查看