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/

Answer 1

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 );