Der Arbeitsansatz
Three.js Interaction behandelt Raycasting und Steuerelemente. Es erklärt, wie Bildschirmeingaben zu einem Kamerastrahl werden, wie Schnittpunkte Objekte oder Instanzen identifizieren und warum ein eingebettetes Canvas eine eigene Koordinatenumrechnung braucht, statt von einem Vollfenster auszugehen.
Kameranavigation und Objektmanipulation sind getrennte Aufgaben. Orbit-, Fly-, Map-, Drag- und Transform-Controls haben unterschiedliche Rollen. Eine editorähnliche Szene muss diese Handler so abstimmen, dass das Ziehen eines Modells nicht auch die Kamera dreht.
Erwartete Ergebnisse
- Objektauswahl relativ zum Canvas
- Eine passende Konfiguration der Kamerasteuerung
- Verhalten für Selektion, Hover, Ziehen oder Transformation
Vom Brief zur Prüfung
- 01Ziele definieren
Listen Sie auswählbare Objekte auf und entscheiden Sie, ob verschachtelte Meshes oder Instanzen eigene Ziele sind.
- 02Eingabe zuordnen
Normalisieren Sie Zeigerpositionen anhand des Canvas-Rechtecks und führen Sie das Raycasting über die aktive Kamera aus.
- 03Steuerung abstimmen
Behandeln Sie Navigationskonflikte während der Manipulation und stellen Sie das Feedback wieder her, wenn sich die Selektion ändert.