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: #202;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

  
  
</head>

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

<canvas id="cnv"></canvas>
  
      <script  type="module">
import { Vector2 as vec2, MathUtils as mu, Clock } from "three";

console.clear();

class Particles {
  constructor() {
    this.maxDistance = 50;
    this.minDistance = 10;
    this.distanceWidth = this.maxDistance - this.minDistance;
    this.items = Array.from({ length: 200 }, () => {return {
        pos: new vec2(),
        dir: new vec2(),
        currDist: 0,
        fill: false,
        color: 0 };
    });

    this.init();
  }
  init() {
    this.items.forEach(item => {
      this.setRandDir(item.dir);
      item.currDist = Math.random();
      item.fill = Math.random() < 0.5;
      item.color = Math.random() * 40 + 300;
      item.radius = Math.random() * 2.5 + 0.5;
    });
  }
  setRandDir(v) {
    let a = Math.PI * 2 * Math.random();
    v.set(Math.cos(a), Math.sin(a));
  }
  draw(t) {
    this.items.forEach(item => {
      item.currDist += t;
      if (item.currDist > 1) {
        item.currDist %= 1;
        this.setRandDir(item.dir);
      }
      let currDist = item.currDist * this.distanceWidth;
      item.pos.copy(item.dir).setLength(currDist + this.minDistance);

      let a = mu.smoothstep(currDist, 0, 5) - mu.smoothstep(currDist, this.distanceWidth - 20, this.distanceWidth);
      ctx.fillStyle = `hsla(${item.color}, 100%, 50%, ${a})`;
      ctx.strokeStyle = `hsla(${item.color}, 100%, 75%, ${a})`;
      ctx.lineWidth = u(0.25);
      ctx.beginPath();
      ctx.arc(u(item.pos.x), u(item.pos.y), u(item.radius), 0, Math.PI * 2);
      if (item.fill) {ctx.fill();}
      ctx.stroke();
    });
  }}


class Face {
  constructor() {
    this.colors = ["#08f", "#f20", "#864"];
    this.lineWidth = 1.5;

    this.glassPosition = new vec2();
  }

  draw() {
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    let s = 1;
    // glasses
    this.glassesContour(22, 20, 25, this.lineWidth, this.colors[0], true);
    this.glassesContour(22, 20, 25, this.lineWidth * 0.25, "#aff");

    // lips
    let gp = this.glassPosition;
    ctx.lineWidth = u(this.lineWidth);
    gp.set(0, 28);
    this..........完整代码请登录后点击上方下载按钮下载查看