Threes.js入門篇之5 - 場景操縱器Trackball

allenjiao發表於2018-03-14
JS

 Three.js 提供了很多操縱器，example下也給了一些操縱器（也叫控制器）的例子，引用 js 可以參考 examples/js/controls/TrackballControls.js 。

       Trackball 是眾多控制器中應用最多的樣例之一，將場景物件封裝到一個包圍球，將滑鼠操作對映為對包圍球的旋轉（拖拽）。

       下圖是 example下提供的例子：（對應程式碼 misc_controls_trackball.html）

        

       只貼出來和控制器有關的部分程式碼：

[html] view plain copy
  1.     controls = new THREE.TrackballControls( camera );  
  2.   
  3.     controls.rotateSpeed = 1.0;  
  4.     controls.zoomSpeed = 1.2;  
  5.     controls.panSpeed = 0.8;  
  6.   
  7.     controls.noZoom = false;  
  8.     controls.noPan = false;  
  9.   
  10.     controls.staticMoving = true;  
  11.     controls.dynamicDampingFactor = 0.3;  
  12.   
  13.     controls.keys = [ 65, 83, 68 ];  
  14.     controls.addEventListener( 'change', render );  
  15.   
  16. // 對應函式  
  17. function onWindowResize() {  
  18.   
  19.     camera.aspect = window.innerWidth / window.innerHeight;  
  20.     camera.updateProjectionMatrix();  
  21.   
  22.     renderer.setSize( window.innerWidth, window.innerHeight );  
  23.     controls.handleResize();  
  24.     render();  
  25. }  
  26.   
  27. function animate() {  
  28.   
  29.     requestAnimationFrame( animate );  
  30.     controls.update();  
  31. }  
  32.   
  33. function render() {  
  34.   
  35.     renderer.render( scene, camera );  
  36.     stats.update();  
  37. }  

       Trackball 是 Three.js 控制器的一種，如果你需要更多控制器選擇，可以參考 example例子。

相關文章