Camera rotation huge change when mouse drag and move

Here is the playground:

The problem is discussed or solved??? at FreeCamera with noRotationConstraint invert controls

Problem: I use the following code to create a FreeCamera, the camera starts with the expected position and rotation. When using the mouse to rotate direction, the camera suddenly looks down.

export function createCamera(scene) {
  const camera = new FreeCamera('main-camera', new Vector3(0, 10, -80), scene)
  camera.position = houseviewpos1.toVector3();
  // BUG: any input will cause camera look down
  camera.rotation = new Vector3(Math.PI, 0, 0)


Could you reproduce this on the playground?

1 Like

the problem is solved by adding


My friends say camera.rotation.x is always in [-pi/2, pi/2], if I set it beyond the range, it will automatically jump back to the eligible range.

Is the above explanation correct? @RaananW

Finally, I create the playground. Whenever the first mouse input happens, the camera will face down.

After setting the following code, the bug is fixed. However, the vertical mouse control is reversed. When the mouse drags up, the camera face down.


Can I ask what you are trying to achieve by rotating the camera Math.PI on its X axis?

1 Like

I am trying to make the camera look straight using new Vector3(Math.PI, 0, 0). Since there is a limitation on camera X axis, I should avoid that. What vector will make the camera look straight?

I am confused about how does camera.rotation works? Any documentation or tutorial link will be beneficial?

Can you clarify what you mean by “look straight”? If you want the camera to look directly at a particular point, you can just use.setTarget(point); For example, to look straight at the origin, you would call camera.setTarget(new BABYLON.Vector3.Zero); This is much easier than trying to adjust the rotation manually, which will involve some math.