three.js - 当使用 PointerLockControls 的位置不是 (0,0,0) 时，相机以错误的方式旋转

Question

三.js r91

我在第 173 行稍微更改了 PointerLockControls 示例：

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

当我移动鼠标环顾四周时，您会看到相机的旋转不正确——它不是围绕自身旋转，而是在其他地方旋转。

你可以看到我已经添加controls.getObject().position.set(100, 0, 0);，试图解决这个问题和这个问题。但它不起作用。

有关完整示例，请参阅此 codepen 帖子。

移动鼠标时如何使相机正常旋转？

Answer 1

尝试删除camera.position.set(100, 0, 0); 行并留住他人

Answer 2

我找到了解决方案。

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

这样，camera.position（相机的本地位置）将始终是(0,0,0)但相机的世界位置是正确的。