WebGL でのオブジェクトのアニメーション

正方形を回転させる

この例では、実際にはカメラを回転させることで、正方形を回転させているように見せていきます。最初に、カメラの現在の回転を追跡する変数が必要です。

メモ: このコードを "webgl-demo.js" スクリプトの始めに追加してください。

js
let squareRotation = 0.0;
let deltaTime = 0;

ここで drawScene() 関数を更新して、カメラを描画するときに現在の回転を適用する必要があります。カメラを正方形の初期描画位置に移動させた後、回転を適用します。

メモ: "draw-scene.js" モジュールで、 drawScene() 関数の宣言を更新し、使用する回転を渡せるようにします。

function drawScene(gl, programInfo, buffers, squareRotation) {

メモ: drawScene() 関数の中で、 mat4.translate() の呼び出しの直後に次のコードを追加してください。

js
mat4.rotate(
  modelViewMatrix, // 出力先の行列
  modelViewMatrix, // 回転する行列
  squareRotation, // ラジアンでの回転量
  [0, 0, 1],
); // 回転軸

これは modelViewMatrix を現在の squareRotation の値だけ、Z 軸を中心に回転させます。

実際にアニメーションさせるには、 squareRotation の値を時間とともに変化させるコードを追加する必要があります。

メモ: このコードを main() 関数の終わりに追加し、既存の drawScene() の呼び出しを置き換えてください。

js
let then = 0;

// 繰り返しシーンを描画
function render(now) {
  now *= 0.001; // 秒に変換
  deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, squareRotation);
  squareRotation += deltaTime;

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

このコードでは requestAnimationFrame を用いて、各フレームで関数 "render" を呼び出すようブラウザーに依頼します。 requestAnimationFrame はページが読み込まれてからの時刻をミリ秒単位で渡します。それを秒に変換し、そこから前回の時刻を引いて deltaTime を計算します。

最後に squareRotation を更新します。

コードを確認する | 新しいページでデモを開く

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月22日 by MDN contributors.

View this page on GitHub • Report a problem with this content

WebGL でのオブジェクトのアニメーション

In this article

正方形を回転させる

Help improve MDN