A RetroSearch Logo

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

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL below:

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

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

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

let squareRotation = 0.0;
let deltaTime = 0;

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

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

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

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

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

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

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

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

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 を更新します。

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

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