Trois.js ne rend pas lors du calcul du temps écoulé

Question

J'essaie de rendre un cube simple qui tourne. Pour obtenir la même vitesse de rotation sur chaque machine, je calcule le laps de temps entre chaque trame et j'utilise cette valeur écoulée dans la rotation. Fondamentalement, il est juste:

var elapsed = (timestamp - lastFrameTimestamp)/1000.0; // doesn't show the cube

Mais quand j'utilise ce rien de valeur est affichée. Aussi pas d'erreur ou d'avertissement dans la console. La sortie de la valeur écoulée vers la console renvoie un nombre correct.

J'ai essayé de définir la différence à une valeur fixe et cela fonctionne très bien ?!

var elapsed = 16.665487/1000.0;

J'ai créé un jsFiddle pour ce cas. J'ai essayé dans Chrome et Firefox, les deux avec le même résultat.

Quelqu'un a-t-il une idée ou un indice de ce qui cause le problème?

Answer 1

Le problème avec votre violon est que timestamp sera nulle sur le premier appel te de animate. Cela conduit à lastFrameTimestamp et elapsed est réglé sur null, et enfin aussi la rotation.

De MDN web docs sur requestAnimationFrame:

La méthode de rappel est passé un seul argument, un DOMHighResTimeStamp, qui indique l'heure actuelle quand callbacks mises en attente par requestAnimationFrame commencent à tirer. Par conséquent, plusieurs rappels dans une seule trame reçoivent le même horodatage même si le temps s'est écoulé pendant le calcul de la charge de travail de chaque rappel précédent. Cet horodatage est un nombre décimal, en millisecondes, mais avec une précision minimale de 1 ms (1000 μs).

Alors requestAnimationFrame passera le rappel (animate) un horodatage qui indique l'heure actuelle (le temps de retour de performance.now()) quand requestAnimationFrame commence à tirer callbacks.

Donc, si vous voulez utiliser dans votre animation horodatages, vous devez déclencher votre boucle d'animation en appelant

requestAnimationFrame(animate); 

pas seulement animate();