Rotate the camera around an object using the arrow keys in Three.js

1
votes

Say I have a big cube with some objects on each of the faces (a bit like the google maps cube http://www.playmapscube.com/). I would like to be able to use the arrow keys to rotate the camera around the cube, instead of rotating all the objects individually.

So the left arrow will move the camera to the left, thus the cube would be turning right, and so on.

I've looked all over and didn't find anything about doing it with the keyboard.

1
javascriptthree.jsperspectivecamera
What have you tried so far? Hope you're not just copy-pasting stuff blindly... - mrdoob
I've tried to increment the X and Y positions of the camera (for left/right) and then updating the camera using camera.lookAt(scene.position) but that increased the distance of the camera away from the center of the scene... Is there a special method that I should be useing? - fncombo

1 Answers

4
votes

Based on your comment, I am assuming this is just a math question.

Use the arrow keys to change the value of a variable theta, then in your render loop do something like this:

camera.position.x = 15 * Math.cos( theta );
camera.position.y = 10;
camera.position.z = 15 * Math.sin( theta );

camera.lookAt( scene.position );