计算经过时间时，Three.js不会渲染

Question

我正在尝试渲染一个正在旋转的简单立方体。为了在每台机器上获得相同的旋转速度，我计算每帧之间的时间跨度并在旋转中使用该经过的值。 基本上只是：

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

但是当我使用这个值时，没有显示任何内容。控制台中也没有错误或警告。将经过的值输出到控制台会返回正确的数字。

我尝试将差异设置为固定值，这样可以正常使用？！

var elapsed = 16.665487/1000.0;

我为此案例创建了jsFiddle。我尝试过在Chrome和Firefox中使用相同的结果。

有人有想法或暗示导致问题的原因吗？

Answer 1

小提琴的问题在于timestamp的第一次调用animate将 null 。这反过来导致lastFrameTimestamp和elapsed设置为 null ，最后也是旋转。

来自 requestAnimationFrame 的MDN web docs：

  

回调方法传递一个参数，一个DOMHighResTimeStamp，它指示requestAnimationFrame排队的回调开始触发的当前时间。因此，即使在计算每个先前回调的工作负载期间已经过了时间，单个帧中的多个回调也会接收相同的时间戳。此时间戳是十进制数，以毫秒为单位，但最小精度为1ms（1000μs）。

因此requestAnimationFrame将向回调函数（animate）传递一个时间戳，该时间戳指示requestAnimationFrame开始触发回调时的当前时间（从performance.now()返回的时间）。

因此，如果您想在动画中使用时间戳，那么您应该通过调用

来触发动画循环

requestAnimationFrame(animate);

不只是animate();