I have created a scene in ThreeJS featuring two cubes, a camera, a light, and a plane. The cubes rest on the plane while the camera gracefully circles around the green cube.
Despite my efforts, I am encountering an unusual issue with the camera angles. As the camera completes its rotations, it exhibits erratic behavior by flipping upside down and then returning to its normal orientation. I have been using the lookAt() method, and I cannot pinpoint what is causing this problem. I have looked at various ThreeJS examples and believe that my code should be functioning correctly. Can anyone help me figure out what I am doing wrong? Ideally, I want the camera to smoothly orbit the green cube without inverting. I would like it to maintain direct eye contact with the cube, adjusting only its z-axis during flight.
Below is the snippet from 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)
}
For the complete example, please visit: http://jsfiddle.net/szivak009/8S5hq/6/