3d-camera-interaction

Three.js 中处理 3D 模型拖拽、缩放、边界检测的正确方法。解决鼠标移动与模型移动不同步、缩放后只能看到模型一部分等问题。

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.