Javascript: 使用 threejs 使用 rotate 创建一个模拟时钟

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点和5点之间的时候是4点，分针也是一样的问题
我不确定我使用的数学是否正确，因为随着时间的推移我发现了一些我无法确定的奇怪问题。

有更准确的方法吗？

Answer 1

您无法保证您的间隔实际上每 1000 毫秒触发一次，因此随着时间的推移当然会累积错误，因为您无法 "catching up" 之前的延迟。

我建议您将指针旋转基于使用当前时间作为输入的函数。这样一来，何时你的间隔/触发器/回调执行并不重要，但无论何时它都会显示正确的结果。

数学并不太复杂，时钟显然是 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: 使用 threejs 使用 rotate 创建一个模拟时钟

Javascript: Creating an analog clock with threejs using rotate

javascript

rotation

radians

three.js