three实现科技风格圈圈嵌套线条动画效果代码-html代码-BFW代码库

three实现科技风格圈圈嵌套线条动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现科技风格圈圈嵌套线条动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
<style>
body{
  overflow: hidden;
  margin: 0;
  background-color: black;
}
canvas{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}
</style>

  
</head>

<body translate="no">
  <canvas id="cnv"></canvas>
  
      <script type="module">
import { Vector2, Clock, Path } from "//repo.bfw.wiki/bfwrepo/js/module/three/build/158/three.module.js";

console.clear();

class Alphabet {
  constructor() {
    this.letters = {
      a: [
      new Path()],

      c: null,
      r: null,
      s: null };

  }}


let unit = val => Math.min(innerHeight, innerWidth) * 0.01 * val;

let c = cnv;
let $ = c.getContext("2d");
let center = new Vector2();

function resize() {
  c.height = unit(95);
  c.width = c.height * 0.75;
  center.x = unit(95 * 0.5);
  center.y = unit(95 * 0.5);
}
resize();

window.addEventListener("resize", event => {
  resize();
});

let arcs = new Array(35).fill().map((p, pIdx) => {
  let rand = Math.random() < 0.25;
  let outer = rand == false ? rand : Math.random() < 0.5;
  let width = 2;
  return {
    radius: 15 + width * pIdx,
    angle: (outer ? 1 : Math.floor(Math.random() * 1) + 2) * Math.PI * 0.5,
    phase: (Math.random() - 0.5) * Math.PI * 2,
    speed: (Math.random() * 3 + 1) * 0.1,
    width: width * (outer ? 0.5 : 1),
    color: rand ? "#a00" : "black",
    outer: outer };

});
console.log(arcs);

let arcsBounded .........完整代码请登录后点击上方下载按钮下载查看