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

three打造三维粒子合成对号效果

代码语言：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');.........完整代码请登录后点击上方下载按钮下载查看