Three.js在計算所用時間時不呈現

我正在嘗試呈現旋轉的簡單立方體。爲了在每臺機器上獲得相同的旋轉速度，我計算每幀之間的時間間隔，並在旋轉中使用這個經過的值。基本上它只是：Three.js在計算所用時間時不呈現

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

但是，當我使用這個值沒有任何顯示。在控制檯中也沒有錯誤或警告。輸出經過的值到控制檯返回一個正確的數字。

我試圖設置一個固定值的差異，這工作正常嗎？！

var elapsed = 16.665487/1000.0;

我們爲您的這種情況下，jsFiddle。我試過Chrome和Firefox，兩者的結果都一樣。

有沒有人有想法或提示是什麼原因導致問題？

來源

2017-08-27 Auskennfuchs

THREE.clock.getDelta（）做這項工作正確的觸發循環播放動畫。但我仍然很好奇爲什麼我的方法不起作用 – Auskennfuchs

'console.log（cube.rotation.x + = 0.1 * elapsed）'outputs NaN – 2pha

您必須將Date.now（）作爲參數傳遞給第一個動畫調用。 – micnil

你的小提琴的問題是timestamp將null第一個電話animate。這又導致lastFrameTimestamp和elapsed被設置爲null，最後也是旋轉。

從MDN web docs上requestAnimationFrame：

回調方法傳遞一個參數，一個DOMHighResTimeStamp，其指示當前時間通過時排隊requestAnimationFrame回調開始射擊。因此，即使在計算每個先前回調的工作負載期間已經過去了時間，單個幀中的多個回調也會收到相同的時間戳。此時間戳是一個十進制數，以毫秒爲單位，但最小精度爲1毫秒（1000微秒）。

所以requestAnimationFrame會通過回調（animate）時間戳指示當前時間的時候requestAnimationFrame開始火回調（從performance.now()返回的時間）。

所以，如果你想利用動畫中的時間戳，那麼你應該通過調用

requestAnimationFrame(animate);

不僅僅是animate();

來源

2017-08-27 20:04:42 micnil

你是對的，這解決了這個問題。謝謝。 – Auskennfuchs

Three.js在計算所用時間時不呈現

回答

相關問題