Question

我试图以三个以鼠标移动为中心的js移动相机。一切正常，我正在使用

function onMouseMove(event) {
    mousePosition.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mousePosition.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

从-1到1获取位置。我现在想要添加的是相机无法进入位置为0/0的圆圈（浏览器屏幕的中间）。很难解释，但我想移动相机在线，这个圆的半径，直到x或y值超出-0.5到0.5的范围。这是相机的更新方式：

camOffset.x += (mousePosition.x - camOffset.x) * 0.1;
camOffset.y += (mousePosition.y - camOffset.y) * 0.1;
camera.position.x += camOffset.x * 30;
camera.position.y += camOffset.y * 30;

希望你能帮助我！谢谢！

Answer 1

使用THREE.Spherical（）有效地将x，y，z转换为phi，theta。它将减少您的工作量，让您更好地了解相机的移动。仅更改相机的θ以将其旋转一圈。

    var delta = mousePosition.x - camOffset.x;
    var rotMult = delta * rollSpeed;// adjust this according to your need.
    var vector = new THREE.Vector3();
    var center = new THREE.Vector3();
    var spherical = new THREE.Spherical();
    vector.copy( camera.position ).sub( center );
    spherical.setFromVector3( vector );
    spherical.theta += this.rotationVector.y * rotMult;
    spherical.makeSafe();
    vector.setFromSpherical( spherical );
    camera.position.copy( center ).add( vector );
    camera.lookAt( center );

Answer 2

我不知道javascript的语法（或者这个代码是什么），但是这样的东西应该有效：

mag2 = camera.position.x * camera.position.x + camera.position.y * camera.position.y;
if(mag2 < 0.01) // to prevent divide-by-zero if the camera hits the origin
  camera.position.x = 0.5;
else
 if(mag2 < 0.25)
   {
     k = 0.5/sqrt(mag2);
     camera.position.x *= k;
     camera.position.y *= k;
   }

Answer 3

supervisord

校准围绕中心圆的相机（数学）

3 个答案: