Zum Inhalt springen
Werkzeug · Design & Animation

Räumliche Effekte, wenn sie wirklich etwas erzählen.

Three.js
Design & Animation
Was es ist

Damit lassen sich dreidimensionale Dinge im Browser darstellen. Beeindruckend — aber nur sinnvoll, wenn es etwas zeigt, das ein Foto nicht zeigen kann.

Ohne

Entweder gar keine Tiefe, oder ein 3D-Effekt, der drei Sekunden lädt und nichts erklärt.

Mit

Räumlichkeit genau dort, wo sie etwas erklärt — sonst gar nicht.

Wie es arbeitet
  1. Eine Szene ist wie ein Filmset

    Es gibt Körper, Licht und eine Kamera. Bewegt wird die Kamera, nicht die Seite.

  2. Gerechnet wird auf der Grafikkarte

    Über WebGL greift der Browser direkt auf die Grafikeinheit zu — dieselbe, die auch Spiele darstellt.

  3. Jedes Bild kostet

    Sechzig Bilder je Sekunde heißt sechzig Berechnungen. Auf einem alten Handy kostet das Akku und Bildrate.

  4. Es braucht immer eine Rückfallebene

    Wessen Gerät es nicht schafft, muss trotzdem etwas sehen. Ohne diese zweite Fassung schließt man Besucher aus.

Was es technisch tut
  1. 3D-Modell
  2. Kamera und Licht
  3. Grafikkarte rechnet
  4. Bild im Browser

Das Bild entsteht sechzigmal in der Sekunde neu. Deshalb hängt hier alles daran, wie stark das Gerät des Besuchers ist.

Damit lassen sich dreidimensionale Szenen im Browser darstellen, gerechnet auf der Grafikkarte. Aufgebaut wird es wie ein Filmset: eine Szene, eine Kamera, Lichter, Materialien. Fertige Modelle kommen als Datei dazu.

Harte Angaben
Grundlage
Grafikkarte im Browser
Bausteine
Szene, Kamera, Licht
Modelle
als Datei
Gewicht
mehrere hundert Kilobyte
So setze ich es ein
01

Ein Produkt, das man drehen und von allen Seiten sehen will

02

Ein Raum oder Grundriss, den man begehen können soll

03

Sparsam: nur, wenn es die Ladezeit wert ist

Wo es nicht passt

Auf älteren Handys kostet das Akku und Bildrate. Ohne eine einfache Rückfallebene schließt man damit genau die Besucher aus, die ohnehin das schwächste Gerät haben.

In der Praxis
Palacio de Sansol

Dort baut sich beim Scrollen eine räumliche Szene auf. Auf dieser Seite hier bewusst nicht — sie wäre die Ladezeit nicht wert.

Nachbarwerkzeuge