9 brillante Anwendungen von 3D im Webdesign

3D im Web kam 2011 mit der Einführung von WebGL, einer JavaScript-API zum Rendern von 3D-Grafiken in einem kompatiblen Browser ohne Verwendung von Plugins, wirklich an. In den folgenden Jahren waren die Möglichkeiten von 3D bei Webdesignern sehr aufregend.

Dieser anfängliche Hype könnte in den letzten Jahren abgeklungen sein. Aber die Entwicklung von Online-3D hat sich rasant weiterentwickelt, und es gibt einige ziemlich beeindruckende Implementierungen. Von „Wow-Faktor“ -Visualisierungen, die hauptsächlich als Proof of Concept dienen, bis hin zu durchdachten 3D-Anwendungen, die direkt darauf abzielen, ein großartiges Web-Erlebnis zu schaffen.



In diesem Beitrag listen wir einige neuere Anwendungen von 3D im Web auf (einige kleine und subtile, einige auffällige und epische), um Ihre eigenen Projekte zu inspirieren. Oh, und wenn es eine großartige Verwendung von 3D gibt, die Sie in freier Wildbahn entdeckt haben, teilen Sie bitte einen Link in den Kommentaren mit.



01. Acko.net

Ein langer und kurvenreicher Header für die Website von Entwickler Steve Wittens

Ein langer und kurvenreicher Header für die Website von Entwickler Steve Wittens

Wenn Sie nach einem Beispiel suchen, was browserbasiertes 3D ins Web bringen kann, müssen Sie nicht weiter suchen als Acko.net, die persönliche Website des Webentwicklers Steven Wittens. Es verfügt über einen schönen animierten Header, der von Street Art inspiriert ist. Es ist eine einfache Idee, aber wunderbar umgesetzt.



Wittens erstellte es mit einer Kombination aus CSS 3D und WebGL. „Das Verdrehen jedes Bandes wird nicht willkürlich erzeugt, sondern mathematisch abgeleitet“, erklärt er. „Es verkörpert das Differentialprinzip des Parallelverkehrs. Die Aufwärtsrichtung ändert sich parallel zu jeder Kurve, was bedeutet, dass sich die Bänder niemals an Ort und Stelle drehen. Sie drehen sich nur, wenn sie es natürlich wollen. Daher hat das Design einen eigenen Willen. “

Sie können die ganze Geschichte darüber lesen, wie er sie zusammengestellt hat dieser Blog-Beitrag . Und wenn die Animation in Ihrem Browser nicht funktioniert, können Sie sie auschecken Dieses Video .

02. Campo Alle Kometen

Betreten Sie eine fantastische Welt über diese preisgekrönte Weinwebsite



Betreten Sie eine fantastische Welt über diese preisgekrönte Weinwebsite

Seit dem Start im Februar hat diese Website bereits eine Menge Auszeichnungen erhalten, und es ist nicht schwer zu verstehen, warum. Es wurde entwickelt, um für den italienischen Wein Campo Alle Comete zu werben. Es zeigt eine schwimmende 3D-Stadt, „in der sich Träume und Magie endlich treffen können“. Die fantasievollen Eigenschaften des Designs, verbunden mit der reibungslosen Implementierung, sind erstaunlich und es ist wirklich eine Freude, mit der Maus durch diese fantastische Welt zu sausen.

  • 7 neue Grafikdesign-Tools, die Ihnen das Leben erleichtern

Erbaut von italienischen Studios Dies und Monogrid Diese brillante Verwendung von 3D im Web wurde mit WebGL und GSAP zusammen mit three.js und AngularJS erstellt.

03. Stripe.com

Eine einfache, aber effektive Implementierung von 3D auf der Website von Stripe

So ersetzen Sie Farben in Photoshop
Eine einfache, aber effektive Implementierung von 3D auf der Website von Stripe

Dieses interaktive, rotierende Ikosaeder ist eine viel einfachere Implementierung von 3D und dennoch sehr effektiv, um eine Reihe von Menüoptionen auf coole und originelle Weise darzustellen. Es wurde auf der Website der Zahlungsplattform Stripe vorgestellt und von Bill Labus nach einer Idee von Krithika Muthukumar entworfen, die bei Stripe im Bereich Produktmarketing arbeitet.

'Sie hatte sich eine Möglichkeit vorgestellt, eine Stripe-Ladung aus der Sicht von Radar visuell darzustellen. Dabei wird maschinelles Lernen verwendet, um eingehende Gebühren zu bewerten und die Wahrscheinlichkeit vorherzusagen, dass sie legitim oder betrügerisch sind', erklärt Labus. „Maschinelles Lernen ist von Natur aus ziemlich abstrakt, daher schien ein 3D-Objekt ein effektiver Weg zu sein, um das Konzept greifbarer zu machen.“

