Forcing the camera to stay horizontal (camera tutorial)

I’m training on your camera tutorial here :

When left clicking to move the camera, the view became more and more diagonal and it became difficult to correctly look around.

Would it be possible to force the camera to rotate only on the Z axis for exemple ?
I’ve tried the “constrainedAxis” method but it doesn’t seem to work even if the scene work.

Any ideas please ?

Best regards.

I think you’d need to change how the rotation happens here:

    var x = (mousePosition.x - startMousePosition.x) / width;
    var y = -(mousePosition.y - startMousePosition.y) / height;

    var lookFactor = 0.05;
    camera.lookRight(x * lookFactor);
    camera.lookUp(y * lookFactor);

When you look right, it looks like it’s diagonal because it’s rotating from an absolute position, whereas I think you want the camera to rotate relative to the east-north-up frame of reference of where it is in the world.

What kind of project are you working on? Do the default camera controls not work for you? You can use the middle mouse click to the rotate the camera without running into this issue with the default controls.

Hello Omar,
thanks for your answer.

I’m trying to make a 3D tile model to be visited using defined fixed location, so the user would look around him as in a panoramic view.

I found the “look following the left clik” interesting because it is user friendly, so I just deactivated the keyboard controls from the sandcaslte example.

Maybe there is a way to force the camera to be immobile by deactivating scrolling and relocating the middle click camera view to the left click ?


I think one easy way to do this is to lock the camera to a fixed point, and then the user can look around freely but not be able to move away. This is described here: vertical polyline cannot be explored

Are you trying to have the camera at a fixed point as if standing on the Earth, and looking around in a first-person view without the globe itself moving? If so I found the same issue you did with respect to the camera view seeming to rotate as drunkenly falling over. :wink:

Instead of using camera.lookAt, I used something along these lines:

const width = canvas.clientWidth;
const height = canvas.clientHeight;
const x = -(mousePosition.x - startMousePosition.x) / width;
const y = -(mousePosition.y - startMousePosition.y) / height;
const lookFactor = 0.1;
const heading = camera.heading + (x * lookFactor), pitch = camera.pitch - (y * lookFactor);
camera.setView({orientation:{roll: 0, pitch, heading}});

So I’m working out the new heading and pitch instead of working out where to lookAt, and forcing the roll to 0.

I tried a few things, anyway, and this is what seemed to work best for me (assuming I’ve understood what you’re trying to do).