javascript - ThreeJS 运动 - 在固定时间内绕圈移动

Question

我试图让一个物体在固定的时间段内沿着圆形路径移动。

这个应用程序是一个“平滑运动”时钟。

因此，我不想每次 .getSeconds() 更新时将位置移动到固定坐标，而是想使用 ( .getSeconds() + ( .getMilliseconds( )/1000 ) 以便始终准确地表示秒针的运动。

过去为了做圆周运动，我使用了以下一对函数:

    var OrbitCalculationX = function(velocityPartial, orbitalRadius) {
        return (Math.sin(Date.now() / 16000 * velocityPartial) * orbitalRadius);
    };
    var OrbitCalculationZ = function(velocityPartial, orbitalRadius) {
        return (Math.cos(Date.now() / 16000 * velocityPartial) * orbitalRadius);
    };`

计算中的16000控制着轨道时间。然而，这是不准确的。有没有办法控制具有精确时间限制的x 轴 sin 与 z 轴 cos 方程组？

如果没有，有没有办法设置动画路径在 THREEjs 的精确时间段内完成？

Answer 1

我希望我在这里正确理解了你的意思......

取一分钟，其中有 60 秒和 60,000 毫秒。因此，我们想要的第一步是获得该范围内的数字。

var millisInMinute = Date.now() % 60000;

我们接下来要做的就是标准化该值，使​​其从 0 变为 1:

var millisInMinuteNormalized = millisInMinute / 60000;

现在，要使用 sin 和 cos 进行完整的圆周运动，我们知道我们的变量将在 0 和 1 之间，我们需要将其乘以 2*PI see plot here

其余的半径就像你所做的那样，结果是

var orbitCalculation = function(radius) {
    return {x: (Math.sin((Date.now()%60000)/60000 * Math.PI * 2) * radius),
            z: (Math.cos((Date.now()%60000)/60000 * Math.PI * 2) * radius)};
}

现在可以正确显示实际秒数，您可以将其与系统时间进行比较。这是working JSFiddle