Konfigurator w całości działa po stronie klienta. Z drobnymi dodatkami AJAX-owymi, ale to są naprawdę dane znaczące tylko w obrębie jednej sesji projektu.
Projekt był dość długi, problem pojawiał się w momencie gdy zdjęcie obiektu (np. kulki), które miałem było wykonane lekko pod złym kątem. Wtedy dany obiekt nie pokrywał się z makietą,
czyli np. sznurkiem. W całości perspektywa obu obiektów nie pasowała do siebie. Spróbujcie sami jak to działa.
Do zdjęć użytko profesjonalnego obiektywu do zdjęć makro, i sześcianu typu "whitebox", wyszło dobrze, żadnych cieni, ładne wydzielanie z tła.
Logika działania
Zasada działania jest relatywnie prosta. Mamy makietę, która ma swoje współrzędne i mamy obiekty, które też mają swoje współrzędne, i teraz chwytamy myszką
daną zawieszkę/kuleczkę i przeciągamy nad makietę. W momencie zwolnienia przycisku myszy (czyli upuszczenia), program sprawdzi jakie nowe współrzędne ma zawieszka.
Jeżeli nie zgadzają się one ze współrzędnymi sznurka/łańcuszka/bransoletki to program przyciągnie zawieszkę do najbliższych współrzędnych zdefiniowanych dla makiety.
Tak aby zawieszka była na sznurku, a nie obok. Proste?
Dzięki tej zabawie poznałem prawdziwą moc JavaScriptu i jQuery
Live DEMO
Zapraszam do przetestowania. Proszę jednak pamiętać, że to wersja finalna BETA, i nie wszystko może prawidłowo działać.
Wersja demo: Demo