three.js實現(xiàn)3D視野縮放效果

更新時間：2017年11月16日 10:25:51 作者：妙趣又橫生

這篇文章主要為大家詳細介紹了three.js實現(xiàn)3D視野縮放效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

首先，不再廢話了，什么是three.js，是干什么的，知道的就是知道，不知道的就百度吧。

昨兒發(fā)現(xiàn)three.js中的3D視野的縮小和放大效果可以用照相機的遠近焦來實現(xiàn)。

縮小后：

這里采用的是透視照相機:

//照相機配置
  var fov = 40;//拍攝距離
  var near = 1;//最小范圍
  var far = 1000;//最大范圍
  var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

在這里可以改變fov的值，并更新這個照相機就可以了。

camera.fov = fov;//fov是變量哦 
camera.updateProjectionMatrix();
renderer.render(scene, camera);

另外：咱們都是習(xí)慣用鼠標上下滑輪實現(xiàn)放大縮小效果，so看代碼

canvas.addEventListener('mousewheel', mousewheel, false);
    //鼠標滑輪
    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隊列結(jié)構(gòu)Queue實現(xiàn)過程解析
這篇文章主要介紹了JavaScript隊列結(jié)構(gòu)Queue實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(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實現(xiàn)的網(wǎng)頁密碼保護代碼，在進入網(wǎng)頁前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺處理這種功能，用戶輸入用戶名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容
2013-04-04
JavaScript判斷數(shù)組類型的方法
這篇文章主要介紹了JavaScript判斷數(shù)組類型的方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-10-10
淺談 Mousewheel 事件
當(dāng)需要制作轉(zhuǎn)動鼠標滾輪放大頁面字體這樣的交互效果時，會用到 Mousewheel 事件。
2010-09-09
手機端網(wǎng)頁點擊鏈接觸發(fā)自動撥打或保存電話的示例代碼
通過網(wǎng)頁撥打電話，在點擊鏈接時觸發(fā)自動撥打或保存電話，此方法塞班、安卓與iphone都支持
2014-08-08
Qt6基于Qml的文件對話框演示效果
這篇文章主要介紹了Qt6基于Qml的文件對話框演示,包括打開單個文件配置和打開多個文件配置及保存文件配置的方法，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-10-10
了解Javascript的模塊化開發(fā)
這篇文章主要介紹了了解Javascript的模塊化開發(fā),本文講解了為什么需要模塊化開發(fā),模塊化開發(fā)的形成原因等內(nèi)容,需要的朋友可以參考下
2015-03-03
原生js實現(xiàn)下拉選項卡
這篇文章主要為大家詳細介紹了原生js實現(xiàn)下拉選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
一個不錯的仿攜程自定義數(shù)據(jù)下拉選擇select
這是一個仿攜程自定義的數(shù)據(jù)下拉選擇select，對一些比較重要的參數(shù)進行的描述，方便初學(xué)者
2014-09-09