Three.js用於相機的TrackBall控件行爲怪異

我一直在嘗試創建一個簡單的球體，使其能夠像鼠標一樣旋轉，就像在this示例中發生的那樣。Three.js用於相機的TrackBall控件行爲怪異

但是，當我嘗試旋轉球體時，它不像前面的示例那樣移動，而是沿着許多不同的方向移動並且極其加速。

我嘗試了幾種不同的轉速設置組合，但它們都不起作用。

var _container, _camera, _renderer, _scene, _controls; 

    $(document).ready(function() { 
     // init the animation. 
     init(); 

     // animate. 
     animate(); 
    }); 

    /* Initialize the animation */ 
    function init() { 
     // get the container size. 
     _container = $('#animation'); 
     var height = _container.innerHeight(); 
     var width = _container.innerWidth(); 

     // create the renderer and add it to the container. 
     _renderer = new THREE.WebGLRenderer({ precision: 'highp', antialias: true }); 
     _renderer.setSize(width, height); 
     _container.append(_renderer.domElement); 

     // create the scene. 
     _scene = new THREE.Scene(); 

     // create the camera and add it to the scene. 
     _camera = new THREE.PerspectiveCamera(25, width/height, 50, 1e7); 
     _scene.add(_camera); 

     var radius = 50; 

     // trackback _controls settings. 
     _controls = new THREE.TrackballControls(_camera, _renderer.domElement); 
     _controls.rotateSpeed = 0.5; 
     _controls.zoomSpeed = 1.2; 
     _controls.panSpeed = 0.2; 
     _controls.noZoom = false; 
     _controls.noPan = false; 
     _controls.staticMoving = false; 
     _controls.dynamicDampingFactor = 0.3; 
     _controls.minDistance = radius * 1.1; 
     _controls.maxDistance = radius * 100; 
     _controls.keys = [65, 83, 68]; // [ rotateKey, zoomKey, panKey ] 

     // create a sphere and add it to the scene. 
     var sphereGeo = new THREE.SphereGeometry(45, 30, 20); 
     sphereGeo.computeTangents(); 

     var sphere = new THREE.Mesh(sphereGeo, 
      new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })); 
     _scene.add(sphere); 
    } 

    /* Animates the scene */ 
    function animate() { 
     requestAnimationFrame(animate); 

     // render the scene. 
     render(); 
    } 

    /* Renders the Scene */ 
    function render() { 
     // set the camera to always point to the centre of our scene, i.e. at vector 0, 0, 0 
     _camera.lookAt(_scene.position); 

     // move the camera in a circle with the pivot point in the centre of this circle 
     // so that the pivot point, and focus of the camera is on the centre of our scene. 
     var timer = new Date().getTime() * 0.0005; 

     _camera.position.x = -Math.floor(Math.cos(timer) * 200); 
     _camera.position.y = 50; 
     _camera.position.z = Math.floor(Math.sin(timer) * 200); 

     _controls.update(); 

     _renderer.clear(); 
     _renderer.render(_scene, _camera); 
    }

來源

2012-09-05 Juan Carlos

創建一個TRHEE.Clock實例並使用clock.getDelta（）而不是您的計時器。 注意：在動畫過程中不要多次使用clock.getDelta（），將值保存到變量中。

來源

2012-09-06 08:26:43

嗨塞巴斯蒂安，非常感謝你的回答。我可能沒有正確解釋我的問題。事情是我的球體的自動旋轉工作正常，當我點擊並拖動球體並查看它的頂部，底部或背部時，問題就出現了。在我附加在鏈接上的地球示例中，您可以點擊北極並將其拖動以查看地球並相應地旋轉。問候。 –

TrackballControls.js無法處理這些極端角度。相反，您可以使用OrbitControls.js，因爲它計算旋轉的方式不同。

來源

2014-07-16 11:36:06 Leeft

Three.js用於相機的TrackBall控件行爲怪異

回答

相關問題