Ensuring that my fly camera always remains parallel to the ground is crucial to me. Specifically, I need my camera's right vector to always be (1,0,0).
To achieve this, I have developed a customized Camera Controller in three.js that simulates unique camera movements and pointerlock behavior.
Below is the main rotation code within the update method:
this.tmpQuaternion: THREE.Quaternion;
this.camera: THREE.PerspectiveCamera;
...
this.tmpQuaternion
.set(
-this.verticalRotationSpeed * this.mouseMovement.movementY,
-this.horizontalRotationSpeed * this.mouseMovement.movementX,
0,
1
)
.normalize();
this.camera.quaternion.multiply(this.tmpQuaternion);
In this code, verticalRotationSpeed and horizontalRotationSpeed are simple positive constants, while mouseMovement.movementX and mouseMovement.movementY represent the accumulated mouse movements since the last frame.
However, I have noticed that when I move my mouse simultaneously along both the X and Y axis, the camera tends to roll slightly along the z axis, which is not desired.
I would appreciate insight into the root cause of this behavior or, if possible, a revised version of the code that maintains the camera's right vector facing (1,0,0) at all times.
Note: I am specifically seeking a solution within the three.js library.
Thank you for your assistance.