Maschinelles Lernen ist von Natur aus ziemlich abstrakt, daher schien ein 3D-Objekt ein effektiver Weg zu sein, um das Konzept greifbarer zu machen

Bill Labus

Die primäre Technologie, die hierfür verwendet wird, ist WebGL, obwohl es sich um eine relativ einfache API handelt, sagt Labus. „Wir haben three.js als übergeordnetes Framework ausgewählt, das über WebGL abstrahiert und das Laden von Objekten, das Einrichten von Beleuchtung und Materialien und mehr vereinfacht. Tatsächlich hatten wir das Glück, dass three.js standardmäßig ein Ikosaeder als eines seiner eingebauten Grundelemente enthält.

„Die ursprüngliche Version verwendete einfach das eingebaute Grundelement. Wir haben uns jedoch später entschieden, dass wir abgerundete Kanten an der Form haben möchten, um sie besser an die vorhandene 3D-Ästhetik anzupassen stripe.com Also haben wir in Cinema4D ein abgerundetes Ikosaeder gerendert und es als Objekt in three.js geladen. Die Scheitelpunktbeschriftungen, die die verschiedenen Attribute einer Ladung darstellen, werden nicht in der 3D-Umgebung gerendert, sondern als normale HTML-Elemente über der 3D-Zeichenfläche. Dies sollte die Wiedergabe von Text in höchster Qualität gewährleisten und die Lokalisierung erleichtern.

„Beim Animieren des Ikosaeders berechnen wir die Positionen der Scheitelpunkte sowie die Frage, ob sie derzeit hinter dem Objekt sichtbar oder verdeckt sind, und verwenden diese Informationen dann, um die Beschriftungselemente zu positionieren und anzuzeigen / auszublenden.

„Ein weiteres Element, das in der 3D-Umgebung nicht gerendert wird, ist der vom Objekt geworfene Schatten. Da es ausreichend diffus ist, konnten wir a einfach verwischen hinter der 3D-Leinwand, ohne dass bemerkt wird, dass die Form des Schattens nicht perfekt mit der Form des Ikosaeders übereinstimmt. Dies geschah hauptsächlich aus Leistungsgründen, da große, diffuse Schatten in der Regel einer der teureren Effekte beim Rendern sind, insbesondere innerhalb einer Animationsschleife. “

04. Diane Martel

Es macht Spaß, mit diesen drehbaren, scrollenden Titeln herumzuspielen

Welche Art von Kamera verwenden Profis?
Es macht Spaß, mit diesen drehbaren, scrollenden Titeln herumzuspielen

Wir haben schon früher Webtext im Stil des Star Wars-Vorspanns gesehen, aber noch nie so. Die Website der amerikanischen Musikvideodirektorin und Choreografin Diane Martel (bekannt für das Video „Blurred Lines“) verwendet das Gerät mit großer Wirkung, um die Titel ihrer Arbeit auf ihrer Homepage zu präsentieren.

Drehen und drehen Sie sie beim Scrollen mit der Maus, bewegen Sie den Mauszeiger über einen Titel, um weitere Standbilder anzuzeigen, oder klicken Sie sich durch die gesamte Seite. Diese farbenfrohe und beeindruckende Seite wurde von entworfen Ben Wegsheider , dessen eigene Website auch einige hübsche 3D-Tricks enthält.

05. OS-Karten

Ordnance Survey Karten werden 3D

Ordnance Survey Karten werden 3D

Von einer unterhaltsamen und leichtfertigen Verwendung von 3D zu einer voll funktionsfähigen. Gestern hat Ordnance Survey, die nationale Kartierungsagentur Großbritanniens und einer der weltweit größten Hersteller von Karten, ihre preisgekrönten OS Maps umfassend aktualisiert und eine genaue 3D-Kartierung der britischen Landschaft eingeführt.

OS Maps wird von Wanderern, Radfahrern und anderen, die die Hügel und Täler Großbritanniens durchqueren, geliebt und ist über das Internet und als App erhältlich. 'Es sind mehr als 750.000 Routen gespeichert, und mit dem 3D-Element können Sie die Routen besser sehen und sich ein Bild davon machen, ob die Route erreichbar ist', verrät Pressesprecher Keegan Wilson.

Das 3D-Mapping, das mit unglaublich genauen Lasern in spektakulären Details erstellt wurde, steht nur Abonnenten von OS Maps über das Internet zur Verfügung. Jeder, der nachforschen und sich umschauen möchte, kann dies durch eine siebentägige kostenlose Testversion tun.

06. Erde 2050

Kaspersky präsentiert die Zukunft der Erde anhand eines interaktiven 3D-Globus

Kaspersky präsentiert die Zukunft der Erde anhand eines interaktiven 3D-Globus

