3d-camera-interaction

Skill do obsługi interakcji z modelami 3D w Three.js. Rozwiązuje typowe problemy: niesynchronizację między ruchem myszy a modelem, zniekształcenia przy zoomowaniu, oraz "przeskoki" pozycji na początku przeciągania. Implementuje dynamiczny system mapowania pikseli na współrzędne świata 3D oraz inteligentne ograniczenia granic oparte na rzeczywistej widoczności modelu na ekranie, a nie tylko jego środku.

1. Zaimportuj skill do swojego projektu Three.js jako moduł obsługi kamery. Skill zawiera funkcje do obliczania dystansu kamery, pola widzenia (FOV) i wymiarów widoku ekranu.

2. W metodzie obsługi zdarzenia mousemove oblicz zmianę pozycji myszy (deltaX, deltaY w pikselach). Zamiast używać stałej wartości panSpeed, dynamicznie przelicz piksele na współrzędne świata 3D: pomnóż zmianę pikseli przez stosunek wysokości widoku świata do wysokości ekranu w pikselach.

3. Zastosuj przesunięcie modelu w kierunkach względnych kamery (prawo/lewo, góra/dół) używając wektorów right i up. Skill automatycznie dostosuje skalę przesunięcia do bieżącej odległości kamery.

4. Dla ograniczeń granic: zamiast limitować pozycję środka modelu, oblicz otaczający go prostokąt na ekranie (projekcja wszystkich 8 wierzchołków bounding boxa). Pozwól na pełne przesunięcie, dopóki widoczna część modelu zajmuje wystarczającą liczbę pikseli (domyślnie 50 pikseli).

5. Przetestuj interakcję przy różnych poziomach zoomu: upewnij się, że przesunięcie myszy o 100 pikseli zawsze przesuwa model o tę samą odległość w świecie 3D, niezależnie od odległości kamery.

6. Jeśli model "przeskakuje" na początku przeciągania, zweryfikuj, że początkowa pozycja myszy jest zapisywana przed pierwszym obliczeniem delty, a nie pobierana z poprzedniego stanu.