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-axis sin vs z-axis 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

ThreeJS动作 - 在固定时间段内移动一圈

1 个答案: