基于three.js实现简易照片墙效果

第基于three.js实现简易照片墙效果学习three.js的过程中，写的一个简易照片墙，可以使用鼠标滚轮上下浏览，采用的是移动相机的方式。

代码贴出来，供学习这一块的朋友们参考和指导：

!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;itable.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;ifiles.length;i++)

{

varfile=[];

file[0]=files[i]['name'];

file[1]=col++;

file[2]=row;

table[i]=file;

if(col13)