使用 WebGL 制作动画对象
使正方形旋转
在这个示例中，我们将实际旋转我们的相机。这样做会使它看起来像是我们正在旋转正方形。首先，我们需要一些变量来跟踪相机的当前旋转。
注意：在您的“webgl-demo.js”脚本的开头添加此代码
js
let squareRotation = 0.0;
let deltaTime = 0;
现在我们需要更新 drawScene() 函数，以便在绘制相机时将当前旋转应用于相机。在将相机平移到正方形的初始绘制位置后，我们应用旋转。
注意：在您的“draw-scene.js”模块中，更新 drawScene() 函数的声明，以便可以传递要使用的旋转。
js
function drawScene(gl, programInfo, buffers, squareRotation) {
注意：在您的 drawScene() 函数中，在 mat4.translate() 调用行的正下方添加此代码
js
mat4.rotate(
modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to rotate
squareRotation, // amount to rotate in radians
[0, 0, 1],
); // axis to rotate around
这将围绕 Z 轴根据 squareRotation 的当前值旋转 modelViewMatrix。
为了真正制作动画，我们需要添加更改 squareRotation 值的代码。
注意：在您的 main() 函数的末尾添加此代码，替换现有的 drawScene() 调用
js
let then = 0;
// Draw the scene repeatedly
function render(now) {
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
drawScene(gl, programInfo, buffers, squareRotation);
squareRotation += deltaTime;
requestAnimationFrame(render);
}
requestAnimationFrame(render);
此代码使用 requestAnimationFrame 请求浏览器在每一帧上调用函数“render”。requestAnimationFrame 将页面加载以来的时间（以毫秒为单位）传递给我们。我们将它转换为秒，然后从中减去上次时间来计算 deltaTime，它是自渲染上一帧以来经过的秒数。
最后，我们更新 squareRotation。