Camera has strange behaviour in ThreeJS

Question

I've set up a scene with two cubes, a camera, a light and a plane in ThreeJS. Cubes are on the plane, and the camera is flying in circles around the green cube.

My problem is that the camera angles have a strange behaviour. As the camera flies, it rotates itself and it gets into an upside-down position, then back to normal position and this goes on. I am using the lookAt() method. I don't know what is going wrong. I looked at a few other examples of ThreeJS and I concluded that this code supposed to work. Can you tell me what I'm doing wrong? I'd like the camera to fly around the green cube without going upside down. So I'd like it to directly look at the cube, changing only the z axis as it flies.

Here my render loop:

function render() {            
    requestAnimationFrame(render);
    var timer = -0.0002 * Date.now();

    camera.position.x =  5 * Math.cos( timer );
    camera.position.y =  5 * Math.sin( timer );

    camera.lookAt( cube.position );

    renderer.render(scene, camera)
}

Here is the whole example: http://jsfiddle.net/szivak009/8S5hq/6/

Y-axis is "up" by default. There is nothing unusual in your demo. The camera is not upside down. I added axes for reference. jsfiddle.net/8S5hq/9 — WestLangley
I didn't realize this myself, but you pointed this out for me. Thanks! Is there a way to change the "default up" axis? — Zsolt

WestLangley WestLangley · Accepted Answer · 2012-12-04T12:27:02

Your code is fine. See my comments above, and the fiddle http://jsfiddle.net/8S5hq/9/.

You can change the camera's up direction like so:

camera.up.set( 0, 0, 1 );

Camera has strange behaviour in ThreeJS

1 Answers