three.js實(shí)現(xiàn)3D視野縮放效果
首先,不再?gòu)U話了,什么是three.js,是干什么的,知道的就是知道,不知道的就百度吧。
小編為大家推薦一篇:Three.js快速入門教程
昨兒發(fā)現(xiàn)three.js中的3D視野的縮小和放大效果可以用照相機(jī)的遠(yuǎn)近焦來實(shí)現(xiàn)。
縮小后:
這里采用的是透視照相機(jī):
//照相機(jī)配置 var fov = 40;//拍攝距離 var near = 1;//最小范圍 var far = 1000;//最大范圍 var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
在這里可以改變fov的值,并更新這個(gè)照相機(jī)就可以了。
camera.fov = fov;//fov是變量哦 camera.updateProjectionMatrix(); renderer.render(scene, camera);
另外:咱們都是習(xí)慣用鼠標(biāo)上下滑輪實(shí)現(xiàn)放大縮小效果,so看代碼
canvas.addEventListener('mousewheel', mousewheel, false); //鼠標(biāo)滑輪 function mousewheel(e) { e.preventDefault(); //e.stopPropagation(); if (e.wheelDelta) { //判斷瀏覽器IE,谷歌滑輪事件 if (e.wheelDelta > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí) fov -= (near < fov ? 1 : 0); } if (e.wheelDelta < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí) fov += (fov < far ? 1 : 0); } } else if (e.detail) { //Firefox滑輪事件 if (e.detail > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí) fov -= 1; } if (e.detail < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí) fov += 1; } } camera.fov = fov; camera.updateProjectionMatrix(); renderer.render(scene, camera); //updateinfo(); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
移動(dòng)端touch拖動(dòng)和click事件沖突問題解決
這篇文章主要為大家介紹了移動(dòng)端touch拖動(dòng)和click事件沖突問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09關(guān)閉頁面window.location事件未執(zhí)行的原因及解決方法
這篇文章主要介紹了關(guān)閉頁面window.location事件未執(zhí)行的原因及解決方法,需要的朋友可以參考下2014-09-09通過正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證是否為中文
正如標(biāo)題所言判斷一個(gè)輸入量是否為中文,通過正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-02-02JavaScript編寫點(diǎn)擊查看大圖的頁面半透明遮罩層效果實(shí)例
這篇文章主要介紹了JavaScript制作點(diǎn)擊查看大圖的頁面遮罩層效果實(shí)例,透明部分這里使用的是CSS3的rgba,兼容性還是過得去的,需要的朋友可以參考下2016-05-05javascript在事件監(jiān)聽方面的兼容性小結(jié)
javascript 在事件監(jiān)聽方面的兼容性總結(jié),注意是由于多個(gè)瀏覽器的不一致,導(dǎo)致大家在js書寫時(shí)需要考慮多個(gè)瀏覽器的兼容性。2010-04-04js獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s獲取當(dāng)前年月日-YYYYmmDD格式的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06強(qiáng)悍無比的WEB開發(fā)好助手FireBug(Firefox Plugin)
強(qiáng)悍無比的WEB開發(fā)好助手FireBug(Firefox Plugin)...2007-01-01JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)
箭頭函數(shù)是在es6中添加的一種規(guī)范,箭頭函數(shù)相當(dāng)于匿名函數(shù),簡(jiǎn)化了函數(shù)的定義,下面這篇文章主要給大家介紹了關(guān)于JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11