Zum 20-jährigen Jubiläum hat der Sicherheitsriese Kaspersky ein interaktives Projekt gestartet, das Benutzer dazu einlädt, über die Welt der Zukunft, die sich daraus ergebenden Chancen und die möglichen Bedrohungen zu diskutieren. Im Zentrum steht Earth 2050, ein cooler Ort, der vom Moskauer Studio gebaut wurde Möglich Das lädt Designer und Illustratoren dazu ein, ihre Zukunftsvisionen über ein interaktives Portal hochzuladen.

Die Homepage zeigt einen rotierenden Planeten Erde, der in geografische Gebiete unterteilt ist und jeweils eine Vorhersage zu einem bestimmten Aspekt des Lebens im Jahr 2050 enthält. Jeder Designer, Illustrator oder Künstler kann seine Arbeiten hochladen, und Mitglieder der Öffentlichkeit können kommentieren, ob sie glauben, dass bestimmte Vorhersagen wahr werden.

Adobe After Effects kostenloser Download Mac

'Unser Konzept wurde von Google Street View und PC-Spielen wie UFO und Civilization sowie dem futuristischen Ausblick von Kaspersky Lab selbst inspiriert', erklärt das Team von Possible. 'Der Globus wurde mit nativem WebGL, HTML5, CSS3, JS, WebGL und PHP 7 erstellt. Der Aufbau des Frontends umfasste Bandbreitenoptimierung und Standard-Browser-Caching, Inhaltsmodule, Codierung, WebGL-Module mit dem Planeten, Surfen und Panorama-Bearbeitung.'

07. Titouan Mathis

Der Entwickler Titouan Mathis erweckt seine persönliche Website mit einer Reihe lustiger Animationen zum Leben

Der Entwickler Titouan Mathis erweckt seine persönliche Website mit einer Reihe lustiger Animationen zum Leben

Titouan Mathis, ein Webentwickler mit Sitz in Straßburg, Frankreich, hat eine sehr einfache Website, über die er auf die Website von Twitter, Instagram und dem Arbeitgeber Studio Meta verlinkt. Aber er belebt es mit einem amüsanten Schuss interaktiven, animierten 3D: drei ständig spiralförmige Muster, die super stylisch aussehen und mit denen man einfach nur herumspielen kann.

„Die Inspiration kam hauptsächlich von Dingen, die mir während meines Tages begegnet sind“, erklärt Mathis. „Manchmal vermischen sich all diese Dinge und eine Idee taucht in meinem Kopf auf. Ich werde versuchen, es neu zu erstellen und mit den Formen herumzuspielen, um nette Möglichkeiten zu finden, mit ihnen zu interagieren. “

Die drei Animationen wurden alle mit HTML, CSS und JavaScript erstellt, wobei Vue.js strukturell hilfreich war und der Code auf verfügbar ist GitHub wenn du es ausprobieren willst. „Die größte technische Herausforderung war die Leistung“, fügt Mathis hinzu. „Meine Vertrautheit mit HTML, CSS und JavaScript ermöglicht ein schnelles Prototyping von Ideen, aber das Animieren vieler DOM-Elemente kann für den Browser schnell ziemlich schwer werden. Meine nächsten Animationen werden sicherlich mit Three.js oder einer ähnlichen Bibliothek erstellt. “

08. Die Magier Staffel 2

Navigieren Sie auf dieser von Unit 9 erstellten Site durch die Fantasiewelt der Magier

Navigieren Sie auf dieser von Unit 9 erstellten Site durch die Fantasiewelt der Magier

Auf einer anderen interaktiven Karte, diesmal für die fiktive Welt der angesagten TV-Fantasy-Show The Magicians. Britische Agentur Einheit 9 Das Programmierteam von Three.js, WebGL und GLSL entwickelte diese brillant interaktive Karte, auf der Benutzer Quests starten und mehr über die zweite Staffel erfahren können. Von fantastischen Kreaturen bis hin zu alten Göttern spiegelt jede wöchentliche Quest das Thema jeder Episode wider. Auch wenn Sie die Show nicht sehen, ist diese umfassende Verwendung von Web-3D einen Besuch wert.

09. Streben nach Klang

Ein lustiges und verrücktes Spiel aus dem französischen Studio Biborg

Ein lustiges und verrücktes Spiel aus dem französischen Studio Biborg

Wir werden mit etwas enden, das einfach nur Spaß macht. Vermeiden Sie Hindernisse, fangen Sie die Gegenstände und erstellen Sie in diesem verrückten WebGL-Experiment Ihren eigenen Soundtrack durch Ihren verrückten Musiklauf. Dies richtet sich sowohl an den gelegentlichen Desktop- / Mobilbenutzer als auch an den VR-Enthusiasten (kompatibel mit Google Cardboard) und ist ein großartiges Schaufenster für die 3D-Smarts der Pariser Kreativagentur Biborg . Jedes Mal, wenn Sie es spielen, sind die Umgebungen anders und es macht süchtig ... seien Sie gewarnt!