我试图让一个物体在固定的时间段内沿着圆形路径移动。
这个应用程序是一个“平滑运动”时钟。
因此,我不想每次 .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 的精确时间段内完成?
最佳答案
我希望我在这里正确理解了你的意思......
取一分钟,其中有 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
关于javascript - ThreeJS 运动 - 在固定时间内绕圈移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28903118/