JavaScript / Three.js - 在三维空间中围绕中心y轴移动一个对象的方程式

Question

我正在尝试使用threeJS，并已经将相机定位并查看场景的原点（0,0,0）。我想在一定距离（半径）内围绕y轴将该相机移动，同时保持其对原点的关注，但我不确定如何设置方程式。目前，我只是旋转对象本身，但我想旋转相机。以下是移动网格的代码：

function checkRotation(){
    if (keyboard.pressed("left")){
        mesh.rotation.y += .05;
    }

    if (keyboard.pressed("right")){
        mesh.rotation.y -= .05;
    }
}

以下是移动相机的示例代码：

camera.position.x = ???（一些移动 x 位置的方程式） camera.position.z = ???（一些移动 z 位置的方程式） camera.lookAt(mesh.position);

希望这能对您有所帮助。谢谢！

- mheavers

---

我不懂JavaScript或threeJS，但方程非常简单：x' = cos(t) x - sin(t) y，y' = sin(t) x + cos(t) y。 - Beta

是的 - 我认为我正在苦恼的是时间问题。我需要根据先前的x和z值递增，而不是作为时间函数。我通过说以下内容使某些东西起作用： - mheavers

计时器 = Date.now() * 0.0005; 相机位置.x = ((Math.cos( 计时器 ) * 5)*5); 相机位置.z = ((Math.sin( 计时器 ) * 5)*5); - 但这意味着如果他们停止按按钮，下次再按它时物体会跳动。 - mheavers

Answer 1

您可以手动设置相机的位置，方法如下：

// let theta be the amount you want to rotate by
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

请参考http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions获取关于绕x、y和z轴旋转的矩阵。

你也可以尝试修改TrackballControls以使用键盘而非鼠标。

默认的Trackball行为：http://mrdoob.github.com/three.js/examples/misc_camera_trackball.html

注意：我还没有测试过——我正在工作中。

- Iskar Jarak

---

我相信threejs的一个新变化是，在更新相机状态之前必须调用“lookat”。对于他的用例，我猜它总是看着0,0,0。 - david

Answer 2

虽然回答有点晚，但其他人可能希望查看Three.js中自带的OrbitControls（在examples/js/controls目录下）。您可以将其设置为autoRotate。它会为您处理数学计算。

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [whatever speed you want]

camera.lookAt(new THREE.Vector3(0,0,0));

然后在你的requestAnimationFrame调用的update函数中...

controls.update();

如果你不希望用户自己控制相机位置，我相信你可以找到一种方法禁用它，或者只提取你需要的代码...

- poshaughnessy