CODEWITHSUNDEEP
javascript3dcamerathree.js
SaphuA
SaphuA

Reputation: 3150

Elevated camera look at point

I'm rotating a sphere around the z-axis and want an elevated camera to look down at this sphere. Unfortunately the camera is 'unstable' and making me seasick. How do I prevent this wave motion in the camera?

The code to move and look at the sphere is in the animate method of this JS Fiddle.

function animate() {
    requestAnimationFrame(animate);
    var timer = Date.now() * 0.0009;
    sphere.position.x = Math.sin(timer) * 3000;
    sphere.position.y = Math.cos(timer) * 3000;
    camera.lookAt(sphere.position);
    render();
}

Upvotes: 0

Views: 101

Answers (2)

Jorge Abraham Jimenez Molina
Jorge Abraham Jimenez Molina

Reputation: 47

I suggest that you reverse the axis and because the camera when and reaches 180 degrees makes a turn when it is on the y axis but but when reversing this we avoid the strange rotation of the camera.

Here is the code of an example (look at the function render()) and here is the demo.

Upvotes: 0

Arnaldof
Arnaldof

Reputation: 174

For camera to keep looking at the horizon, as you said, you must use an Object3D I think:

obj = new THREE.Object3D(); // use object so that rotation is relative to this
obj.add(sphere);
sphere.position.y = 3000; // distance from origin
scene.add(obj);    // add object, no sphere

Like here: http://jsfiddle.net/kjtffr02/4/

Upvotes: 1

Related Questions