Camera Rotation for First-Person Controls not correctly

I’m want to make a first-person camera and control its rotation using the mouse (when I press only)
It working fine but Z not ok
I create this sample for my issue

My project using typerscript and this’s my current code

export class ControlFirstView1 {
    public renderer: Three.Renderer,
    public camera: any,
    updateCallback: () => void
  ) {
 renderer.domElement.addEventListener('mousemove', event => {
      if (that.isUserInteracting === true) {
        const movementY = (-event.movementY * Math.PI * this.sensitivity) / 180;
        const movementX = (-event.movementX * Math.PI * this.sensitivity) / 180;;;}

Please use the following example (especially THREE.PointerLockControls) as a code template for your app:

You definitely want to use the Pointer Lock API for First-Person controls.

1 Like

Thanks for your answered, but I need my mouse cursor for moving camera :frowning:

I met issue with this guy. Everything fine, but when I turned left / right, it was nightmare

If the position of your camera is static, you can easily use THREE.OrbitControls in order to implement your intended FPS controls.

1 Like

The camera will moving by mouse (The next position is current cursor of mouse in a plane) here is sample

I’m sorry but I don’t understand what you mean. Can you please elaborate a bit your expected result and how it differs from your shared demo?

I can rotate and move my camera around a specific point (cube) in my 3d space.
But when I rotation to left/right the resulft will be like this

I think I had the same problem with first person controls and I solved this with setting the camera’s (or the object holding the camera) order of rotation from default “XYZ” to “YXZ”.

camera.rotation.order = "YXZ";

Yeb, I’m not using any object wrap camera, I tried but not working

I found this solution but how I can implement in threejs

Hey, I think I managed to recreate your problem. After you change the camera rotation order, issue is fixed (uncomment line 74).

Yeb! It worked

try rotate camera by Y Global axis and X Local axis, it’s work
var movementY = (event.movementY * Math.PI * cameraSensitivity) / 180;
var movementX = (event.movementX * Math.PI * cameraSensitivity) / 180;
camera.rotateOnWorldAxis(new THREE.Vector3(0, 1,0), THREE.Math.degToRad(50*movementX));