Three.js Setting camera (or Object3D) roatation angle along its own particular axis

0
votes

I am using Three.js. I have a camera which is moved and rotated the following ways:

  • camera.translateX(): move left/right
  • camera.translateZ(): move forward/backward
  • camera.rotateY(): rotate left/right
  • camera.rotateX(): rotate up/down

After some movements and rotations, I want to reset the camera's up/down rotation (i.e. it will neither looking at the sky or the floor) so that it is viewing horizontally, while maintaining the current left/right rotation and position.

My question is how could I get the proper value for camera.rotateX()? Or is there any way to specify the exact angle it should rotate to?

I have tried camera.quaternion.setFromAxisAngle() but it seems not what I want because it also change/set the left/right rotation of the camera.

1
3dcamerarotationthree.js

1 Answers

0
votes

Your camera rotation happens in its own coordinate system, not in world coordinate system. That is why with camera.rotateY() you rotate to left and right relative to your position whatever it is. Your current orientation is represented by Euler angles, which are three sequential rotations. After your every rotation axises are rotated with you.

You can try to change your rotation order by setting camera.rotation.order = "YXZ"; and then set camera.rotation.y = 0.

Also knowing vectors a = camera.position and b = camera.getWorldDirection() you could use camera.lookAt(b.x, a.y, b.z).

Hope this helps. Also there are working examples which could help: FirstPersonControls, PointerLockControls.