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

来源：互联网发布：电脑网络适配怎么修复编辑：程序博客网时间：2024/05/16 05:44

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

<script type="text/javascript" src="three.min.js"></script>

添加事件需要引入RayCaster的js

window.onload=function(){initTwModel();}var dom_intersected,dom_oriColor;function initTwModel(){//Paramsvar layerNum=5;//层数var layerHeight=30;//层高var layerGaps=5;//间隔var areaNum=4;//面数var WIDTH = 400,HEIGHT = 300;var VIEW_ANGLE = 24,//25ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 10000;/* 初始化 */var scene = new THREE.Scene();varrenderer = 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);/*相机*/varcamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0,80, 600);//(0,0, 600)camera.rotation.x=-0.3;//-0.2scene.add(camera);/* 显示对象 */var verlen,cbarr=[];for(var i=0;i<layerNum;i++){var oriy=i*(-layerHeight-layerGaps);var lenxa=Math.abs(oriy);var lenxb=Math.abs(-oriy+layerHeight);var cylinder = new THREE.CylinderGeometry(lenxa,lenxb,layerHeight,areaNum,1,false,0,Math.PI*2);var material = new THREE.MeshLambertMaterial({color:getRenderColoe(i)});var mesh = new THREE.Mesh(cylinder,material);mesh.position.set(0,oriy,0);mesh.rotation.set(0,-8,0);mesh.castShadow=true;scene.add(mesh);//if(i==0)cbarr.push(mesh);}/*init animation*/if(cbarr.length>0){(function anime(){for(var j=0;j<cbarr.length;j++){cbarr[j].rotation.y += 0.01;}renderer.render(scene, camera);return requestAnimationFrame(anime);})()}//init Eventsvar raycaster = new THREE.RayCaster();var mouse = new THREE.Vector2();renderer.domElement.addEventListener("mousemove",mousemove);function mousemove(e){mouse.x = (e.clientX-12) / renderer.domElement.clientWidth*2-1;mouse.y = -((e.clientY-12) / renderer.domElement.clientHeight*2)+1;raycaster.setFromCamera(mouse,camera);var intersects = raycaster.intersectObjects(scene.children);var ndom_intersected,ndom_oriColor;if(intersects.length){    ndom_intersected = intersects[0].object;ndom_oriColor = ndom_intersected.material.color.getHex();ndom_intersected.material.color.set(0xfffafa);if(dom_intersected!=ndom_intersected){if(dom_intersected)dom_intersected.material.color.set(dom_oriColor);dom_intersected=ndom_intersected;dom_oriColor=ndom_oriColor;}}else{if(dom_intersected){dom_intersected.material.color.set(dom_oriColor);dom_intersected=null;}}}//init texts}function getRenderColoe(ind){var renderColors=[0xFFFF00,0xFE6161,0x92D050,0x00B0F0,0xFFFFCC,0xE2C6FD];if(ind<renderColors.length) return renderColors[ind];return renderColors[ind%renderColors.length];}

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

阅读全文

0 0