Question

我的场景中有一个模拟时钟，我想用当前时间更新。现在我可以通过以1秒的间隔计算每只手的旋转来让时钟保持时间，但我看到分针和时针的一些奇怪的结果。

hourHand = scene.getObjectByName('Box001');
minuteHand = scene.getObjectByName('Box002');
secondHand = scene.getObjectByName('Cylinder002');

var d = new Date();

var mins = d.getMinutes();
var secs = d.getSeconds();
var hours = d.getHours();

minuteHand.rotateY((-mins / 60) * (2 * Math.PI));
secondHand.rotateY(((mins /60) + (-secs / 3600)) * (2 * Math.PI));
hourHand.rotateY(((-hours / 12) + (mins / 720)) * (2 * Math.PI));


setInterval(function(){
    minuteHand.rotateY((2 * Math.PI) / -3600);
    secondHand.rotateY((2 * Math.PI) / -60);
    hourHand.rotateY((2 * Math.PI) / (-3600 * 12));
},1000);

我遇到的问题是：

如果时间是4:30，则时针位于4时应该在4和5之间，与分针相同的问题
我不确定我使用的数学是否正确，因为随着时间的推移，我看到一些奇怪的问题，我无法确定。

有更准确的方法吗？

Answer 1

你不能保证你的间隔实际上每1000毫秒发射一次，所以当然会随着时间的推移累积错误，因为你没有办法“追赶”以前的延迟。

我建议您将手旋转基于使用当前时间作为输入的函数。这样，当执行间隔/触发/回调时，无关紧要，但无论何时执行，都会显示正确的结果。

数学并不太复杂，时钟显然有360度，所以从我的头顶意味着

(Date.now()/1000)%60 * 6将是你的第二个旋转角度（假设0°是顶部），同样

(Date.now()/60000)%60 * 6应该是分钟轮换和

~~(Date.now()/3600000)%24 * 15你的小时手。~~ 更新愚蠢的我，设置这个公式24小时轮换。您希望正常时钟为12小时，因此会变为：

(Date.now()/3600000)%12 * 30

用一粒盐进行这些计算，没有花时间来验证这一点。

Javascript：使用rotate创建具有threejs的模拟时钟

1 个答案: