T
threejs-interaction
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
How to use
- 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.