I'm currently working on a program that allows users to click on an object, zoom in on it, and then view it from all angles by holding the right mouse button and dragging. I want the camera to orbit around the object instead of rotating the object itself while the camera stays fixed. Unfortunately, I'm struggling with the math involved!
During testing, we already have a game object with specific xyz coordinates that we've chosen to focus on.
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));
The distance between the camera and the object is 500 units, and as the user rotates the camera should always maintain this distance.
I'm handling scene updates 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 can I make the camera rotate around 'g' with a radius of 500? Help would be greatly appreciated!