javascript / threejs - equation to move an object in a circle around a central y axis (in 3D space)

3d, javascript, math, three.js

Solution

You can set the position of the camera manually along the following lines:

// let theta be the amount you want to rotate by
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

See http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions for the matrix equivalent for rotation about the x, y, and z axes.

You might also be able to adapt TrackballControls to use the keyboard and not the mouse.

Default Trackball behaviour: http://mrdoob.github.com/three.js/examples/misc_camera_trackball.html

Note: I haven't tested this yet - I'm at work.

Problem

I am experimenting with threeJS, and I've got a camera positioned and looking at the origin point of a scene (0,0,0). I want to move that camera around in a circle around the y axis at a set distance (radius), while maintaining its focus on the origin, but I'm not sure how to set up the equation. Currently, I'm just rotating the object itself, but I'd like to be rotating the camera instead. Here's my code to move the mesh: ``` function checkRotation(){ if (keyboard.pressed("left")){ mesh.rotation.y += .05; } if (keyboard.pressed("right")){ mesh.rotation.y -= .05; } } ``` and here would be some sort of example of moving the camera: camera.position.x = ??? (some equation to move its x position) camera.position.z = ??? (some equation to move its z position) camera.lookAt(mesh.position); Any help you can provide would be great. Thanks!

Original source