three实现三维礼物箱子立方体点击爆炸碎片效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维礼物箱子立方体点击爆炸碎片效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <style>
        body {
    	margin: 0;
    	overflow: hidden;
    }
    </style>

</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.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; +.........完整代码请登录后点击上方下载按钮下载查看