Three.js实现的网站页面金字塔模型显示

首先就是引入three.js，https://github.com/mrdoob/three.js/下载最新的代码，编译好的three.min.js在build下

 

添加事件需要引入RayCaster的js

 

 

			window.onload=function(){
				initTwModel();
			}
			var dom_intersected,dom_oriColor;
			function initTwModel(){
				//Params
				var layerNum=5;//层数
				var layerHeight=30;//层高
				var layerGaps=5;//间隔
				var areaNum=4;//面数
				
				var WIDTH = 400,HEIGHT = 300;
				
				var VIEW_ANGLE = 24,//25
					ASPECT = WIDTH / HEIGHT,
					NEAR = 0.1,
					FAR = 10000;
					
				/* 初始化 */
				var scene = new THREE.Scene();
				var	renderer = new THREE.WebGLRenderer({ alpha: true , antialias: true});
				renderer.shadowMapType=THREE.PCFSoftShadowMap;
				renderer.setSize(WIDTH , HEIGHT);
				document.getElementById("mainCvshd").appendChild(renderer.domElement);
				/* 灯光 */
				var ambientLight=new THREE.AmbientLight("#050505");
				scene.add(ambientLight);
				var spotLight=new THREE.SpotLight(0xffffff);
				spotLight.position.set(100,300,400);
				spotLight.castShadow=true;
				scene.add(spotLight);
				/*相机*/
				var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
				camera.position.set(0,80, 600);//(0,0, 600)
				camera.rotation.x=-0.3;//-0.2
				scene.add(camera);
				/* 显示对象 */
				var verlen,cbarr=[];
				for(var i=0;i0){
					(function anime(){
						for(var j=0;j

完整的测试代码：https://pan.baidu.com/s/1eSOZwh8