• Zurück
• Weiter

Das Quadrat rotieren lassen

In diesem Beispiel werden wir tatsächlich unsere Kamera rotieren. Dadurch sieht es so aus, als ob wir das Quadrat drehen. Zuerst benötigen wir einige Variablen, um die aktuelle Rotation der Kamera zu verfolgen.

let squareRotation = 0.0;let deltaTime = 0;

Nun müssen wir die FunktiondrawScene() so aktualisieren, dass die aktuelle Rotation auf die Kamera angewendet wird, wenn sie gezeichnet wird. Nachdem die Kamera auf die ursprüngliche Zeichenposition für das Quadrat verschoben wurde, wenden wir die Rotation an.

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

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

Fügen Sie in IhrerdrawScene()-Funktion direkt nach demmat4.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 vonsquareRotation um die Z-Achse.

Um die Animation tatsächlich zu realisieren, müssen wir Code hinzufügen, der den Wert vonsquareRotation im Laufe der Zeit verändert.

Fügen Sie diesen Code am Ende Ihrermain()-Funktion hinzu und ersetzen Sie den vorhandenendrawScene()-Aufruf:

let then = 0;// Draw the scene repeatedlyfunction 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 verwendetrequestAnimationFrame, um den Browser zu bitten, die Funktionrender 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, umdeltaTime zu berechnen, was die Anzahl der Sekunden seit dem letzten gerenderten Frame ist.

Zum Schluss aktualisieren wirsquareRotation.

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

• Zurück
• Weiter