Three.js Przenoszenie kamery po ścieżce po kliknięciu

Question

Przez ostatnie ... wiele godzin próbowałem, szukałem i czytałem, jak uzyskać kamerę poruszającą się wzdłuż ścieżki w Three.js. Po prostu nie mogę tego znaleźć, albo stałam się nasycona i nie widzę odpowiedzi, nawet jeśli to mnie ugryzło w twarz.

To, czego chcę, nie jest takie trudne. Mam kilka ikonopodobnych rzeczy w przestrzeni 3D, które chcę móc kliknąć. Mam dla niego rozszerzenie THREEx, więc ta część jest w porządku. Teraz część, w której kamera porusza się płynnie wzdłuż z góry określonej ścieżki, wraz z jej wyglądem osi Y, tak aby skierowana była w stronę następnej "ikony".

Moim pierwszym podejściem było wykonanie ścieżki za pomocą krzywej Beziera i sprawdzenie, jak zrobić jedną z nich w kształcie spirali, która nieznacznie podnosi się w górę, a następnie dowiedzieć się, jak animować kamerę wzdłuż tej ścieżki po zdarzeniu kliknięcia. Nadal utknąłem - trudno - próbując dowiedzieć się, jak stworzyć prostą ścieżkę, która zakrzywia się w górę, nie wspominając już o tym, co jest trudne.

Czy jestem na dobrej drodze? Jeśli tak, jak utworzyć taką ścieżkę? A może powinienem zrobić zwykłą krzywą Beziera, obracać i edytować, dopóki nie spełni moich potrzeb? I na koniec, w jaki sposób aparat sprawia, że ​​kamera podąża ścieżką w (krótkim) animowanym, płynnym ruchu?

Z góry dziękuję!

Answer 1

Spójrz na ten link: http://cubic.org/docs/hermite.htm

Wyjaśnia obliczenia krzywej, w tym odmian będziesz chcą być świadomi. Na przykład, krzywa Beziera nie jest dobrą krzywą dla animacji, ponieważ nie powoduje ona zrzucenia punktów odległych od siebie, co prowadzi do niezamierzonych zmian prędkości w kamerze.

W łączu dyskusja rozpoczyna się od wyjaśnienia matematycznego, dostarcza pseudokodu, a następnie pokazuje, jak wyprowadzić kilka popularnych typów krzywych z odmianami o tej samej początkowej matematyce. To ciągnie się do TCB: Napięcie, Ciągłość, & Krzywe odchylenia, które dają ci miły rodzaj kontroli, jaki będziesz potrzebować w swoim aparacie.