Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Tridiv: Webbasierter CSS-Editor für 3D-Modelle

Mit Tridiv lassen sich einfach dreidimensionale CSS-Objekte erstellen. Die Web-App fungiert dabei als vollwertiges 3D-Modellierungswerkzeug.

Wer mit CSS 3D-Objekte erstellen will, sollte definitiv einen Blick auf die Web-App Tridiv werfen. Der französische Entwickler Julian Garnier hat mit ihr ein vollfunktionsfähiges 3D-Modellierungswerkzeug für den Browser geschaffen.

Tridiv: 3D-Objekte im Browser für den Browser erstellen

Tridiv: Die Web-App hilft bei der Erstellung dreidimensionaler CSS-Objekte. (Screenshot: Tridiv)
Tridiv: Die Web-App hilft bei der Erstellung dreidimensionaler CSS-Objekte. (Screenshot: Tridiv)

Die Oberfläche von Tridiv entspricht dem, was man generell von einem solchen Modellierungswerkzeug erwarten würde. Der Bildschirm ist in vier Abschnitte unterteilt: Einer zeigt das fertige Objekt, die drei anderen ein Drahtgittermodell aus verschiedenen Perspektiven – also von oben, von vorne und von der Seite. So lassen sich die einzelnen Bestandteile eines dreidimensionalen Objekts leicht begutachten und manipulieren.

Nutzer haben die Möglichkeit, ihre 3D-Objekte aus Quadern, Zylindern, Prismen und Pyramiden zu konstruieren. Einzelne Bestandteile lassen sich bewegen, rotieren oder an den Rändern manipulieren. Dass mit der App auch vergleichsweise aufwendige Objekte erstellt werden können, zeigt Garnier gleich an ein paar Beispielen auf der Webseite. So hat der Pariser beispielsweise die klassische Spielkonsole Nintendo Entertainment System oder einen X-Wing aus Krieg der Sterne in 3D nachgebaut. Natürlich können auch diese Objekte direkt in Tridiv bearbeitet werden.

Tridiv: Ergebnisse können auf Codepen übertragen werden

Ein NES nachgebaut in Tridiv. (Screenshot: Tridiv)
Ein NES nachgebaut in Tridiv. (Screenshot: Tridiv)

Über die Vorschau kann man sein dreidimensionales Objekt aus allen Winkeln betrachten. Hier findet sich auch der entsprechende HTML- beziehungsweise CSS-Code, der sich auch bequem auf Codepen zur weiteren Bearbeitung übertragen lässt.

Einziger Wermutstropfen: Obwohl Tridiv laut Entwickler mit allen Browsern funktionieren würde, die das CSS-Property transform-style: preserve-3d unterstützen, hat Garnier sich entschieden, aufgrund mangelnder Performance vorerst nur Chrome- und Safari-Support anzubieten.

Tridiv findet ihr auf tridiv.com. Ein animiertes Beispiel des Entwicklers, das zeigt, was mit der App alles möglich ist, auf Codepen.

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Thomas

Spitzenmäßig umgesetzt, keine Frage. Aber "vollwertiges 3D-Modellierungswerkzeug" ist schon etwas hochgegriffen ;) Wer sonst mit Blender, Cinema 4D, o.Ä. arbeitet ist nach der Einleitung etwas enttäuscht.

Nette Spielerei auf jeden Fall, im Hinterkopf behalten und mal schauen ob sich mal ein praktischer Nutzen im Arbeitsalltag findet.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst