three.js實(shí)現(xiàn)3D視野縮放效果
首先,不再廢話了,什么是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();
}
以上就是本文的全部內(nèi)容,希望對大家的學(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-02
JavaScript編寫點(diǎn)擊查看大圖的頁面半透明遮罩層效果實(shí)例
這篇文章主要介紹了JavaScript制作點(diǎn)擊查看大圖的頁面遮罩層效果實(shí)例,透明部分這里使用的是CSS3的rgba,兼容性還是過得去的,需要的朋友可以參考下2016-05-05
javascript在事件監(jiān)聽方面的兼容性小結(jié)
javascript 在事件監(jiān)聽方面的兼容性總結(jié),注意是由于多個(gè)瀏覽器的不一致,導(dǎo)致大家在js書寫時(shí)需要考慮多個(gè)瀏覽器的兼容性。2010-04-04
js獲取當(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-01
JavaScript高級教程之如何玩轉(zhuǎn)箭頭函數(shù)
箭頭函數(shù)是在es6中添加的一種規(guī)范,箭頭函數(shù)相當(dāng)于匿名函數(shù),簡化了函數(shù)的定義,下面這篇文章主要給大家介紹了關(guān)于JavaScript高級教程之如何玩轉(zhuǎn)箭頭函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11

