Dinge in drei Dimensionen rotieren zu lassen klingt kompliziert und das kann es auch sein, aber es gibt einige einfache Rotationen. Wenn wir uns zum Beispiel vorstellen, dass wir unseren Würfel um die Z-Achse drehen, die uns aus dem Bildschirm entgegen kommt, dann drehen wir eigentlich nur ein Quadrat in zwei Dimensionen:

Ein Grund Trigonometrie zu lernen

Wir können die Dinge weiter vereinfachen, indem wir einen einzelnen Knoten an der Position (x,0) betrachten. Mit Hilfe einfacher Trigonometrie finden wir die Position des Punktes nach einer Drehung um den Winkel θ um den Ursprung heraus:
x=xcos(θ) x' = x \cdot cos(\theta)
y=xsin(θ) y' = x \cdot sin(\theta)
Wenn Du nicht verstehst, wie es zu dieser Gleichung kam, hilft Dir vielleicht dieses Video.

Rotation eines Punktes um den Ursprung

Das obige Beispiel ermöglicht es uns, einen Punkt zu drehen, der auf der X-Achse über dem Ursprung liegt, aber was, wenn der Punkt nicht auf der X-Achse beginnt? Dies erfordert eine leicht erweiterte Trigonometrie. Wenn wir den Abstand zwischen dem Punkt (x, y), den Ursprung r r und den Winkel zwischen der Linie zu (x, y) und der X-Achse α α aufrufen, dann:
Wenn wir um β zu Punkt (x', y') drehen, dann:
Wenn wir ein paar trigonometrische Formeln verwenden, erhalten wir:
Wenn wir die obigen Werte für x und y ersetzen, erhalten wir eine Gleichung für die neuen Koordinaten als Funktion der alten Koordinaten und des Drehungswinkels:

Eine Drehungsfunktion schreiben

Jetzt da wir die Mathematik beherrschen, können wir eine Funktion zur Drehung eines Knotenpunkts, oder noch besser, unseres Arrays von Knotenpunkten, um die Z-Achse schreiben. Diese Funktion wird alle Knotenpunkte im Array durchlaufen, ihre aktuellen X- und Y-Koordinaten finden und sie dann aktualisieren. Wir speichern sin(theta) und cos(theta) außerhalb der Schleife, damit wir sie nur ein Mal berechnen müssen:
var rotateZ3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var y = node[1];
      node[0] = x * cosTheta - y * sinTheta;
      node[1] = y * cosTheta + x * sinTheta;
   }
};
Um den Würfel um 30 Grad zu drehen, rufen wir die Funktion folgendermaßen auf:
rotateZ3D(30);
Du kannst den gedrehten Würfel hier sehen - er sieht ein bisschen interessanter aus als vorher, aber nicht viel:

In drei Dimensionen drehen

Wir können nun unseren Würfel in zwei Dimensionen drehen, aber er sieht immer noch wie ein Quadrat aus. Was machen wir, wenn wir unseren Würfel um die Y-Achse (die vertikale Achse) drehen wollen? Wenn wir uns vorstellen, dass wir auf unseren Würfel herunterblicken, während wir ihn um die Y-Achse drehen, dann würden wir ein sich drehendes Quadrat sehen, genauso wie wenn wir es um die Z-Achse drehen würden.
Wir können unsere Trigonometrie und Funktion von oben wieder heranziehen und die Achse umbenennen, so dass die Z-Achse zur Y-Achse wird. In diesem Fall ändern sich die Y-Koordinaten des Knotenpunkts nicht, nur X und Y:
var rotateY3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var z = node[2];
      node[0] = x * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + x * sinTheta;
   }
};
Und wir können den gleichen Parameter verwenden, um eine Funktion anzulegen, die unseren Würfel um die X-Achse dreht:
var rotateX3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var y = node[1];
      var z = node[2];
      node[1] = y * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + y * sinTheta;
   }
};
Jetzt wo wir diese Funktionen definiert haben, können wir um 30 Grad um die anderen beiden Achsen drehen:
rotateX3D(30);
rotateY3D(30);
Du kannst den kompletten Code unten sehen. Benutze den Zahlenschieber, um die Werte im Funktionsaufruf zu verändern.

Benutzerinteraktion

Wir könnten den Würfel drehen, indem wir Funktionsaufrufe hinzufügen, allerdings ist es viel nützlicher (und benutzerfreundlicher) wenn wir es dem Betrachter erlauben, den Würfel mit der Maus zu drehen. Dafür müssen wir eine Funktion mouseDragged() erstellen. Diese Funktion wird automatisch aufgerufen, wenn man etwas mit der Maus zieht.
mouseDragged = function() {
   rotateY3D(mouseX - pmouseX);
   rotateX3D(mouseY - pmouseY);
};
mouseX und mouseY sind integrierte Variablen, welche die aktuelle Position des Mauszeigers enthalten. mouseX und mouseY sind integrierte Variablen, welche die Position des Mauszeigers im vorherigen Frame enthalten. Wenn sich die X-Koordinate also erhöht hat (wir bewegen die Maus nach rechts), senden wir einen positiven Wert an rotateY3D() und drehen den Würfel gegen den Uhrzeigersinn um die Y-Achse.
Du kannst es dir hier selbst anschauen.
Lade