three实现三维蜂窝多边形点击破碎动画效果代码-html代码-BFW代码库

three实现三维蜂窝多边形点击破碎动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现三维蜂窝多边形点击破碎动画效果代码

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

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

<style>
    body {
  margin: 0;
  width: 100%;
  height: 100%
}

canvas {
  position: fixed;
  width: 100%;
  height: 100%
}
</style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.100.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/randomColor.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script><script >
    let scene, camera, cameraCtrl, renderer;
let width = window.innerWidth,height = window.innerHeight,cx = width / 2,cy = height / 2;
let light1, light2, light3, light4;

let conf = {
  objectRadius: 2.5,
  objectDepth: 1,
  nx: Math.round(width / 20),
  ny: Math.round(height / 15),
  lookAtZ: 40 };


let meshes;
const lookAt = new THREE.Vector3(0, 0, conf.lookAtZ);

let mouseOver = false;
const mouse = new THREE.Vector2();
const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0).translate(new THREE.Vector3(0, 0, -conf.lookAtZ));
const mousePosition = new THREE.Vector3();
const raycaster = new THREE.Raycaster();

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
  camera.position.z = 75;
  cameraCtrl = new THREE.OrbitControls(camera);
  cameraCtrl.enableRotate = false;
  cameraCtrl.enableKeys = false;

  onWindowResize();
  window.addEventListener('resize', onWindowResize, false);

  initScene();

  document.addEventListener('click', initScene);
  document.addEventListener('mouseout', e => {mouseOver = false;});
  document.addEventListener('mousemove', e => {
   .........完整代码请登录后点击上方下载按钮下载查看