3D mit CSS, three.js und DOM
Steven hat für die dreidimensionalen Perspektiven in seinem „Making Love To WebKit“ Demo CSS 3D Transforms und three.js - Mr. Doob’s JavaScript 3D Engine - verwendet. Three.js ist eine umfangreiche JavaScript 3D API mit der man Szenen, Kameras, Objekte, Lichter, Materialien und mehr im Browser erstellen kann. Derzeit funktioniert Stevens 3D Demo nur mit WebKit-Browsern wie Chrome und Safari, die CSS 3D bereits jenseits des Betastadiums unterstützen. Aber bald werden auch Internet Explorer 10 und Firefox bei CSS 3D mit an Bord sein, wie er in seinem Blogpost schreibt. Auf WebGL hat Steven absichtlich verzichtet da es keine DOM-Elemente oder native Interaktion unterstützt und beim Scrollen zuviel Verzögerung bedeutet hätte. Neben der umfassenden Standardbibliothek für 3D-Manipulation hat three.js den Vorteil, dass die Rendering-Komponente flexibel austauschbar ist. Man hat die freie Wahl zwischen 2D Canvas, WebGL Canvas oder SVG und bleibt so erst einmal unabhängig bei der Ausgabe.
Verschieben oder Drehen eines Objekts geschieht in Stevens 3D-Demo nur über die Änderung einer CSS-Eigenschaft. Das Gleiche gilt für die Kamera: Die gesamte Szene ist in einem <div>-Tag eingepackt, das seine eigene 3D Transformation hat. Steven hat dann einen CSS 3D Renderer ergänzt, der eine three.js Szene ausliest und als DOM-Objekt mit gewünschter 3D-Position, Orientierung und Aussehen ausgibt. Das funktioniert so nur mit einfachen geometrischen Formen wie Linien oder Rechtecken aber mehr ist hier auch gar nicht nötig wie Steven schreibt.
Wie kommt man eigentlich auf so etwas?
Stevens Idee begann mit einer zufälligen Entdeckung: Wenn man eine CSS Perspektive auf einem scrollbaren <div> platziert, dann behalten die 3D Elemente im Inneren des <div> Tags ihre Perspektive während des Scrollens. Das führt zu nativen Parallaxeffekten und lässt die Objekte quasi aus der Seite springen. Daraufhin hat er sich gefragt, wie weit man das wohl treiben kann. Und er hat es weit getrieben indem er auch noch einen eigenen Editor geschrieben hat.
Der Editor hilft ihm dabei, seine 3D-Objekte mit verschiedenen Koordinaten in einer three.js-Szene zu platzieren und auf einfache Art und Weise aus verschiedenen Blickwinkeln mit Position, Orientierung, Tiefe und Schattierung zu versehen. Laut Steven wäre das von Hand „ein Projekt für die Ewigkeit“ gewesen.
Weitere Einzelheiten zu Designprozess, Performance oder Publishing dieses abgefahrenen CSS 3D Demos findet Ihr in Stevens Blogpost oder im zugehörigen Google+ Thread.
Weiterführende Links:
18 Answers
von manuel 18.01.2012 (09:26Uhr) 1.
Euer Beitrag nutzt verdammt viel. Die Seite wie hier abgebildet gibt es gar nicht mehr. Die ist jetzt nur schwarz(weiß.
von Dustin Klein via facebook 18.01.2012 (09:34Uhr) 2.
Schlechter Zeitpunkt für die News, denn heute ist Acko.net auf Grund der Proteste in den USA schwarz...
von Bernd Wambach via facebook 18.01.2012 (09:34Uhr) 3.
ja coole sache ...
von Tino Che Bonkers via facebook 18.01.2012 (09:35Uhr) 4.
warum ist das bei mir nur schwarz ? chrome, firefox
von a.wachert 18.01.2012 (09:39Uhr) 5.
Warum das so ist, steht aber auch auf der Seite :P Das ist der ganze SOPA Quatsch den grad viele Webmaster abziehen. Wird morgen oder im Laufe des Tages sicher wieder "hybsch" bunt sein ;)
Hats mal jemand auf einem Smartphone geöffnet (z.B. gestern als Jan drüber geticket hat auf G+)? Selbst da läuft das erstaunlich gut... (Android auf Desire-Z).
von Christoph 18.01.2012 (09:40Uhr) 6.
Nicht gleich nörgeln... zuerst mal lesen wieso die Seite heute in SW ist - steht alles auf der Seite selbst.
von manuel 18.01.2012 (09:46Uhr) 7.
Ich nörgel ja nicht gleich. Ich mein ja nur dass sich t3n ein anderes Veröffentlichungsdatum für diesen Artikel aussuchen hätte können anstatt dann, wenn die Seite schwarz-weiß ist ;)
von Dustin Klein via facebook 18.01.2012 (09:48Uhr) 8.
@Tino Che Bonkers: Lies die mal den Text durch. Die Seite ist heute aus Protest gegen den "Stop Online Piracy Act" in den USA schwarz.
von Monika Steinberg 18.01.2012 (09:49Uhr) 9.
Hallo zusammen,
danke für die Hinweis!
das war uns auch nicht klar, dass der Artikel gerad heute wegen der Proteste in US auf Schwarz-Weiss geschaltet wird.
Aber die 3D-Effekte in z.B. Safari sind schon noch am Start und der Artikel taucht bestimmt bald wieder auf.
Viele Grüße
Moni
von Tino Che Bonkers via facebook 18.01.2012 (09:53Uhr) 10.
danke, hab dann wirklich mal gelesen ;) aber auch in sw sieht man ja den Effekt
von Moritz Kühl via facebook 18.01.2012 (10:23Uhr) 11.
http://webcache.googleusercontent.com/search?q=cache:8wkRyg_0tuUJ:acko.net/+acko.net&cd=1&hl=de&ct=clnk&gl=de&client=firefox-a
von Steven Wittens 18.01.2012 (11:08Uhr) 12.
Keine Zensur ohne Umgehung. Bitte Die Amerikanen nicht erzahlen. ;)
http://new.acko.net/
Dank für das Artikel.
von Monika Steinberg 18.01.2012 (11:40Uhr) 13.
Steven hat uns gerade einen Link geschickt der den Blackout umgeht und den Artikel heute schon wieder anzeigt - besten Dank @Steven dafür:
http://t.co/2BLU1ct
von fimbim 18.01.2012 (12:19Uhr) 14.
@Monika: Den Link solltest du eigl. nicht unbedingt posten, sondern lieber die SOPA-Gegner unterstützen. Hab´s mir gebookmarked und schau morgen noch mal rein, wenns wieder läuft. Das ist ja Sinn und Zweck einer Revolte…
von Peter 18.01.2012 (13:38Uhr) 15.
@Monika: Danke für den Link!
@fimbim: Why SOPA is dangerous
von Fabian 18.01.2012 (14:37Uhr) 16.
Sehr beindruckend. Nette Idee! Ist wohl der Anfang des Web 3D;-)
von Monika Steinberg 18.01.2012 (16:18Uhr) 17.
@Steven Wittens thank you for the nice 3D demo and your reply - we keep quiet and won't tell the Amis ;)
von RenderRing Box – [Januar/C] 2012 &… 19.01.2012 (15:28Uhr) 18.
[...] Archinteriors Vol. 26 ° SciFi Texturen ° CSS 3D Demo – Making Love To WebKit ° Free Mudbox DVD’s ? ° 722: Adv. Rigging & Animation [...]