基于three.js怎么实现简易照片墙效果
导读：本文共1720.5字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 代码：<!DOCTYPEHTML><HTML><HEAD><METAcharset="utf-8"><METAname="viewport"content="width=device-width,user-scalable=no,minimum-sca... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。代码：
<!DOCTYPEHTML><HTML><HEAD><METAcharset="utf-8"><METAname="viewport"content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"><TITLE></TITLE><STYLE>html,body{height:100%;}body{background-color:#454545;margin:0;overflow:hidden;background-size:cover;}.element{width:240px;height:320px;}.elementimg{position:absolute;border:none;}</STYLE></HEAD><BODY><scriptsrc="js/jquery-3.1.1.min.js"></script><scriptsrc="js/jquery.mousewheel.min.js"></script><SCRIPTsrc="js/three.min.js"></SCRIPT><SCRIPTsrc="js/CSS3DRenderer.js"></SCRIPT><DIVid="container"></DIV><DIVid="menu"><SCRIPT>vartable=[];varcamera,scene,renderer;createImages();init();animate();functioninit(){camera=newTHREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,10000);camera.position.x=0;camera.position.y=0;camera.position.z=3000;camera.lookAt({x:0,y:0,z:0});scene=newTHREE.Scene();for(vari=0;i<table.length;i++){varelement=document.createElement('div');element.className='element';element.id='element';varphoto=document.createElement('img');photo.className='photo';photo.id=table[i][0];photo.src='images/'+table[i][0]+'?t='+Math.floor((Math.random()*100)+1);element.appendChild(photo);varobjectCSS=newTHREE.CSS3DObject(element);objectCSS.position.x=(table[i][1]*250)-1750;objectCSS.position.y=-(table[i][2]*330)+1200;objectCSS.position.z=0;scene.add(objectCSS);}renderer=newTHREE.CSS3DRenderer();renderer.setSize(window.innerWidth,window.innerHeight);renderer.domElement.style.position='absolute';document.getElementById('container').appendChild(renderer.domElement);window.addEventListener('resize',onWindowResize,false);}functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);}functionanimate(){renderer.render(scene,camera);requestAnimationFrame(animate);}$(window).mousewheel(function(event){camera.position.y-=event.deltaY*event.deltaFactor;camera.position.z=3000;vartarget=newTHREE.Vector3();var_eye=newTHREE.Vector3();_eye.subVectors(camera.position,target);camera.position.addVectors(target,_eye);camera.lookAt(_eye);});functioncreateImages(){varfiles=[{"name":"0.jpg"},{"name":"1.jpg"},{"name":"2.jpg"}];varrow=1;varcol=1;for(vari=0;i<files.length;i++){varfile=[];file[0]=files[i]['name'];file[1]=col++;file[2]=row;table[i]=file;if(col>13){col=1;row++;}}}</SCRIPT></DIV></BODY></HTML>效果图如下：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
基于three.js怎么实现简易照片墙效果的详细内容，希望对您有所帮助，信息来源于网络。