The camera rotates in a wrong way when its position is not (0,0,0) with PointerLockControls

Question

three.js r91

I changed the PointerLockControls example a little on line 173:

camera.position.set(100, 0, 0);
controls = new THREE.PointerLockControls( camera );
controls.getObject().position.set(100, 0, 0);
scene.add( controls.getObject() );

When I move the mouse to look around, you can see the rotation of the camera is incorrect-it is not rotating around itself but somewhere else.

You can see I have added controls.getObject().position.set(100, 0, 0);, attempting to solve the problem like this and this. But it doesn't work.

See this codepen post for a complete example.

What should I do to make the camera rotate around itself normally when moving the mouse?

Answer 1

try to remove camera.position.set(100, 0, 0); line and keep others

Answer 2

I have found a solution.

camera.position.set(100, 0, 0);
var cameraPos = camera.position.clone();//save original position
camera.position.set(0, 0, 0);//reset to zero
controls = new THREE.PointerLockControls( camera );
controls.getObject().position.copy(cameraPos);//set original position to the control object
scene.add( controls.getObject() );

In this way, camera.position(the local position of the camera) will always be (0,0,0) but the world position of the camera is correct.