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 {
 constructor(
    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;
        this.camera.rotateX(movementY);
        this.camera.rotateY(movementX);}
}
}

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

https://threejs.org/examples/misc_controls_pointerlock.html

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.

https://jsfiddle.net/f2Lommf5/16805/

1 Like

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

https://a3j.herokuapp.com/chap3 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?

image
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
image

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).

https://jsfiddle.net/kxs79b1j/1/

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));
camera.rotateX(movementY);