Three.js TrackBall Controls for Camera 行为怪异答案

【问题标题】：Three.js TrackBall Controls for Camera behaves weirdThree.js TrackBall Controls for Camera 行为怪异
【发布时间】：2012-08-30 16:12:53
【问题描述】：

我一直在尝试创建一个简单的球体，它能够像 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);
    }

【问题讨论】：

标签： camera three.js

【解决方案1】：

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

【讨论】：

嗨塞巴斯蒂安，非常感谢您的回答。我可能没有正确解释我的问题。问题是我的球体的自动旋转工作正常，当我单击并拖动球体并查看它的顶部、底部或背面时，问题就出现了。在我附在链接上的地球示例中，您可以单击北极并拖动它以查看行星相应地旋转。问候。

【解决方案2】：

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

【讨论】：