Camera Rotation for First-Person Controls not correctly

Questions
1

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);}
}
}
2

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
3

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

4

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

5

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
7

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

8

https://a3j.herokuapp.com/chap3 here is sample

10

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?

11

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

12

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";

1 Like
13

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

14


I found this solution but how I can implement in threejs

15

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/

16

Yeb! It worked

17

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

18

Hey I know this is an old post now but I solved this much easier than this.

I used orbit controls and I simply made the target slightly in front of the camera.

so postion of the camera in my case was:

camera.position.x = 6;
camera.position.y = 1.25;
camera.position.z = 2.5;

the position of the target (the centre point that orbit controls looked at) was:

controls.target.set( 6.6, 1.25, 2.5 );

Then just disable pan and limit the view angle to whatever you like and you get the desired affect without any skewed rotation like in that example.