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.inner.........完整代码请登录后点击上方下载按钮下载查看