Javascript three.js第一人称摄影机旋转

我在three.js上寻找第一个玩家轮换的帮助已经有一段时间了，但是大多数答案都已经过时了，更新的库中目前还没有这些函数

我试着让我的代码运行，这样相机就会根据鼠标在屏幕上的位置绕着自己的轴旋转

当前轮换代码为：

var scale = 10;

function viewKeys(){
  document.addEventListener("mousemove", MouseMove, true);
  function MouseMove(event) {
    mouseX = event.clientX - divOffsetWidth;
    mouseY = event.clientY - divOffsetHeight;
  }
}

divOffset

变量使鼠标位置相对于HTML div的中心读取

function viewAnimate(){
  camera.rotation.x = -((3/2)*(Math.PI*mouseY)) / (scale);
  camera.rotation.y = -(2*(Math.PI*mouseX)) / (scale);
}

在

init（）

函数中调用

viewKeys（）

函数，在

animate（）

函数中调用

viewAnimate（）

函数

当前，当相机的位置为

（0,0,0）

时，代码可以正常旋转，但如果移动到其他位置，则看起来相机相对于整个环境的轴旋转。 我知道three.js有很多控制库，但我想了解如何能够在自己的轴上旋转某些东西

---

您认为我应该如何更改旋转以使其正常工作？

如果您想自己通过鼠标旋转相机，您必须了解Euler旋转在three.js中的工作原理。看

实现所需功能的一种方法是使用如下模式：

var scale = 1;
var mouseX = 0;
var mouseY = 0;

camera.rotation.order = "YXZ"; // this is not the default

document.addEventListener( "mousemove", mouseMove, false );

function mouseMove( event ) {

    mouseX = - ( event.clientX / renderer.domElement.clientWidth ) * 2 + 1;
    mouseY = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    camera.rotation.x = mouseY / scale;
    camera.rotation.y = mouseX / scale;

}

我同意你的观点，用这个做实验将是一次很好的学习经历

---

three.js r.89

谢谢你的回复，你给我的新代码运行得很好，我也会尽我所能理解Euler旋转，以获得更多理解，谢谢。