Digikrom Virtual 3D Showroom – Innowacyjna przestrzeń interaktywna (Case Study)

Celem projektu było stworzenie w pełni immersyjnego, trójwymiarowego showroomu wewnątrz standardowej przeglądarki, zintegrowanego z systemem WordPress i Elementor. Zamiast płaskiej galerii, użytkownik wchodzi w interaktywny korytarz, w którym ściany stają się płótnem dla treści wideo.

Wyzwania Techniczne (The Battlefield)

Podczas realizacji napotkaliśmy trzy krytyczne bariery, które wymagały niestandardowego podejścia do inżynierii front-endu:

• Interaktywność Iframe (YouTube Shield): Standardowe osadzenie filmów YouTube w przestrzeni 3D powodowało „kradzież” zdarzeń myszy. Gdy kursor najeżdżał na film, nawigacja 3D przestawała działać.

• Geometria i Kolizje (Hulk Effect): Przeglądarkowy silnik renderowania CSS3D nie posiada wbudowanej fizyki. Bez twardych „odbojników” w kodzie, użytkownik mógł „przebić się” przez ścianę, tracąc orientację.

• Precyzja Renderowania: Przeglądarki różnie interpretują marginesy i transformacje obiektów w osi Z, co wymagało odejścia od elastycznych układów na rzecz sztywnej matematyki.
  
  

Zastosowane Rozwiązania

1. Hybrydowa Nawigacja 360°

Zastosowaliśmy autorski algorytm sterowania kamerą, który oddziela ruch postępowy (oś Z i X) od obrotowego. Dzięki temu użytkownik może swobodnie rozglądać się wokół własnej osi w pełnym zakresie, podczas gdy kamera stabilnie porusza się po wyznaczonej ścieżce.

2. System Pointer Shields

Aby wyeliminować zacinanie się obrazu przy najechaniu na wideo, wprowadziliśmy dynamiczne tarcze ochronne. Blokują one interakcję z odtwarzaczem podczas nawigacji, a dezaktywują się dopiero po kliknięciu hotspotu „STAŃ TUTAJ”, umożliwiając odtworzenie filmu bez zakłóceń.

3. Architektura Hard-Box

Zrezygnowaliśmy z automatycznych marginesów na rzecz sztywnego pozycjonowania matematycznego. Każdy element wideo ma twardo zdefiniowany offset względem ramy, co gwarantuje perfekcyjną symetrię niezależnie od urządzenia.