JavaScript / ThreeJS - 围绕中心Y轴(在3D空间中）在圆圈中移动对象的方程式

javascript / threejs - equation to move an object in a circle around a central y axis (in 3D space)

本文关键字：空间 3D 方程式 对象 移动 ThreeJS JavaScript      更新时间：2023-09-26

我正在试验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）;

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

您可以按照以下行手动设置摄像机的位置：

// 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);

有关围绕 x、y 和 z 轴旋转的矩阵等效项，请参见 http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions。

您还可以调整轨迹球控件以使用键盘而不是鼠标。

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

注意：我还没有测试过这个 - 我在工作。

答案有点晚，但其他人可能希望看看 Three.js 附带的 OrbitControls（在 examples/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));

然后在您的请求中动画帧调用更新函数...

controls.update();

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

相关文章：