// Vodič

3D sajt na mobilnom — kako da radi na slabim telefonima

3D sajt mora da radi i na 200-evrovom Samsung-u, ne samo na iPhone Pro-u — device-tier detekcija je obavezna.

Mobilna publika je 60-70% saobraćaja na većini sajtova, što znači da 3D sajt koji radi samo na flagship telefonima ne radi za većinu publike. Device-tier sistem koji koristim radi pre prve scene: detektuje GPU klasu kroz unmasked vendor info, RAM, broj logičkih jezgara, da klasifikuje uređaj u low/medium/high. Low tier vidi static fallback ili vrlo lagana scena (200 čestica, basic materijal); medium vidi srednju verziju (600 čestica, standardni materijal); high vidi punu kvalitetu. Korisnik nikada ne čeka na uređaj koji ne može da podrži. Lighthouse mobile na real devices testira se na Pixel 4a (low-end Android iz 2020) — to je pravi test, ne flagship u kancelariji.

Konkretan odgovor

Najkraći mogući odgovor na 3D sajt na mobilnom — kako da radi na slabim telefonima: za većinu projekata u 2026, ide se sa proverenim alatima i izbegava se eksperimentalan stack. Detalji zavise od opsega projekta, vremenskog horizonta i veličine tima. U narednim sekcijama ulazim u svaki od ovih faktora.

Šta utiče na izbor

Tri stvari koje određuju pravac: (1) lifespan projekta — sajt za 6-mesečnu kampanju ide drugačije od sajta koji treba da traje 5 godina, (2) tim koji održava — solo developer bira drugo nego agencija sa 10 ljudi, (3) device profil publike — premium publika ima moderne uređaje, mass market ima starije telefone.

Praktične preporuke

U produkcijskom radu sa mobilni, evo šta najčešće radim: stable Three.js (ne najnoviji rilis), glTF 2.0 + Draco za asete, KTX2 za teksture, IntersectionObserver da pauzira render kada scena nije vidljiva, prefers-reduced-motion respektovan svuda. To je 80% best-practice setup-a.

Najčešće greške

Tri greške koje viđam najviše: (1) test samo na flagship telefonu — uvek probati na 3-godina-starom Androidu sa 4GB RAM, (2) puni-rezolucija teksture na mobilnom — uvek imati KTX2 fallback, (3) scena renderuje i kad nije na ekranu — IntersectionObserver pauzira render loop. Svaki problem ima jasno rešenje, samo je važno prepoznati simptom.

Često postavljana pitanja

Mogu li sam da naučim ovo?
Možete, ali to je 6-12 meseci posvećenog rada do produkcijskog kvaliteta. Za projekat sa rokom i budžetom, brže je angažovati nekoga ko već zna. Vodič je orientacioni — pomaže vam da razumete šta je važno, a šta da preskočite.
Šta posle ovog vodiča?
Tri preporučena resursa: zvaničan Three.js fundamentals (besplatno), Bruno Simon Three.js Journey (plaćen, kompletan), React Three Fiber dokumentacija ako idete na React. Plus čitanje izvornog koda na GitHub-u — search "three-js portfolio" trending.
Koliko traje izrada?
Standardni rok: 4-6 nedelja od potpisa ugovora do live sajta. Veći opseg (konfigurator, multi-scene scrollytelling) ide na 8-12 nedelja. Hitne projekte (2-3 nedelje) primam uz povećanje cene od 30-40%.
Koliko košta?
Hero 3D nadogradnja: 800-1.200 EUR. Kompletan multi-scene 3D sajt: 2.500-4.000 EUR. Konfigurator sa custom shaderima: 4.000-10.000 EUR. Sve fiksne cene, izvorni kod uključen. Plaćanje preko firme sa PDV-om.
Šta sa korisnicima na slabim telefonima?
Sajt detektuje device tier pre prve scene i servira lakšu verziju na slabom hardveru (manje čestica, jednostavniji shaderi). Uređaji bez WebGL-a dobiju statičan fallback koji čuva vizuelni jezik i konverzioni put.

Spremni za 3D iskustvo na vašem sajtu?

Recite mi šta vam treba — fiksna cena, fiksan rok, bez iznenađenja.

Pozovi