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

【问题标题】：calibrating Camera around a centered Circle (Maths)围绕中心圆校准相机（数学）
【发布时间】：2017-10-21 11:50:33
【问题描述】：

我试图在三个以鼠标移动为中心的 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;

希望你能帮助我！谢谢！

【问题讨论】：

所以如果鼠标位置的幅度小于0.5，你希望相机位置与鼠标位置的方向相同，但幅度为0.5，对吗？
是的，你明白我的意思！我必须补充一点，相机是在一条样条线上移动的，它当然正好碰到了相机的中心，这会产生一种奇怪的外观效果。这就是为什么我试图用圆圈在它周围留出一些空间。
@Beta 你知道可靠的解决方案吗？

标签： math three.js camera

【解决方案1】：

使用 THREE.Spherical() 将 x、y、z 有效地转换为 phi、theta。它将减少您的工作量并让您更好地了解相机的移动。仅更改相机的 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 );

【讨论】：

此外，我在样条线上移动相机，它会自动在 3d 空间中向前看。我正在尝试调整您的代码以使其适合我！我必须使用轨道控制对吗？
哦，对不起，amritesh，我想你不明白我想要创造什么样的效果。快速浏览一下 lukasgoj.com/amusd，放入 mp3，您就可以按照样条曲线进行操作。现在我希望相机移动围绕以屏幕位置为中心的 2d 圆的半径移动，因此样条不会碰到视野的中心
在这种情况下，您可以使用 x,y 到 r,theta 转换。这是一个小提琴。 jsfiddle.net/cap34u52/6

【解决方案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;
   }

【讨论】：

非常感谢！那不是我需要的代码，但我用那个帮助解决了它！谢谢！

【解决方案3】：

    var mag2 = mousePosition.x * mousePosition.x + mousePosition.y * mousePosition.y;
    var radius = 0.3;
    if(mag2 < radius){
        if(mousePosition.x <=0 && mousePosition.y >=0){ //1 quadrant
            camOffset.x += ((mousePosition.x - camOffset.x)-radius) * 0.1;
            camOffset.y += ((mousePosition.y - camOffset.y)+radius) * 0.1;               
        }else if(mousePosition.x >0 && mousePosition.y >=0){ //2 quadrant
            camOffset.x += ((mousePosition.x - camOffset.x)+radius) * 0.1;
            camOffset.y += ((mousePosition.y - camOffset.y)+radius) * 0.1;                  
        }else if(mousePosition.x <=0 && mousePosition.y <0){
            camOffset.x += ((mousePosition.x - camOffset.x)-radius) * 0.1;
            camOffset.y += ((mousePosition.y - camOffset.y)-radius) * 0.1;                
        }else if(mousePosition.x >0 && mousePosition.y <0){
            camOffset.x += ((mousePosition.x - camOffset.x)+radius) * 0.1;
            camOffset.y += ((mousePosition.y - camOffset.y)-radius) * 0.1;               
        }       
        camera.position.x += camOffset.x * 30;
        camera.position.y += camOffset.y * 30;
    }else{
        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;
    }

【讨论】：