three打造3d礼盒礼物点击破碎效果-html代码-BFW代码库

代码语言：html

所属分类：三维

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

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

<style>
body {
	margin: 0;
	overflow: hidden;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script >
window.addEventListener("DOMContentLoaded", app);

function app() {
  var scene,
  camera,
  renderer,
  present,
  raycaster = new THREE.Raycaster(),
  intersects,
  pointer = new THREE.Vector2(),

  init = () => {
    // setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xf98686));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    // present
    present = new Present(12, 7);
    scene.add(present.mesh);

    // ambient light
    let ambientLight = new THREE.AmbientLight(0xffffff);
    ambientLight.name = "Ambient Light";
    scene.add(ambientLight);

    // directional light
    let directionLight = new THREE.DirectionalLight(0xffffff, 0.7);
    directionLight.name = "Directional Light";
    directionLight.position.set(10, 20, 0);
    directionLight.castShadow = true;
    directionLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
    scene.add(directionLight);

    // camera
    camera.position.set(30, 30, 30);
    camera.lookAt(scene.position);

    // render
    document.body.appendChild(renderer.domElement);
    renderScene();
  },
  renderScene = () => {
    if (present)
    present.openLoop();

    renderer.render(scene, camera);
    requestAnimationFrame(renderScene);
  },
  adjustWindow = () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  },
  updateRaycaster = e => {
    pointer.x = e.clientX / window.innerWidth * 2 - 1;
    pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(pointer, camera);
    intersects = raycaster.intersectObjects(present.mesh.children, true);
    intersects = intersects.filter(
    child => child.object.type == "Mesh");

  },
  presentActive = e => {
    if (present && (intersects.length || e.keyCode == 32))
    present.open();
  },
  presentHover = e => {
    updateRaycaster(e);
    renderer.domElement.style.cursor = intersects.length ? "pointer" : "default";
  };

  init();
  window.addEventListener("resize", adjustWindow);
  document.addEventListener("click", presentActive);
  window.addEventListener("keydown", presentActive);
  window.addEventListener("mousemove", presentHover, false);
}

class Present {
  constructor(sideWidth = 7, divisions = 5) {
    this.sideWidth = sideWidth;
    this.divisions = divisions;
    this.effectFadeSpeed = 0.02;
    this.effectMoveSpeed = 0.8;
    this.effectRotateSpeed = 0.1;
    this.openSpeed = 4;
    this.openTime = 0;
    this.timeToOpen = 120;
    this.opacity = 1;
    this.opening = false;
    this.opened = false;
    this.wireframe = false;
    this.pieces = [];

    this.materials = [
    // wrapping
    new THREE.MeshStandardMaterial({
      color: 0x123a99,
      side: THREE.DoubleSide,
      transparent: true,
      wireframe: this.wireframe }),

    // ribbon
    new THREE.MeshStandardMaterial({
      color: 0xff1c54,
      side: THREE.DoubleSide,
      transparent: true,
      wireframe: this.wireframe }),

    // bow
    new THREE.MeshStandardMaterial({
      color: 0xff1c54,
      transparent: true,
      wireframe: this.wireframe })];


    this.mesh = new THREE.Object3D();
    this.mesh.name = "Present";

    let getTails = () => Math.random() < 0.5,
    randDecimal = (min, max) => Math.random() * (max - min) + min,
    S = this.sideWidth,
    HS = S / 2,
    fracS = S / divisions,
    fracHS = fracS / 2,
    HD = divisions / 2,

    pieceGeo = new THREE.PlaneBufferGeometry(fracS, fracS),

    wrappingMat = this.materials[0],
    wrappingPiece = new THREE.Mesh(pieceGeo, wrappingMat),

    ribbonMat = this.materials[1],
    ribbonPiece = new THREE.Mesh(pieceGeo, ribbonMat);

    wrappingPiece.receiveShadow = true;
    ribbonPiece.receiveShadow = true;

    for (let s = 0; s < 6; ++s) {
      // place sides
      let side = new THREE.Object3D();
      switch (s) {
        // bottom
        case 0:
          side.position.set(0, -HS, 0);
          side.rotation.x = Math.PI / 2;
          break;
        // back
        case 1:
          si.........完整代码请登录后点击上方下载按钮下载查看