RIKOSZET.
Bar i klub gier, który zwiedzasz w 3D
RIKOSZET to bar w starej rozlewni: bilard, rzutki, karaoke i scena pod jednym dachem. Zamiast galerii zdjęć zbudowaliśmy cały lokal w 3D — można obejrzeć go z każdej strony, zajrzeć do środka i od razu zarezerwować konkretny stół. Wszystko działa płynnie w przeglądarce, na telefonie i na komputerze.
Branża
Gastronomia & rozrywka
Typ projektu
Interaktywna strona 3D
Technologia
Three.js · Vite
Rok
2026
Fikcyjna marka, prawdziwy projekt i kod — zbudowany w całości przez KODA jako pokaz tego, jak pracujemy.
Lokal pełen atrakcji, którego nie da się pokazać zdjęciem.
Bar z bilardem, rzutkami, karaoke i sceną żyje atmosferą — a tę najtrudniej oddać statyczną galerią. Gość chce poczuć miejsce i wiedzieć, gdzie usiądzie, zanim zadzwoni i zarezerwuje.
Bo statyczny obraz tego nie odda.
Nagranie prosto z ekranu — dokładnie to zobaczysz, otwierając stronę na żywo.
Dlaczego tak, a nie inaczej.
Wyzwanie
Bar to atmosfera, nie menu.
Decyzja
Zbudowaliśmy interaktywną scenę 3D zamiast galerii zdjęć.
Efekt
Gość czuje klimat lokalu, zanim w ogóle wejdzie.
Wyzwanie
Cztery strefy trudno pokazać na płasko.
Decyzja
Dodaliśmy przekroje budynku i klikalne hotspoty stref.
Efekt
Każda atrakcja dostaje swój moment i kontekst.
Wyzwanie
3D bywa ciężkie na telefonie.
Decyzja
Scena generuje się w kodzie, z auto-dopasowaniem jakości.
Efekt
Płynnie i na mocnym PC, i na słabszym telefonie.
Strona dopracowana od telefonu po duży ekran — ten sam charakter, pełna płynność wszędzie.
Zakres prac
- Projekt i kierunek wizualny
- Modelowanie sceny 3D (Three.js)
- Interaktywny kreator rezerwacji
- Tryb dzienny i nocny
- Optymalizacja wydajności 3D
- SEO i dostępność (WCAG 2.2 AA)
Co dostajesz
- Cały lokal w 3D generowany w przeglądarce — zero plików do pobrania
- Automatyczne dopasowanie jakości do mocy urządzenia
- Pełna obsługa klawiatury i czytników ekranu (axe-core: 0 błędów)
- Dane strukturalne dla Google (godziny, adres, mapa) + komplet meta i ikon
Dowód rzemiosła — sprawdzisz to sam
3D
Cały lokal w przeglądarce
WCAG 2.2 AA
axe-core: 0 błędów
320–2560 px
Telefon → 4K
Najlepiej zobaczyć to na żywo.
Otwórz stronę — najlepiej też na telefonie — i sprawdź szybkość, animacje i każdy detal.
