three实现canvas阴阳八卦图旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现canvas阴阳八卦图旋转动画效果代码
代码标签: three canvas 阴阳 八卦 图 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin: 0; background-color: #600; } canvas { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); /*border: 1px solid red;*/ } </style> </head> <body> <canvas id="cnv"></canvas> <script type="module"> import { Vector2, Clock, MathUtils } from "//repo.bfw.wiki/bfwrepo/js/module/three/build/157/three.module.js"; console.clear(); let unit = n => { return n * c.width * 0.005; }; class Petal { constructor(params) { this.angularSize = params.angularSize; this.angularPos = params.angularPos; this.angularSpeed = params.angularSpeed; this.width = params.width; this.borderThickiness = params.thickness; this.border = params.border; this.color = params.color; this.distance = params.distance; this.mediators = { v: new Vector2(), c: new Vector2() }; } draw($) { let m = this.mediators; let v = m.v; let c = m.c; //$.save(); $.lineWidth = this.borderThickness; $.strokeStyle = this.border; $.fillStyle = this.color; $.lineCap = "round"; $.lineJoin = "round"; $.beginPath(); let rMax = Math.min( unit(90), Math.max(unit(50), this.distance + this.width * 0.5)); let rMin = Math.min( unit(90), Math.max(unit(50), this.distance - this.width * 0.5)); v.set(rMax, 0).rotateAround(c, -this.angularSize * 0.5 + this.angularPos); //console.log(v); $.moveTo(v.x, v.y); $.arc( 0, 0, rMax, -this.angularSize * 0.5 + this.angularPos, this.angularSize * 0.5 + this.angularPos); $.arc( 0, 0, rMin, this.angularSize * 0.5 + this.angularPos, -this.angularSize * 0.5 + this.angularPos, true); $.lineTo(v.x, v.y); $.fill(); $.stroke(); //$.restore(); }} class Flower { constructor(amount) { this.amount = amount; this.petals = []; this.petalsIndex = []; this.init(); } init() { for (let i = 0; i < this.amount; i++) { let petal = new Petal({ angularSize: (Math.random() * 0.5 + 0.5) * Math.PI / 3, angularPos: Math.random() * Math.PI * 2, angularSpeed: (Math.random() * 0.5 + 0.5) * Math.sign(Math.random() - 0.5) * Math.PI * 0.1, width: unit((Math.random() * 0.5 + 0.5) * 20), borderThickiness: unit(1), border: "#f00", color: Math.random() < 0.5 ? "#faa" : "#f44", distance: unit(Math.random() * 87) }); this.petals.push(petal); this.petalsIndex.push(i); } } update($, t) { this.petalsIndex.forEach(idx => { let petal = this.petals[idx]; petal.distance = (petal.distance + t * unit(20)) % unit(100); petal.angularPos += petal.angularSpeed * t; petal.draw($); }); }} class Display { constructor() { this.size = 64; this.elements = []; this.el.........完整代码请登录后点击上方下载按钮下载查看
网友评论0