




下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第基于three.js實現(xiàn)簡易照片墻效果學習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)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 哲學與現(xiàn)代探索
- 春節(jié)營銷藝術設計
- 傳媒實踐與創(chuàng)新
- 黑龍江省應急通信網絡基礎建設規(guī)范第1部分總規(guī)范
- 2025雇傭合同書范本下載
- 政治●天津卷丨2023年天津市普通高中學業(yè)水平選擇性考試政治試卷及答案
- 物業(yè)7S管理培訓
- java筆試題及答案
- 2025設備租賃合同范本標準版
- 推測試題及答案
- 2024年化學水處理工(技師)技能鑒定理論考試題庫(含答案)
- 貴州省貴陽市2024年小升初語文模擬考試試卷(含答案)
- 湖北省隨州市隨縣2023-2024學年七年級下學期語文期末考試卷
- 2024年中國城建圍擋板市場調查研究報告
- 北京市海淀區(qū)101中學2025屆數學八年級第一學期期末統(tǒng)考試題含解析
- 重慶市渝中區(qū)巴蜀小學校2023-2024學年六年級下學期期末小升初數學試卷
- 2022-2023學年北京市西城區(qū)三帆中學七年級(上)期中數學試卷【含解析】
- 2024年中考語文真題分類匯編標點符號
- 北京西城區(qū)2023年初中學業(yè)水平考試信息科技試卷真題(含答案詳解)
- 渣土傾倒協(xié)議
- 2023-2024學年廣西貴百河高一下學期5月新高考月考測試數學試卷(含答案)
評論
0/150
提交評論