Sie suchen Ihre bereits erworbenen Lerninhalte? Dann geht es hier entlang: Zum academy Campus
Moderne Browser bieten mit WebGL und WebGPU Möglichkeiten, zusätzlich
zu Texten, Fotos & Co. auch Inhalte in 3D darzustellen. Im Workshop lernen
die Teilnehmer Grundlagen und Best Practices für die Umsetzung interaktiver
3D-Szenen im Web. Anhand diverser praktischer Beispiele und Übungen bekommen
sie eine solide Grundlage für eigene Projekte.
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.
Integration von Three.js über ein Content Delivery Network (CDN)
Installation von Three.js über einen Paketmanager
Integration in ein HTML-Dokument
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
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
Die verschiedenen Lichtquellen in Three.js
Schattenwurf von Objekten
Kameras in Three.js
Debugging von Licht und Kamera
Steuerung der Kamera mit Controllern
Objekte mit Drag and Drop bewegen
Objekte mit dem Raycaster auswählen
Interaktion über HTML-Events
Three.js Loader
Laden und Integration eines GLTF-Modells
Manipulieren eines geladenen Modells
Installation von A-Frame
Das Entity-Component-System von A-Frame
3D-Szenen mit A-Frame gestalten
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.
Grundlegende JavaScript-Kenntnisse sind erforderlich. Erfahrungen im Umgang mit 3D-Modellen oder -Bibliotheken wie Three.js sind hingegen keine zwingende Voraussetzung.
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.
Workshop-Unterlagen
Teilnahmebescheinigung
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.
Sebastian Springer arbeitet bei MaibornWolff in München. Als Berater, Trainer und Autor beschäftigt er sich intensiv mit den Aspekten des client- und serverseitigen JavaScript, das sich mittlerweile in allen Lebensbereichen wiederfindet. Der Fachmann legt den Fokus auf die Fragestellung, welchen Beitrag Webtechnologien in der Welt von morgen leisten und wie sie den steigenden Anforderungen standhalten können. Dafür entwickelt er Architekturen, Codequalität und Tools weiter.
Füllen Sie ganz einfach und bequem das Kontaktformular aus und wir werden Ihnen Ihre Fragen schnellstmöglich beantworten.