javascript - Three.js 第一人称相机旋转

Question

我在 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);
}

viewKeys() 函数在 init() 函数中调用，viewAnimate() 函数在 animate() 函数。

目前，当相机的位置为 (0,0,0) 时，代码可以正常旋转，但如果我移动到不同的位置，它看起来就像相机相对于整个环境的轴旋转。 我知道有很多用于 Three.js 的控制库，但我想了解如何能够自己在自己的轴上旋转某些东西。

您认为我如何更改旋转才能使其正常工作？

Answer 1

如果您想通过鼠标自己旋转相机，则必须了解欧拉旋转在 Three.js 中的工作原理。请参阅this answer .

实现您想要的效果的一种方法是使用如下模式:

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;

}

我同意你的观点，尝试这个将是一次很好的学习经历。

三.js r.89