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 => {
    const v = new THREE.Vector3();
    camera.getWorldDirection(v);
    v.normalize();
    mousePlane.normal = v;

    mouseOver = true;
    mouse.x = e.clientX / width * 2 - 1;
    mouse.y = -(e.clientY / height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    raycaster.ray.intersectPlane(mousePlane, mousePosition);
  });

  animate();
};

function initScene() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  initLights();

  meshes = [];
  let mat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.4, metalness: 0.9 });
  let geo = polygonGeometry(6, 0, 0, conf.objectRadius, 0);;
  let mesh;
  const dx = Math.cos(Math.PI / 6) * conf.objectRadius * 2;
  const dy = conf.objectRadius * 1.5;
  for (let j = 0; j < conf.ny; j++) {
    for (let i = 0; i < conf.nx; i++) {
      mesh = new THREE.Mesh(geo, mat);
      mesh.position.x = (-conf.nx / 2 + i) * dx + j % 2 / 2 * dx;
      mesh.position.y = (-conf.ny / 2 + j) * dy;
      mesh.position.z = -200 - rnd(50);
      mesh.rotation.x = r.........完整代码请登录后点击上方下载按钮下载查看