three实现三维粒子点发射粒子动画效果代码-html代码-BFW代码库

three实现三维粒子点发射粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：three实现三维粒子点发射粒子动画效果代码

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

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

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

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

#fs{
  position: absolute;
  margin: 10px;
  width: 32px;
  height: 32px;
  border: 2px dashed darkgreen;
}
</style>

  
  
  
</head>

<body>
    <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>
<div id="fs"></div>
  
      <script id="rendered-js" type="module">
import { Vector2 as vec2, MathUtils as mu, Clock } from "three";

console.clear();

fs.addEventListener("pointerdown", () => {
  if(!document.fullscreenElement){
    document.documentElement.requestFullscreen();
    fs.style.borderColor = "lightgreen";
  }else{
    document.exitFullscreen();
    fs.style.borderColor = "darkgreen";
  }
});

// load fonts
await (async function () {
  async function loadFont(fontface) {
    await fontface.load();
    document.fonts.add(fontface);
  }
  let fonts = [
    new FontFace(
      "Goldman",
      "url(https://fonts.gstatic.com/s/goldman/v19/pe0rMIWbN4JFplR2FI5XEtCaBg.woff2) format('woff2')"
    )
  ];
  for (let font in fonts) {
    await loadFont(fonts[font]);
  }
})();

let baseColor = "darkgreen";

class Boxes {
  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,
        size: 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 + 100;
      item.size = Math.random() * 5 + 1;
    });
  }
  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);
      item.pos.x *= ur;

      let a =
        mu.smoothstep(i.........完整代码请登录后点击上方下载按钮下载查看