相机的Three.js TrackBall控件行为异常

Question

我一直在尝试创建一个简单的球体，它可以像this示例中那样用鼠标旋转。

然而，当我试图旋转球体时，它并不像前面的例子那样移动，而是在许多不同的方向上移动，并且非常加速。

我尝试了几种不同的转速设置组合，但都不起作用。

    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);
    }

Answer 1

创建一个TRHEE.Clock实例并使用clock.getDelta()代替您的计时器。注意：在动画过程中不要多次使用clock.getDelta()，请将值保存到一个变量中。

Answer 2

TrackballControls.js无法处理这些极端的角度。相反，您可以使用OrbitControls.js，它没有问题，因为它以不同的方式计算旋转。