如何在对象上旋转THREE.PerspectiveCamera

Question

我正在制作这个程序，你可以点击一个对象，缩放到它，然后通过按住鼠标右键并拖动从各个角度查看它。我需要相机在物体周围旋转，而不是在相机看着物体的时候旋转物体。老实说，我真的不知道怎么算出来！

为了进行测试，我们已经选择并查看了一个带有xyz的游戏对象

var g = new GameObject(500, 0, 0);//The game object with xyz
this.selected = g;//set selected to g

//Create and set the camera
this.camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);
this.camera.position.x = 0;
this.camera.position.y = 0;
this.camera.position.z = 0;

//set camera to look at the object which is 500 away in the x direction
this.camera.lookAt(new THREE.Vector3(this.selected.x, this.selected.y, this.selected.z));

因此，相机和对象之间的半径是500，在选定并旋转时，相机应该始终在500的范围内。

我在这里更新场景：

Main.prototype.update = function(){

    this.renderer.render(this.scene, this.camera);//scene is just some ambient lighting

    //what to do when mouse right is held down
    if(this.rightMouseDown){

        //placeholder functionality, needs to rotate around object based on mouse movements
        this.camera.position.x -= 5;

    }
}

如何将这个半径为500的相机绕g旋转？！？！

Answer 1

正如gaitat提到的，轨迹球控制是从许多可配置参数开始的最佳位置，以使相机旋转/旋转容易。这种方法的一个巨大的潜在好处(特别是对你的项目)是避免“万向节锁定”，这是在处理旋转时令人沮丧的原因。这里有一个可能对你使用轨迹球控件和轨道控件有帮助的链接：

Rotate camera in Three.js with mouse

另一种选择是在动画循环中自己设置相机坐标，这实际上非常简单：

var angle = 0;
var radius = 500; 

function animate() {
...
// Use Math.cos and Math.sin to set camera X and Z values based on angle. 
camera.position.x = radius * Math.cos( angle );  
camera.position.z = radius * Math.sin( angle );
angle += 0.01;
...
}

另一种选择是将摄影机连接到枢轴对象，然后旋转枢轴：

var camera_pivot = new THREE.Object3D()
var Y_AXIS = new THREE.Vector3( 0, 1, 0 );

scene.add( camera_pivot );
camera_pivot.add( camera );
camera.position.set( 500, 0, 0 );
camera.lookAt( camera_pivot.position );
...
camera_pivot.rotateOnAxis( Y_AXIS, 0.01 );    // radians

如果您选择此选项，请注意摄影机对象位于“摄影机轴心空间”中，并且进一步操纵可能更具挑战性。