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

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

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，同样的问题之间分针
我不知道我使用的数学是否正确，因为随着时间的推移，我看到一些奇怪的问题，我无法确定。

有没有更确切的方法来做到这一点？

来源

2015-02-09 DezOnlyOne

你能提供一个小提琴吗？ – Quince 2015-02-09 16:31:51

对不起，我无法做一个小提琴，因为我正在使用的模型的跨域问题和一些隐私问题。我会尽可能提供任何信息。 – DezOnlyOne 2015-02-09 21:49:25

我做了一个提示更新的小提琴。 https://jsfiddle.net/DezOnlyOne/ag5gds3f/1/ – DezOnlyOne 2015-02-10 16:16:41

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

我建议您将手部旋转基于使用当前时间作为输入的函数。这种方式你的间隔/触发器/回调执行没关系，但每当它执行时，它将显示正确的结果。

数学是不是太复杂，一个时钟具有明显的360度，所以从我的头顶，这将意味着

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

(Date.now()/60000)%60 * 6应该是微小旋转和

~~(Date.now()/3600000)%24 * 15您hourHand。~~ 更新傻我，设置这个公式为一个24小时的旋转。你会想这是一个正常的时钟 12小时，因此这将成为：

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

采取这些计算用一粒盐，没有采取验证这一点的时间。

来源

2015-02-09 16:48:49 kasoban

第二只和分针是伟大的。时针已关闭。我现在正在研究这个计算。谢谢你的帮助。你让我走得更近了。 – DezOnlyOne 2015-02-09 18:31:32

啊，对不起，当然是错的。对此并没有太长的想法，正如你所看到的，基于24小时轮换计算你的时针。虽然设计师可能认为这是一个奇特的想法，但我猜你宁愿每轮旋转12小时。现在更新我的答案。 – kasoban 2015-02-10 10:08:43

我已根据您的建议更新了我的功能。只有时针仍然关闭。我理解使用的数学，它是有道理的。也许getTime返回错误的值？我是否需要将新日期设置为我的时区？这是我制作的小提琴。 https://jsfiddle.net/DezOnlyOne/ag5gds3f/1/ – DezOnlyOne 2015-02-10 16:19:16

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

回答

相关问题