threejs-interaction

Umiejętność Three.js do obsługi interakcji użytkownika w scenach 3D. Implementuj raycasting do wykrywania kliknięć na obiekty, dodawaj sterowanie kamerą OrbitControls, obsługuj wejście myszy i dotyku. Idealna do tworzenia interaktywnych wizualizacji, gier przeglądarki i aplikacji AR/VR wymagających precyzyjnej selekcji obiektów i nawigacji w przestrzeni 3D.

1. Zaimportuj Three.js oraz OrbitControls z biblioteki three/addons. Utwórz instancję OrbitControls, przekazując kamerę i element renderera — włącz damping dla płynnego ruchu. 2. Zainicjuj Raycaster i Vector2 do przechowywania pozycji myszy. Dodaj nasłuchiwacz zdarzenia click, który konwertuje współrzędne pikseli na znormalizowane współrzędne NDC (od -1 do 1). 3. W funkcji obsługi kliknięcia ustaw promień raycaster'a od kamery poprzez pozycję myszy, używając setFromCamera(). 4. Wywołaj intersectObjects() na scenie, aby uzyskać tablicę wszystkich obiektów, które promień przecina. Tablica zawiera informacje o odległości, punkcie przecięcia, normalnej powierzchni i samym obiekcie. 5. Sprawdź, czy tablica intersects ma elementy — pierwszy element (indeks 0) to najbliższy obiekt. Możesz teraz reagować na kliknięcie, zmieniając właściwości obiektu, emitując zdarzenie lub uruchamiając akcję. 6. Opcjonalnie obsługuj wejście dotykowe, mapując współrzędne dotyku na ten sam system konwersji współrzędnych co mysz.