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;

}

我同意你的观点，试验这将是一次很好的学习体验。

three.js r.89