Threes.js入门篇之5 - 场景操纵器Trackball

 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例子。