Beschreibung
Three.js für WebXR (Extended Reality)
3-Dimensionalität wird zunehmend in Browser-Anwendungen eingesetzt. 3D-Objekte erweitern Browseranwendungen und Webseiten um vielfältige Möglichkeiten. So wird ein Möbels oder ein Kleidungsstück von allen Seiten zugänglich, eine illustrierte Landschaft kann auf einmal bereist werden. Ein Browser kann alle Inhalte vom Text, über Bild und Video bis zum 3D-Objekt nahtlos verarbeiten.Ebenso finden VR-Brillen mehr und mehr ihren Platz im Alltags- und Arbeits-Equipment.
Die Javascript-Bibliothek Threejs ermöglicht das Erstellen bzw. Hinzufügen nahezu beliebiger 3D-Inhalte für HTML-Seiten. Per VR-Brille, z.B. einer Oculus Quest, einer Microsoft Hololens oder auch vielleicht auch Apples Vision Pro kann eine 3D Welt "betreten" werden. Das Seminar führt grundlegende Konzepte des Bewegens und Interagierens im virtuellen Raum ein.
Threejs js nutzt die WebGL-Fähigkeiten des Browsers. Es lassen sich Objekte (Primitives) erzeugen oder komplexe Geometrien aus anderen Programmen importieren. Mit Tageslicht, Nebel, Himmel und Wasser lassen sich alle Szenarien beeindruckend umsetzen. Ebenso können gezielte Beleuchtungen sowie Kamerafahrten bzw. das Herumgehen des Betrachters um Objekte machen die Grundlagen des 3D-Welten-Bauens perfekt.
Die Programmierung der Controller einer VR-Brille bildet den zweiten Teil des Seminars. Objekte oder sich selbst bewegen via Teleport sind die einfachsten Interaktionen, die programmiert werden. In Kombination mit einer Physik-Engine kann mit einfachen Mitteln ein verblüffend immersives Virtual Reality Erlebnis geschaffen werden.
Der Grundlagenkurs nimmt sich 5 Tage Zeit, um alle Basics fundiert zu erläutern und in praktischen Beispielen auszuprobieren. Systematisch und praxistauglich werden alle Aspekte von threejs und der WebXR durchgearbeitet.
Das Seminar wird mit Oculus Quest durchgeführt. Eigene Brillen können mitgebracht werden.
Kommende Starttermine
Wählen Sie aus 7 verfügbaren Startterminen
Inhalte / Module
- Three.js - 3D im Browser
- Eine kurze Einführung,
- Beispiele ...
- Entwicklungsumgebung
- Visual Studio Code
- Bibliotheken
- Browseranforderungen
- vite (Packaging)
- Javascript (falls erforderlich)
- Klassen und ES-Module
- Mit `fetch` arbeiten
- Hilfreiche Sprachkonstrukte aus ES6+
- Threejs Grundlagen
- Begriffe aus dem 3D
- Geometrie, Material, Mesh
- Textur, Shader, Maps
- Koordinaten, Transformationen
- Rendern, Raytracing, Shadowmap
- ...
- Grundgerüst einer 3D Welt bauen
- Aufbau einer Szene
- Was ist ein Renderer
- Objekte einfügen
- Licht anschalten
- Die Kamera setzen
- Animationen einfügen
- So gelingt die Programmierung
- Organisation mit Klassen
- Testbarkeit, Wartbarkeit
- Steuerung (Maus)
- OrbitControls: die Szene bewegen
- WSAD/Cursortasten: FirstPersonControls - der Benutzer bewegt sich
- Geometrien
- BoxGeometry, ConeGeometry, CylinderGeometry, SphereGeometry,
- PlaneGeometry, WireframeGeometry
- ShapeGeometry, LatheGeometry, ExtrudeGeometry
- Objekte generisch konstruieren
- ...
- Externe Modelle laden
- glb, gltf, collada (?)
- Dateien importieren
- in der Szene verankern
- Animationen
- Lichter und Beleuchtung
- AmbientLight
- DirectionalLight
- HemisphereLight
- PointLight
- SpotLight
- Texturen
- LineBasicMaterial
- MeshBasicMaterial
- MeshLambertMaterial
- MeshNormalMaterial
- MeshPhongMaterial
- MeshStandardMaterial
- MeshToonMaterial
- Landschaft, Welt
- Himmel und Sonnenlicht
- Gelände
- Nebel
- Wasser
- Physik
- Die Bibliothel `cannon`
- Arbeiten mit Schwerkraft
- Kollisionserkennung
- ...
- Koordinaten und Matemathik im Raum
- Grundlagen der Vektorgeometrie
- Grundlagen 3-dimensionaler Koordinatensyteme
- Euler, Frustum, Matrizen, Quaternion
- ...
- WebXR - Grundlegendes
- XR Button einfügen
- Browser in VR-Brillen
- Debuggen mit den developer tools
- XR - Renderer
- Die Sache mit dem Standpunkt
- Ergänzungen für den Renderer
- den `animationFrame` anpassen
- XR - Steuerung
- Controller und Griffe hinzufügen
- Tasten abfragen
- Raycaster, Marker
- Objekte greifen und bewegen
- Teleportieren
- First Person
- ...
- UI-Konzepte für VR-Welten
- Schalter
- Blickrichtung
- Mit der Hand ...
- Spatial Sound ...
- ...
Zielgruppe / Voraussetzungen
Profunde Kenntnisse in JavaScript, Verständnis für Objektorientierung, Erfahrungen im 3D Umfeld sind hilfreich.
Hinweis: Dieser Kurs richtet sich an Mitarbeitende aus Unternehmen und Institutionen.
Für Privatpersonen ist dieser Kurs leider nicht geeignet.
Eine Informationsanfrage zu diesem Kurs ist nur für Beteiligte aus dem B2B-Bereich sinnvoll.
Abschlussqualifikation / Zertifikat
Infos anfordern
GFU Cyrus AG
Erweitern Sie Ihre IT-Skills mit einem offenen IT-Training oder ganz nach Ihren Bedürfnissen durch eine individuelle IT-Schulung. Programmiersprachen (C#, Python, Java, …), Microsoft Office 365, Anforderungsmanagement, Projektmanagement, Business Intelligence, Data Science, Künstliche Intelligenz, IT-Sicherheit , Administration & Datenbanken, Softwareentwicklung, Testmanagement...
Erfahren Sie mehr über GFU Cyrus AG und weitere Kurse des Anbieters.
Anzeige