three打造三维粒子合成对号效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three打造三维粒子合成对号效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script>
// Check it done
// Get early access to Check
// https://usecheck.com

let currentMousePos = new THREE.Vector2(0, 0);
let mousePos = new THREE.Vector2(0, 0);

const settings = {
  ease: 0.06,
  slowdownFactor: 300,
  boxSize: 0.15,
  color: 0x6e7bf2,
  backgroundColor: 0x000000 };


const gui = new dat.GUI({ autoPlace: false });
gui.add(settings, 'ease', 0, 0.2).step(0.01);
gui.add(settings, 'slowdownFactor', 0, 1000).step(10);
gui.
add(settings, 'boxSize', 0.05, 1).
step(0.05).
onChange(boxSize => {
  for (const vertex of geometry.vertices) {
    vertex.x = Math.sign(vertex.x) * boxSize / 2;
    vertex.y = Math.sign(vertex.y) * boxSize / 2;
    vertex.z = Math.sign(vertex.z) * boxSize / 2;
  }
  geometry.verticesNeedUpdate = true;
});
gui.addColor(settings, 'color').onChange(value => {
  material.color.set(value);
});
gui.addColor(settings, 'backgroundColor').onChange(value => {
  renderer.setClearColor(value, 1);
});

let ease = 1 + settings.ease;
let destIndex = 0;

document.addEventListener('mousemove', function (event) {
  currentMousePos = new THREE.Vector2(
  event.clientX / window.innerWidth - 0.5,
  event.clientY / window.innerHeight - 0.5);

});

document.addEventListener('touchmove', function (event) {
  currentMousePos = new THREE.Vector2(
  event.touches[0].clientX / window.innerWidth - 0.5,
  event.touches[0].clientY / window.innerHeight - 0.5);


  if (event.touches.length > 1) {
    destIndex = 1;
    ease = 1 - settings.ease;
    setTimeout(() => {
      ease = 1 + settings.ease;
    }, 200);
  } else {
    destIndex = 0;
    ease = 1 + settings.ease;
  }
});

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
95,
window.innerWidth / window.innerHeight,
0.1,
1000);

camera.position.z = 30;

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(settings.backgroundColor, 1);

const geometry = new THREE.BoxGeometry(settings.boxSize, settings.boxSize, settings.boxSize);
const material = new THREE.MeshBasicMaterial({
  transparent: true,
  color: settings.color,
  opacity: 0.5,
  side: THREE.SingleSide });

const highlight = new THREE.MeshBasicMaterial({
  transparent: true,
  color: 0xff00ff,
  opacity: 0.5,
  side: THREE.SingleSide });


const pitchSegments = 60;
const elevationSegments = pitchSegments / 2;
const particles = pitchSegments * elevationSegments;
const side = Math.pow(particles, 1 / 3);

const radius = 16;

const parentContainer = new THREE.Object3D();
scene.add(parentContainer);

function addParticle(pos, width, height) {
  const particle = new THREE.Mesh(geometry, material);

  parentContainer.add(particle);

  const dest = new THREE.Vector3();
  dest.x = pos.x / width * radius - radius / 2;
  dest.y = pos.y / width * radius - radius / 2;
  dest.z = pos.z / width * radius - radius / 2;

  particle.position.x = Math.random() * 50 - 25;
  particle.position.y = Math.random() * 50 - 25;
  particle.position.z = Math.random() * 50 - 25;
  particle.userData = {
    dests: [dest, particle.position.clone()],
    speed: new THREE.Vector3(),
    position: particle.position.clone() };

}

const img = document.createElement('img');
img.onload = () => {
  const canvas = document.createElement('canvas');
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext('2d');
  context.drawImage(img, 0, 0, width, height);
  const { data } = context.getImageData(0, 0, width, height);
  const gap = 8;
  for (let y = 0; y < height; y += gap) {
    let prev = 0;
    for (let x = 0; x < width; x += gap) {
      const next = data[(y * width + x) * 4];
      if (prev !== next) {
        for (let z = -40; z <= 40; z += gap) {
          addParticle({ x, y, z }, width, height);
          prev = next;
        }
      }
      if (next > 0) {
        addParticle({ x, y, z: 50 }, width, height);
        addParticle({ x, y, z: -50 }, width, height);
      }
    }
  }
};
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAANlBMVEUAAAD////////////////////////////////////////////////////////////////////xY8b8AAAAEXRSTlMAIN/vgBBwv0Bfz6AwkI+vUPECF7oAAAviSURBVHja7MGBAAAAAICg/akXqQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGbn3pIUhIEAijaJkCAo9P43OzXll1OKBI2TdO7ZQh79SAMAAAAAPNR1naBF83BZnN64cBlmQTP6cfH6l1/GXtCAuHh9YooC42LQLW4UGBaDvuK4BcyKQfeYKAxMult+4kBrYtAEJ4Ep3aRpzoQBQ/qrJnPsACv6k1dlB7TqtvzsgFaNXg870xquXXT6jqugZjHomwZBtbqgb/OkAbXqT/oJQVCjjdQ/EU3hGq1OP8VTCVTnde7Hq4Bh3aK/uALa9CD4Uwo2ZLhffgqBtsSgOTAiVodu0TwugvLdgn8WTlC81Wk+9INLNz8I/tQBzeivmtckKNjgNbOzoFgxaHZeUKintz9ZYBMGr1/BvwOKFIN+ySoozq7bn6kQs7ZufzaAedsDn2wA414PfJIDWBad7sGDsE07X30pA40avH4fY4Gl2P3sRyvYoqTkj6lAcxKTPz4NsCWx80cRYMzqNQE5oDGJnT9SAGOO1H40gs1IPv5EAFOOHX9GQo04ePyZBzPi2PEnBTRi/vfj/8Pe3eXGDsIAFFabv3sn0xl5/5vtAiqBnYdAT8+3BQuwjRPcAEZaYzwzgGGejxjP/8RVwE5/rwFqYMm/GWAFc/n7v/As5vL3GjAJuvz9L0ASdfmbACZx7v2N/3DbGbNw/09CTP39sJj/5UCm/nw1cAJTtH79NWQFs/iLwy/BkpDFn6/HJzGLP98NT2Jmf4vhH+E5SfG3rM7/jrDHFAx/HjD7M/x5xN7fl+EfY47s77DvN8bHFL2.........完整代码请登录后点击上方下载按钮下载查看