three实现天空鸟群飞翔鼠标交互背景动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现天空鸟群飞翔鼠标交互背景动画效果代码,鸟儿成群结队在空中飞行,鼠标放上去还会故意躲避鼠标。
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0