ThreeJS motion - 在固定时间段内绕圈移动

Question

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

这个应用是一个'smooth motion'时钟。

所以，我不想每次 .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 motion - 在固定时间段内绕圈移动

ThreeJS motion - move in a circle over fixed time period

javascript

time

three.js

trigonometry