3D & WebGL.

Mit 3D im Browser lassen sich Produkte von allen Seiten betrachten, Varianten live konfigurieren und komplexe Technik anschaulich erklären. Das eignet sich für Onlineshops, Produktseiten und Messepräsentationen und läuft ohne Zusatzsoftware auf Computer und Smartphone.

Produktpräsentation in 3D

01 / 05 · Referenz · JuCad Carbon Travel Special

Ein Golftrolley im Browser.

Diesen Trolley habe ich für JuCad als 3D-Modell umgesetzt, mit Materialien und Animation. Was Sie hier sehen, ist kein Video: Ihr Browser zeichnet das Modell selbst.

02 / 05 · Materialien

Von allen Seiten.

Der Trolley lässt sich in 360° betrachten. Carbon, Metall und Gummi haben eigene Materialwerte und reagieren unterschiedlich auf das Licht.Carbon, Metall und Gummi haben eigene Materialwerte und reagieren unterschiedlich auf das Licht.

03 / 05 · Konfiguration

Zubehör am richtigen Platz.

In einem Produktkonfigurator erscheint Zubehör direkt am Modell. Hier setzt sich ein Golfbag von JuCad genau an seinen Platz, auf die beiden Halterungen des Trolleys.In einem Produktkonfigurator erscheint Zubehör direkt am Modell, etwa ein Golfbag auf den Halterungen des Trolleys. Das ist die Grundlage für funktionierende Produktkonfiguratoren.

04 / 05 · Ladezeit

Leicht genug fürs Smartphone.

Dank guter Kompression lädt das Modell auch unterwegs zügig auf dem Smartphone. Es wird erst geladen, wenn es gebraucht wird, und Ihr Browser zeichnet nur, solange sich etwas bewegt.

05 / 05 · Animation

Zerlegt auf Packmaß.

Die Animation gehört zum Modell: Räder abgesteckt, Gestänge zusammengeklappt, bis der Trolley sein Packmaß erreicht. Mit dem Button unten bauen Sie ihn wieder zusammen.

Was dazugehört

Produktkonfiguratoren

Varianten, Materialien und Maße ändern sich live am Modell. Preis und Verfügbarkeit kommen direkt aus Ihrem Shop.

Interaktive Szenen

Aufwendige Einstiegsszenen, 3D-Abläufe, die dem Scrollen folgen, und räumliche Datenvisualisierungen im Erscheinungsbild Ihrer Marke.

Shader & Effekte

Eigens programmierte Effekte für Partikel, Verzerrungen und Übergänge, wie im Kopfbereich dieser Website. Sie laufen direkt auf dem Grafikprozessor und bleiben dadurch flüssig.

Modelle fürs Web

Modelle aus Blender oder aus Ihren CAD-Daten, vereinfacht und komprimiert, damit sie auch auf dem Smartphone schnell laden.

Werkzeuge
Three.jsReact Three FiberGLSLWebGL2BlenderglTFDracoGSAP
Referenzen

Aus der Praxis.

Screenshot von SpaceSnake
01SpaceSnake 3D-Browserspiel · Eigenprojekt
Screenshot von JuCad
02JuCad Shopware-Shop, 3D & Konfigurator
01 / 02

SpaceSnake

3D-Browserspiel · Eigenprojekt · Spielidee, 3D, Entwicklung

Der Snake-Klassiker als 3D-Browserspiel, mit Power-ups, die in engen Situationen weiterhelfen. Läuft auch auf dem Smartphone flüssig.

Was ich gemacht habe
Spiellogik und Steuerung
Power-ups zum Einsammeln und Einsetzen
Eigene Shader für Glow und Partikel
Three.js · R3F · GLSL
Screenshot von SpaceSnake
01SpaceSnake
3D-Browserspiel · Eigenprojekt · Spielidee, 3D, Entwicklung

Der Snake-Klassiker als 3D-Browserspiel, mit Power-ups, die in engen Situationen weiterhelfen. Läuft auch auf dem Smartphone flüssig.

Spiellogik und Steuerung
Power-ups zum Einsammeln und Einsetzen
Eigene Shader für Glow und Partikel
Three.js · R3F · GLSL
Screenshot von JuCad
02JuCad
Shopware-Shop, 3D & Konfigurator · Verantwortlich für das Shopsystem

Onlineshop eines Herstellers von Golftrolleys und Zubehör, in acht Sprachen. Nach Jahren der Betreuung des alten Shops habe ich den Umzug von Shopware 5 auf Shopware 6 umgesetzt und verantworte seitdem das gesamte Shopsystem.

Migration von Shopware 5 auf Shopware 6
Caddyfinder und Caddy-Konfigurator
3D-Modelle der Caddys auf den Produktseiten
Automatischer XML-Export für das ERP-System
Karriere- und Serviceseite
Shopware 6 · Twig · WebGL
Aus dem Ratgeber · 4 Min. 3D im Browser: Wann lohnt sich ein Produktkonfigurator? Bei Produkten mit vielen Varianten veranschaulicht ein interaktives 3D-Modell, was Fotos nicht zeigen können. Worauf es bei Planung, Daten und Ladezeit ankommt.
Fragen

Ja, wenn es von Anfang an dafür geplant wird. Schlanke Modelle, komprimierte Texturen und eine Darstellungsqualität, die sich dem Gerät anpasst, sorgen für eine flüssige Darstellung.

Nicht zwingend. Ich arbeite mit CAD-Daten, bestehenden Modellen oder erstelle einfache Modelle selbst in Blender.

Sie verlassen diese Website.