Objekte mit WebGL animieren

Das Quadrat rotieren lassen

In diesem Beispiel werden wir tatschlich unsere Kamera rotieren. Dadurch sieht es so aus, als ob wir das Quadrat drehen. Zuerst bentigen wir einige Variablen, um die aktuelle Rotation der Kamera zu verfolgen.

let squareRotation = 0.0;
let deltaTime = 0;

Nun mssen wir die Funktion drawScene() so aktualisieren, dass die aktuelle Rotation auf die Kamera angewendet wird, wenn sie gezeichnet wird. Nachdem die Kamera auf die ursprngliche Zeichenposition fr das Quadrat verschoben wurde, wenden wir die Rotation an.

Aktualisieren Sie in Ihrem "draw-scene.js"-Modul die Deklaration Ihrer drawScene()-Funktion, damit sie die zu verwendende Rotation erhalten kann:

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

Fgen Sie in Ihrer drawScene()-Funktion direkt nach dem mat4.translate()-Aufruf diesen Code hinzu:

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

Dies rotiert die modelViewMatrix um den aktuellen Wert von squareRotation um die Z-Achse.

Um die Animation tatschlich zu realisieren, mssen wir Code hinzufgen, der den Wert von squareRotation im Laufe der Zeit verndert.

Fgen Sie diesen Code am Ende Ihrer main()-Funktion hinzu und ersetzen Sie den vorhandenen drawScene()-Aufruf:

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);

Dieser Code verwendet requestAnimationFrame, um den Browser zu bitten, die Funktion render bei jedem Frame aufzurufen. requestAnimationFrame gibt uns die Zeit in Millisekunden seit dem Laden der Seite. Wir konvertieren diese in Sekunden und ziehen dann die letzte Zeit ab, um deltaTime zu berechnen, was die Anzahl der Sekunden seit dem letzten gerenderten Frame ist.

Zum Schluss aktualisieren wir squareRotation.

Den kompletten Code anzeigen | Dieses Demo auf einer neuen Seite ffnen

• Zurck
• Weiter