Javascript 如何在对象上旋转 THREE.PerspectiveCamera
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27095251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate a THREE.PerspectiveCamera around on object
提问by Andrew Fisher
I am making this program where you can click on an object, zoom to it, then look at it from all angles by holding the right mouse button and dragging. I need the camera to be going around the object, not rotate the object with the camera looking at it. I honestly just have no idea how to math it out!
我正在制作这个程序，你可以点击一个对象，放大它，然后通过按住鼠标右键并拖动从各个角度查看它。我需要相机围绕物体旋转，而不是在相机看着物体的情况下旋转物体。老实说，我只是不知道如何计算它！
For testing there is already a game object with an xyz we have selected and are looking at
为了测试，已经有一个带有 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));
So the radius between the camera and the object is 500 and while selected and rotating, the camera should always be 500 away.
因此，相机和物体之间的半径为500且选择旋转，相机应始终为500距离。
I update the scene here:
我在这里更新场景：
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;
}
}
How do I rotate this camera around g with a radius of 500?!?!
如何以 500 的半径围绕 g 旋转此相机？！？！
回答by Zob
As gaitat mentioned, trackball controls are the best place to start with many configurable parameters to make camera rotation/revolution easy. One enormous potential benefit of this method ( especially for your project ) is avoiding "gimbal lock" which is the source of much frustration when working with rotations. Here's a link that might help you with Trackball controls and Orbitcontrols:
正如 gaitat 所提到的，轨迹球控制是从许多可配置参数开始的最佳位置，以使相机旋转/旋转变得容易。这种方法的一个巨大潜在好处（特别是对于您的项目）是避免“万向节锁定”，这是在使用旋转时造成很多挫折的根源。这是一个可以帮助您使用轨迹球控件和 Orbitcontrols 的链接：
Rotate camera in Three.js with mouse
Another option would be setting camera coordinates yourself in the animation loop which is actually quite simple:
另一种选择是在动画循环中自己设置相机坐标，这实际上非常简单：
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;
...
}
Another option would be to connect the camera to a pivot object and just rotate the pivot:
另一种选择是将相机连接到枢轴对象并仅旋转枢轴：
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
If you pursue this option, be aware that the camera object is in "camera pivot space", and might be more challenging to manipulate further.
如果您选择此选项，请注意相机对象位于“相机枢轴空间”中，进一步操作可能更具挑战性。
