three实现流场动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现流场动画效果代码,结合SimplexNoise插件,实现磁场运动动画。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: GOSTAi; src: url("//repo.bfw.wiki/bfwrepo/font/GOSTtypeAitalic.ttf") format("truetype"); } * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: teal; } canvas{ background-color: navy; position: absolute; left: calc(50% - 300px - 2vh); top: calc(50% - 400px - 2vh); border: 2vh solid aqua; border-radius: 100px; } #line1{ top: calc(50% - 440px); text-align: left; } #line2{ bottom: calc(50% - 430px); text-align: right; padding-right: 5vh; } .writing{ position: absolute; width: 600px; left:calc(50% - 300px); font-family: GOSTAi; -webkit-text-fill-color: white; font-size: 250px; pointer-events: none; mix-blend-mode: difference; } .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body > <canvas id="cnv" width="600" height="800"></canvas> <div class="writing unselectable" id="line1">flow</div> <div class="writing unselectable" id="line2">field</div> <script type="module"> import { Vector2, Color, Clock } from "//repo.bfw.wiki/bfwrepo/js/module/three/build/156/three.module.js"; import { SimplexNoise } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/156/jsm/math/SimplexNoise.js"; console.clear(); let simplex = new SimplexNoise(); const canvas = cnv; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.strokeStyle = "white"; ctx.lineCap = "round"; //ctx.globalCompositeOperation = "lighter"; class Particle extends Vector2 { constructor(renderer) { super(); this.renderer = renderer; this.random().multiply(renderer.size).floor(); this.speed = new Vector2(); this.speedModifier = Math.floor(Math.random() * 3 + 1); this.history = [{ x: this.x, y: this.y }]; this.historyLimit = Math.floor(Math.random() * 200 + 10); this.angle = 0; this.time = this.historyLimit; this.lineWidth = Math.random() * 4 + 1; let c = new Color().lerpColors(renderer.colorSet[0], renderer.colorSet[1], 1 / this.lineWidth).multiplyScalar(255); this.strokeStyle = `rgba(${Math.floor(c.r)}, ${Math.floor(c.g)}, ${Math.floor(c.b)}, ${1 / this.lineWidth})`; } draw(ctx) { ctx.lineWidth = this.lineWidth * 4; ctx.strokeStyle = this.st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0