// Tehnologija

React Three Fiber za component-driven 3D sajtove

Three.js scena pisana kao React komponente: deklarativno, hot-reload friendly, lakše za održavanje na timskom projektu.

React Three Fiber (R3F) prevodi Three.js u React komponente. Umesto da pišete imperativni `scene.add(mesh)` kod, pišete `<mesh>` JSX i dobijate isto. Zvuči kao kozmetička razlika, ali na produkciji menja sve — hot reload radi normalno, scene state ide kroz React Context, a tim koji već zna React ne mora da uči Three.js mental model. Koristim R3F za projekte gde je 3D deo veće React aplikacije, ili gde više developera diraju isti scene tree. Za jednostavne hero scene, vanilla Three.js je manji bundle.

Kako to radi u praksi

Na tipičnom projektu, r3f react three fiber stiže kao samostalni modul: jedan entry-point JS fajl, jedan CSS, asset bundle ispod 1.5MB ukupno. Integracija je sandbox — ostatak sajta ostaje SEO-friendly klasičan HTML. Frame budget: 60 FPS na srednjem Androidu, sa merljivim fallback režimom ispod toga.

Performance budget

Lighthouse mobile cilj: 85+ u svim kategorijama. Merim na realnim uređajima, ne samo emulatoru. Asset kompresija: glTF + Draco za mesh-eve, KTX2 za teksture, Brotli za shaderse. Lazy-load svake r3f react three fiber scene koja nije above-the-fold da prvi paint ostane ispod 1.5s.

Kada nije isplativo

Ako je cilj jednostavan e-commerce katalog ili sadržajni blog, pun r3f react three fiber setup je prevelik — CSS hero plus statičke slike konvertuju jednako dobro za 1/10 cene. r3f react three fiber se isplati kada brand zahteva memorabilan vizuelni momenat, ili kada 3D zaista pomaže razumevanju proizvoda (konfiguratori, ture, demoi).

Šta dobijate na predaji

Posle isporuke: izvorni repository na GitHub-u (privatan), komentarisan kod, 5-min Loom snimak koji objasni logiku scene, asset pipeline dokumentovan. Prva godina hostinga i sitnih izmena uračunata u cenu. Posle toga dogovaramo plan održavanja ako bude potrebno.

Često postavljana pitanja

Zašto baš ova tehnologija?

Ima najveći produkcijski ekosistem, najviše dokumentacije, i najviše iskusnih developera. Za sajt koji treba da traje 3+ godine, zrelost ekosistema je važnija od pojedinačnih feature-a.

Šta ako sledeće godine izađe nešto novo?

Pratim novi tooling i migriram kada ima smisla, ali tek pošto novi alat ima 6-9 meseci stable produkcijskih izdanja. Ne pišem klijentske sajtove na bleeding-edge alatima — to je put ka pokvarenim sajtovima.

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.

Pošalji upit +381 61 224 8989