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

如果您想通过鼠标自行旋转相机，则必须了解Euler旋转如何在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

three.js第一人称相机旋转

1 个答案: