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