Javascript: Создание аналоговых часов с тремяjs с помощью поворота

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 ваш hourHand. Обновление глупо меня, настройте эту формулу для 24-го поворота. Вы бы хотели, чтобы это было 12h для нормального часов, так что это стало бы:

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

взять эти расчеты с зерном соли, не торопитесь, чтобы проверить это.