3D im Web – Immersive Gestaltung und räumliche Interaktion im Browser

Es gibt viele gute Gründe, 3D-Modelle und -Umgebungen im Browser zu nutzen: Nutzer können Produkte oder Szenarien interaktiv erkunden, drehen, zoomen und detaillierte Ansichten erhalten. Diese realitätsnahe Darstellung vermittelt ein besseres Verständnis und ein genaueres Bild davon, wie ein Produkt aussieht oder funktioniert.

Im Workshop lernen die Teilnehmer die technischen Grundlagen und Browser-APIs kennen, um eine 3D-Szene aufzubauen und mit Licht, Kamera sowie 3D-Objekten zu arbeiten. Zusätzlich zu Three.js stellt der Referent Sebastian Springer auch A-Frame vor und erklärt, wie man externe Modelle integriert und mit ihnen interagiert.

Inhalte

• 1. Installation und erste Schritte mit Three.js

  • Integration von Three.js über ein Content Delivery Network (CDN)

  • Installation von Three.js über einen Paketmanager

  • Integration in ein HTML-Dokument

• 2. Aufbau einer 3D-Szene

  • Arbeiten mit dem Szenen-Objekt

  • Verwenden des Three.js-Renderers für die Darstellung der Szene

  • Integration einer Kamera und einfacher 3D-Objekte

  • Konfigurationsoptionen für die Szene

• 3. Arbeiten mit Geometrien, Materialien und Meshes

  • Basisgeometrien von Three.js und ihre Verwendung

  • Die Oberflächen eines Objekts mit Materialien gestalten

  • Erzeugen von Meshes zur Darstellung der Objekte

  • Positionierung der Objekte im 3D-Raum

  • Animationen mit dem Render-Loop

• 4. Beleuchtung und Kameras

  • Die verschiedenen Lichtquellen in Three.js

  • Schattenwurf von Objekten

  • Kameras in Three.js

  • Debugging von Licht und Kamera

  • Steuerung der Kamera mit Controllern

• 5. Interaktion mit der Szene

  • Objekte mit Drag and Drop bewegen

  • Objekte mit dem Raycaster auswählen

  • Interaktion über HTML-Events

• 6. Importieren von externen 3D-Modellen

  • Three.js Loader

  • Laden und Integration eines GLTF-Modells

  • Manipulieren eines geladenen Modells

• 7. Integration von A-Frame

  • Installation von A-Frame

  • Das Entity-Component-System von A-Frame

  • 3D-Szenen mit A-Frame gestalten

Ihr Nutzen

• Sie erwerben ein solides Verständnis der technischen Grundlagen der 3D-Webentwicklung am Beispiel der populären Bibliothek Three.js.

• Durch praktische Übungen erlangen Sie umfassende Kenntnisse über die Installation, Konfiguration und den effektiven Projekteinsatz von 3D in Web-Applikationen.

• Sie lernen, mit verschiedenen Arten von 3D-Modellen zu arbeiten und können sie positionieren, transformieren und animieren, um ansprechende und dynamische Inhalte zu erzeugen.

• Sie erfahren, wie Sie mit der 3D-Szene interagieren können, um eine intuitive Oberfläche für Ihre User zu schaffen.

• Im Laufe des Workshops lernen Sie zahlreiche Best Practices kennen, die Ihnen bei der Implementierung von 3D-Inhalten im Web helfen.

Voraussetzungen

Grundlegende JavaScript-Kenntnisse sind erforderlich. Erfahrungen im Umgang mit 3D-Modellen oder -Bibliotheken wie Three.js sind hingegen keine zwingende Voraussetzung.

Zielgruppe

• Webentwickler und Softwareentwickler, die bereits Erfahrung mit Webtechnologien wie HTML, CSS und JavaScript gesammelt haben und ihr Wissen erweitern möchten, um 3D-Inhalte in ihre Projekte zu integrieren.

• Personen im Marketing- und Vertriebsbereich, die erfahren wollen, was 3D-Inhalte im Web leisten können.

• Produktverantwortliche, die ein Gefühl dafür bekommen möchten, wie sie ihre Produkte im Web in 3D präsentieren können.

• Künstler und Kreative, die neue Medien und Techniken kennenlernen möchten.

Leistungen Ihres Workshop-Tickets

• Workshop-Unterlagen

• Teilnahmebescheinigung

Durchführung

Ist die Durchführung der Veranstaltung aufgrund höherer Gewalt, wegen Verhinderung eines Referenten, wegen Störungen am Veranstaltungsort oder aufgrund zu geringer Teilnehmerzahl (weniger als 50%) nicht möglich, werden die Teilnehmer spätestens 7 Tage vorher informiert.

Die Teilnehmerzahl ist auf max. 20 Personen begrenzt.