Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL below:

用 WebGL è®©ç›®æ ‡åŠ¨èµ·æ¥ - Web API

让我们开始旋转正方形。我们需要的第一件事是创建一个变量，用于跟踪正方形的当前旋转：

var squareRotation = 0.0;

现在我们需要更新drawScene()函数以在绘制正方形时将当前旋转应用于正方形。转换为正方形的初始绘图位置后，我们像这样应用旋转：

mat4.rotate(
  modelViewMatrix, // destination matrix
  modelViewMatrix, // matrix to rotate
  squareRotation, // amount to rotate in radians
  [0, 0, 1],
); // axis to rotate around

这会将 modelViewMatrix 的当前值squareRotation绕 Z 轴旋转。

要进行动画制作，我们需要添加squareRotation随时间更改值的代码。为此，我们可以创建一个新变量来跟踪上次动画播放的时间（我们称之为then），然后将以下代码添加到主函数的末尾

var then = 0;

// Draw the scene repeatedly
function render(now) {
  now *= 0.001; // convert to seconds
  const deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, deltaTime);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

该代码用于 requestAnimationFrame 要求浏览器在每一帧上调用函数“render”。requestAnimationFrame 自页面加载以来经过的时间（以毫秒为单位）。我们将其转换为秒，然后从中减去，以计算 deltaTime 自渲染最后一帧以来的秒数。在 drawscene 的结尾，我们添加了要更新的代码 squareRotation。

squareRotation += deltaTime;

该代码使用自上次我们更新值以来所经过的时间squareRotation来确定旋转正方形的距离。

查看完整代码 | 在新页面中打开示例

• 上一页
• 下一页

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4