Interaktiven (drehbaren) 3D Würfel programmieren

Du bewegst Dein Handy und der Würfel dreht sich? Ja! Genau das programmieren wir heute. Mit Hilfe der Geräte Ausrichtung über JavaScript.

Demo

Die nachfolgende Demo funktioniert nur auf mobilen Endgeräten. Auf der Desktop-Version wird der 3D Würfel einfach starr angezeigt.

Deshalb schnapp Dir direkt Dein Handy und schau Dir den fancy Würfel an!

See the Pen Interactive 3D Cube by WebDEasy (@WebDEasy) on CodePen.

Der Würfel

Den Würfel habe ich mit Hilfe dieser Anleitung erstellt: CSS 3D Cube. Trotzdem möchte ich die Umsetzung selber noch einmal kurz in eigenen Worten erklären.

HTML

Im HTML haben wir einen äußeren Container und noch einen zusätzlichen Container, in dem sich die einzelnen Seiten des Würfels befinden.

<div class="wrapper">
  <div class="cube">
    <div>Top</div>
    <div>Bottom</div>
    <div>Left</div>
    <div>Right</div>
    <div>Back</div>
    <div>Front</div>
  </div>
</div>

CSS

Hier zentrieren wir den Würfel im Wrapper, geben die Höhe und Breite an und sorgen mit dem perspective und transform-style Attribut dafür, dass der Würfel nach 3D aussieht.

.wrapper {
  height: 250px;
  perspective: 700px;
  -webkit-perspective: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: arial, sans-serif;
}

.cube {
  width: 100px;
  height: 100px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(50deg);
}

Nachfolgend geben wir Höhe und Breite der einzelnen Teile an und zentrieren den Text auf den einzelnen Seiten.

.cube > div {
  position: absolute;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  text-transform: uppercase;
}

Nun gehen wir noch die einzelnen Seiten durch und setzen die Position und Rotation. Dabei müssen wir den Z-Wert auf die Hälfte der Breite setzen: 120px/2 = 60px.

.cube div:nth-child(1) {
  transform:translateZ(60px);
  background:#237ad4;
}

.cube div:nth-child(2) {
  transform: rotateX(180deg) translateZ(60px);
  background:#2070c3;
}

.cube div:nth-child(3) {
  transform: rotateY(-90deg) translateZ(60px);
  background:#2e84dd;
}

.cube div:nth-child(4) {
  transform:rotateY(90deg) translateZ(60px);
  background:#3f8edf;
}

.cube div:nth-child(5) {
  transform: rotateX(90deg) translateZ(60px);
  background:#2070d3;
}

.cube div:nth-child(6) {
  transform:rotateX(-90deg) translateZ(60px);
  background:#1d67b2;
}

Geräte Ausrichtung erkennen

Der Teil, der sich erstmal schwer anhört, ist im Prinzip der Einfachste.

Die Erkennung der Ausrichtung des Gerätes können wir über das JavaScript Event deviceorientation abfangen.

Dabei ist der Wert der x-Achse die Eventvariable gamma und der Wert der y-Achse die Eventvariable beta.

window.addEventListener("deviceorientation", (e) => {
  const beta = e.beta;
  const gamma = e.gamma;
  
  // disable for desktop devices
  if(beta == null || gamma == null) {
    return false;  
  }
  
  document.getElementsByClassName('cube')[0].style.transform = 'rotateY(' + gamma*3 + 'deg) rotateX(' + beta*3 +'deg)';
}, true);

Wenn der Wert einer Variable null ist, handelt es sich um eine Desktopgerät und wir brechen das Event ab.

Falls es sich um ein Mobilgerät handelt, setzen wir die Variable für x und y und multiplizieren diese jeweils mit 3. Damit passen wir die Drehgeschwindigkeit beim Bewegen des Mobilgerätes an.

Doku zu deviceorientation: hier.

Fazit

Das Event deviceorientation ist für diesen, aber auch für viele andere Zwecke sehr gut geeignet und bei vielen Entwicklern unbekannt. Wo möchtest Du diese Funktion einsetzen? Feedback und Verbesserungsvorschläge gerne in die Kommentare! 🙂