three.js實(shí)現(xiàn)3D視野縮放效果
更新時間：2017年11月16日 10:25:51 作者：妙趣又橫生
這篇文章主要為大家詳細(xì)介紹了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的值，并更新這個照相機(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)滑輪向上滾動時
fov -= (near < fov ? 1 : 0);
}
if (e.wheelDelta < 0) { //當(dāng)滑輪向下滾動時
fov += (fov < far ? 1 : 0);
}
} else if (e.detail) { //Firefox滑輪事件
if (e.detail > 0) { //當(dāng)滑輪向上滾動時
fov -= 1;
}
if (e.detail < 0) { //當(dāng)滑輪向下滾動時
fov += 1;
}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
//updateinfo();
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript隊(duì)列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析
這篇文章主要介紹了JavaScript隊(duì)列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03
TypeScript中交叉類型和聯(lián)合類型的區(qū)別詳解
聯(lián)合類型（Union Types）和交叉類型（Intersection Types）是 TypeScript 中的兩種高級類型,它們都用于組合多個類型并生成新的類型,但它們兩者之間的用法不一樣,本文小編就給大家講講TypeScript中交叉類型和聯(lián)合類型的區(qū)別,需要的朋友可以參考下2023-09-09
這是一個由JS實(shí)現(xiàn)的網(wǎng)頁密碼保護(hù)代碼，在進(jìn)入網(wǎng)頁前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺處理這種功能，用戶輸入用戶名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容2013-04-04
這篇文章主要介紹了JavaScript判斷數(shù)組類型的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
當(dāng)需要制作轉(zhuǎn)動鼠標(biāo)滾輪放大頁面字體這樣的交互效果時，會用到 Mousewheel 事件。2010-09-09
手機(jī)端網(wǎng)頁點(diǎn)擊鏈接觸發(fā)自動撥打或保存電話的示例代碼
通過網(wǎng)頁撥打電話，在點(diǎn)擊鏈接時觸發(fā)自動撥打或保存電話，此方法塞班、安卓與iphone都支持2014-08-08
這篇文章主要介紹了Qt6基于Qml的文件對話框演示,包括打開單個文件配置和打開多個文件配置及保存文件配置的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了了解Javascript的模塊化開發(fā),本文講解了為什么需要模塊化開發(fā),模塊化開發(fā)的形成原因等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)下拉選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
一個不錯的仿攜程自定義數(shù)據(jù)下拉選擇select
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select，對一些比較重要的參數(shù)進(jìn)行的描述，方便初學(xué)者2014-09-09