PointerLock with camera Z up

I’m trying to use the PointerLock controls however my camera Z vector is up, how can I modify it to work properly?

1 Like

It would be great to have more information and a Minimal, Complete and Verifiable example will make helping easier.

I’m using it the same as in the pointerlock controls sample:

but my camera required to be with z up:
camera.up.set( 0, 0, 1 );

the controls is not working properly as it assume the camera has no rotation, see the pointerlockcontrols code:

this.getDirection = function() {

	// assumes the camera itself is not rotated

	var direction = new THREE.Vector3( 0, 0, - 1 );
	var rotation = new THREE.Euler( 0, 0, 0, "YXZ" );

	return function( v ) {

		rotation.set( pitchObject.rotation.x, yawObject.rotation.y, 0 );

		v.copy( direction ).applyEuler( rotation );

		return v;


1 Like

I guess you have to change PointerLockControls so it meets your requirements. PointerLockControls is part of the examples not the core. User specific modifications to these files are a common thing.

I know, I already tried…
I’m asking for assistance to modify it, any idea?

Um, the controls work when i change the up vector of the camera in the mentioned example. As long as you don’t use .lookAt() everything should be fine…

May i ask, what are your reasons for changing the up vector of the camera?

it’s a given requirement to use the z vector for height above ground

Have you considered to rotate the entire scene? Something like:

scene.rotation.x = - Math.PI / 2;

Hi I think I found out how to edit Pointer Lock Controls to work with z axis as up. I had to change the ordering of the euler var used and change the mouse movement x to affect the z component of the euler angle instead of the y component. Also I added new constraints to keep the camera from rotating 360 degrees in the vertical direction, however you can modify these by changing the MAX_PI and MIN_PI variables to suit your needs.

1 Like