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!

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!

• javascript
• math
• three.js
• 3d

• 1 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 Commented Apr 26, 2012 at 21:59
• 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 Commented Apr 26, 2012 at 22:42
• 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 Commented Apr 26, 2012 at 22:42

2 Answers 2

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/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./three.js/examples/misc_camera_trackball.html

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

Bit of a late answer, but others may wish to take a look at the OrbitControls that es 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...