javascript - 使用鼠标在 Three.js 中旋转相机

Question

我的场景中有很多对象，因此旋转所有对象可能会很痛苦。那么在鼠标单击和拖动时围绕原点移动相机的最简单方法是什么？这样，场景中所有的灯光和物体都在同一个位置，所以唯一改变的就是相机。 Three.js 没有提供围绕一个点旋转相机的方法，对吗？

谢谢

Answer 1

Here's a project with a rotating camera .查看源代码，它似乎只是将相机位置移动了一圈。

function onDocumentMouseMove( event ) {

    event.preventDefault();

    if ( isMouseDown ) {

        theta = - ( ( event.clientX - onMouseDownPosition.x ) * 0.5 )
                + onMouseDownTheta;
        phi = ( ( event.clientY - onMouseDownPosition.y ) * 0.5 )
              + onMouseDownPhi;

        phi = Math.min( 180, Math.max( 0, phi ) );

        camera.position.x = radious * Math.sin( theta * Math.PI / 360 )
                            * Math.cos( phi * Math.PI / 360 );
        camera.position.y = radious * Math.sin( phi * Math.PI / 360 );
        camera.position.z = radious * Math.cos( theta * Math.PI / 360 )
                            * Math.cos( phi * Math.PI / 360 );
        camera.updateMatrix();

    }

    mouse3D = projector.unprojectVector(
        new THREE.Vector3(
            ( event.clientX / renderer.domElement.width ) * 2 - 1,
            - ( event.clientY / renderer.domElement.height ) * 2 + 1,
            0.5
        ),
        camera
    );
    ray.direction = mouse3D.subSelf( camera.position ).normalize();

    interact();
    render();

}

Here's another demo在这一个中，我认为它只是创建了一个新的 THREE.TrackballControls 对象，并将相机作为参数，这可能是更好的方法。

controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 )