Three.js für WebXR (Extended Reality)

Seminarziel

Nach dem Seminar beherrschen Sie die Grundlagen der Umsetzung virtueller, 3-dimensionaler Räume in Three.js und WebXR. Sie lernen alles Wesentliche über Geometrien und Meshes, Texturen und Shader. Sie können gezielt Beleuchtungen einsetzen oder simulieren Sonnenlicht und schaffen immersive Welten mit Atmosphere. Sie kennen die Möglichkeiten der Interaktion mit Controllern und können einfache Szenarien für XR umsetzen.

Inhalt

• 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 ...
  • ...