正方形を回転させる
この例では、実際にはカメラを回転させることで、正方形を回転させているように見せていきます。最初に、カメラの現在の回転を追跡する変数が必要です。
メモ:このコードを "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, // 出力先の行列 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 を更新します。