Three.js wird bei der Berechnung der verstrichenen Zeit nicht gerendert

Question

Ich versuche einen einfachen Würfel zu rendern, der rotiert. Um die gleiche Rotationsgeschwindigkeit auf jeder Maschine zu erhalten, berechne ich die Zeitspanne zwischen jedem Bild und verwende diesen Wert in der Rotation. Im Grunde ist es nur:

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

Aber wenn ich diesen Wert nichts bin mit dargestellt. Auch kein Fehler oder Warnung in der Konsole. Wenn Sie den verstrichenen Wert an die Konsole ausgeben, wird eine korrekte Zahl zurückgegeben.

Ich habe versucht, den Unterschied auf einen festen Wert zu setzen, und das funktioniert gut ?!

var elapsed = 16.665487/1000.0;

Ich habe eine jsFiddle für diesen Fall geschaffen. Ich habe es in Chrome und Firefox versucht, beide mit dem gleichen Ergebnis.

Hat jemand eine Idee oder einen Hinweis, was das Problem verursacht?

Answer 1

das Problem bei der Geige ist, dass timestampnull auf te ersten Aufruf von animate sein wird. Dies wiederum führt zu lastFrameTimestamp und elapsed wird auf Null, und schließlich auch die Rotation gesetzt.

Von MDN web docs auf request:

Die Callback-Methode wird ein einziges Argument übergeben, ein DOMHighResTimeStamp, die die aktuelle Zeit anzeigt, wenn sie von request beginnen zu feuern Warteschlange Rückrufe. Mehrere Rückrufe in einem einzelnen Frame erhalten daher denselben Zeitstempel, auch wenn die Zeit während der Berechnung der Arbeitslast jedes vorherigen Callbacks verstrichen ist. Dieser Zeitstempel ist eine Dezimalzahl in Millisekunden, jedoch mit einer minimalen Genauigkeit von 1 ms (1000 μs).

So wird request den Rückruf (animate) einen Zeitstempel, übergeben, die die aktuelle Zeit anzeigt (die Zeit von performance.now() zurück) für wenn request beginnt Rückrufe zu feuern.

Also, wenn Sie die Verwendung von Zeitstempeln in Ihrer Animation machen wollen, dann sollten Sie Ihre Animationsschleife auslösen, indem Aufruf

requestAnimationFrame(animate); 

nicht nur animate();