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

5
votes

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!

2
javascriptmaththree.js3d
I don't know javascript or threeJS, but the equation is pretty simple: x' = cos(t) x - sin(t) y, y' = sin(t) x + cos(t) y. – Beta
Yeah - I think what I'm struggling with is the time issue. I need this to increment based on the previous x and z values, not as a function of time. I got something to work by saying: – mheavers
timer = Date.now() * 0.0005; camera.position.x = ((Math.cos( timer ) * 5)*5); camera.position.z = ((Math.sin( timer ) * 5)*5); - but that means if they stop hitting the button, the thing jumps around the next time they hit it – mheavers
Have you tried my suggestion? – Iskar Jarak

2 Answers

14
votes

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.

2
votes

Bit of a late answer, but others may wish to take a look at the OrbitControls that comes with Three.js (in examples/js/controls). You can set it to autoRotate. It will take care of the maths for you.

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [whatever speed you want]

camera.lookAt(new THREE.Vector3(0,0,0));

Then in your requestAnimationFrame-called update function...

controls.update();

If you don't want the user to be able to control the camera position themselves, I'm sure you can find a way to disable it, or just extract the code that you need...