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

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

代码语言：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);
}

.........完整代码请登录后点击上方下载按钮下载查看