javascript / threejs - 围绕中心 y 轴（在 3D 空间中）在圆圈中移动对象的方程

Posted 2023-02-27

【中文标题】javascript / threejs - 围绕中心 y 轴（在 3D 空间中）在圆圈中移动对象的方程

【英文标题】：javascript / threejs - equation to move an object in a circle around a central y axis (in 3D space)

【发布时间】：2012-05-07 16:01:11

【问题描述】：

我正在尝试使用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);

您能提供的任何帮助都会很棒。谢谢！

【问题讨论】：

我不知道javascript或threeJS，但方程很简单：x' = cos(t) x - sin(t) y, y' = sin(t) x + cos( t) 是的。

是的 - 我认为我正在努力解决的是时间问题。我需要它根据之前的 x 和 z 值增加，而不是作为时间的函数。我说：

timer = Date.now() * 0.0005; camera.position.x = ((Math.cos( timer ) * 5)*5); camera.position.z = ((Math.sin( timer ) * 5)*5); - 但这意味着如果他们停止点击按钮，下次他们点击它时它会跳来跳去

你试过我的建议了吗？

【参考方案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 以使用键盘而不是鼠标。

默认轨迹球行为：http://mrdoob.github.com/three.js/examples/misc_camera_trackball.html

注意：我尚未对此进行测试 - 我正在工作。

【讨论】：

我相信threejs的一个新变化是你必须在相机统计数据更新之前调用'lookat'。对于他的用例，我猜它总是在看 0,0,0。

【参考方案2】：

答案有点晚，但其他人可能希望查看 Three.js 附带的 OrbitControls（在示例/js/controls 中）。您可以将其设置为自动旋转。它会为您处理数学问题。

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

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

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

controls.update();

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