Threes.js入門篇之6 - 場景漫遊

allenjiao發表於2018-03-14
JS

THREE.js 支援兩種形式的漫遊，第一人稱漫遊（First Person） 和 飛行（Fly），可以分別參考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。


一. 第一人稱漫遊

       例子中的效果是這樣的，通過 【ASDW】控制平移，通過【←↑↓→】控制朝向（try 一下）。

       漫遊主要是通過 camera 的引數調整來進行控制，請參考程式碼！

        

二. Fly

       Fly模式提供了一個飛行控制器（FlyControls.js），參考漫遊器設定程式碼：

[html] view plain copy
  1. // 漫遊器設定    
  2. controls = new THREE.FlyControls( camera );  
  3.   
  4. controls.movementSpeed = 0.1;  
  5. controls.domElement = container;  
  6. controls.rollSpeed = Math.PI / 24;  
  7. controls.autoForward = false;  
  8. controls.dragToLook = false;  
       通過 controls 的 update 完成控制更新：

[html] view plain copy
  1. controls.update( delta );  


       THREE.js 封裝的漫遊器基本上能滿足大多數情況下的使用，建議在其基礎上進行修改以滿足個性化設定，當然如果不想僅停留在用的階段的話，可以寫一個自己的控制器。這更能加深熟練應用！

相關文章