Blog Bild

3D im Web

3D spielt im Web eine große Rolle. Es gibt viele Möglichkeiten wie man 3D Elemente in Webseiten einsetzt. Ob man nun ein 3D Online-Spiel erstellt, die Webseite mit einzelnen interaktiven 3D Elementen bestückt oder aber die ganze Webseite als 3D Welt aufbaut, bleibt einem selbst überlassen.

Neben dem Einsatz von Programmen, gibt es auch einige sehr gute und umfangreiche Online-3D-Editoren und -Tools um 3D Objekte zu erstellen. Ein paar davon möchten wir gerne vorstellen:

goocreate.com/
Das Online-Tool goocreate.com bietet ein komplettes 3D-Modelling Programm auf WebGL Basis. Man kann entweder seine eigenen Modelle in der Szene aufbauen, modellieren und texturieren oder seine fertigen 3D Modelle hochladen und weiter bearbeiten. Das Tool bietet alle Funktionen eines vollwertigen 3D Programms. Verschiedenste Materialien und Texturen können zugewiesen, Lichter und Kamera-Punkte positionert und auch Animationen erstellt werden. Weiters lassen sich mittels Javascript auch eigene Funktionen implementieren. Mit der Goo Engine lassen sich auch komplette 3D Spiele oder interaktive Online-Banner aufbauen. Durch den HTML5 Standard funktioniert die grafische Darstellung auf unterschiedlichsten Devices. Das 3D Modell bzw. die interaktive 3D Animation kann man anschließend online veröffentlichen und einbetten oder lokal abspeichern um es selbst zu hosten.

Clara.io
Das Tool Clara.io bietet ebenso einen vollwertigen 3D Editor um seine interaktiven 3D Objekte zu erstellen. Zu Beginn kann man die Technik WebGL oder V-Ray auswählen, auf der man sein Objekt aufbaut. Ebenso kann man auswählen ob das Objekt öffentlich in der Clara.io Gallery veröffentlicht wird und zum weiteren Bearbeiten freigegeben wird. Neben dem umfangreichen Editor gibt es auch die Möglichkeit von Usern erstellte Modelle zu verwenden und weiter zu bearbeiten.

playcanvas.com
Die Engine playcanvas ist open source project, mit einem ebenso sehr umfangreichem 3D Editor. das Projekt besteht hauptsächlich aus der Community, welche auch Ihre Modelle, Szenen und vor allem Spiele auf der Webseite veröffentlicht.

pixijs.com
Das Projekt pixi.js ist eine 2D WebGl Rendering Engine, welche auch ein Canvas Fallback erstellt. Die Engine sticht durch Performance und Interaktivität hervor. Damit lassen sich eher kleinere 3D Projekte oder Spiele erstellen.

three.js
three.js ist eine auf Javascript basierende 3D Library. Auf der Webseite findet man eine gute Dokumentation um die Library und deren Funktionen zu erlernen. Viele weitere Tipps und Tutorials findet man auf www.learningthreejs.com

 

3D Modelle und Szenen zu erstellen ist nett, aber wie setzt man diese gut auf Webseiten ein?

Hier ein paar aktuelle Beispiele von Webseiten, welche 3D Elemente gut eingesetzt haben:

http://my.deejo.fr/
Wie man auf dieser Seite gut sieht, lässt sich ein zu bewerbendes Produkt sehr gut aus allen Winkeln darstellen.

https://www.ana-flightconnections.com/
Die Webseite benutzt den 3D generierten Erdball als Hauptelement um die User Experience zu steigern. So kann man interaktiv die Kugel drehen und steuern.

https://www.g-star.com/en_nl/newdenimarrivals
Beim Online-Shop G-Star kann man sich in der kleinen WebGL-basierenden 3D Umgebung durch die Produkte steuern.

http://www.catchthedragon.nl/#/catch
Peugeot verwendet nicht nur aufwändige 3D Animation auf der Startseite. Man kann durch ein 3D Spiel steuern, in dem man das gefühl bekommt, wirklich im Auto zu sitzen.

http://i-remember.fr/en/
Eine interaktiv gestaltete Galaxy-Umgebung, um Erinnerungen von jedem User festzuhalten.

http://takemetotomorrowland.com/
Eine sehr aufwändig gestaltete 3D-Welt, in der man sich navigieren kann um Informationen spielerisch zu finden.