3D-webbplatser: när de är värda det och hur du håller dem snabba

Det korta svaret

En 3D-webbplats är värd det när ämnet är rumsligt eller när det förklarar något som en bild inte kan att röra sig genom det: en produkt du vill vrida på, en plats, en datamängd, en värld. Den är inte värd det när den bara dekorerar en sida som ett foto eller en kort video skulle förklara lika bra. Hur som helst har 3D-lagret en verklig kostnad i nedladdningsstorlek, batteri och tillgänglighet, så bygg sidan så att den fungerar utan det och behandla 3D som en förbättring.

Guiden bygger på två av våra egna projekt: Janus Observatory, en webbläsarupplevelse med tio 3D-världar, och dardo.studio, vars startsida öppnar med en 3D-scen i realtid.

När 3D förtjänar sin plats

• Besökaren behöver se något från mer än en vinkel: en produkt, en byggnad, en utrustning.
• Rummet är berättelsen: en karta, en situationsplan, en resa genom olika platser.
• Interaktion förklarar ett system snabbare än text, som när man jämför scenarier eller utforskar data.
• Varumärkesupplevelsen är produkten: lanseringar, utställningar och kampanjer där atmosfären spelar roll och besökarna förväntar sig att utforska.

När det inte gör det

• 3D-scenen upprepar det som en rubrik och en bild redan säger.
• De flesta besökare kommer via mellanklassmobiler över mobildata och behöver snabbt ett enda faktum, som ett pris, en adress eller öppettider.
• Ingen i teamet kommer att underhålla modellerna, koden och reservlösningarna efter lanseringen.

3D, video eller bilder?

WebGL fungerar i alla moderna webbläsare. WebGPU är nyare och snabbare för vissa uppgifter, men stödet varierar fortfarande, så planera en reservlösning. 3D-entrén på dardo.studio provar WebGPU först och faller tillbaka på WebGL 2, medan sidorna för tjänster, projekt och kontakt är vanlig HTML som aldrig väntar på en 3D-scen.

Vad vi lärde oss av att bygga Janus Observatory

Janus Observatory gör om tio publicerade scenarier för jordens framtid till en berättelse i 17 kapitel, en atlas och ett observatorium, med tio egna low poly-världar och en ledad utomjordisk astronom. Projektet körs på gratisplanen för Cloudflare Workers, som begränsar applikationens storlek. Projektets releaserapport från den 27 september 2026 dokumenterar vad som krävdes för att hålla det snabbt:

• Komprimera modellerna och behåll en reserv. De 59 3D-modellerna levereras som gzip-varianter på totalt 8,2 MB i stället för 15,8 MB, 47,9 % mindre att ladda ner. Webbläsare som inte kan dekomprimera dem får originalfilerna.
• Avkoda utanför huvudtråden, och stäng sedan av. Meshopt-avkodningen körs i en enda bakgrundsworker som stängs av efter fem sekunders inaktivitet.
• Sätt en JavaScript-budget och håll fast vid den. Startsidans initiala JavaScript är 197 059 byte gzippat mot en budget på 256 000 byte, och bygget kontrollerar det.
• Se upp för anropsstormar. En spekulativ prefetch-loop i stacken med Next.js och OpenNext gjorde 11 704 anrop i en misslyckad webbläsartrace. Lösningen var att stänga av prefetch för de länkarna, och testerna kräver nu noll spekulativa anrop.
• Lås upplösningen i stället för att jaga bildfrekvens. Canvas-ytorna renderas med ett fast pixelförhållande på 1 till 1,5. Rapporten drog också tillbaka en tidigare siffra för bildfrekvensen som byggde på att upplösningen sänktes, så vi anger ingen.

Bygg sidan så att den fungerar utan 3D

Janus har en regel som formar allt annat: kärnupplevelsen måste fungera utan WebGL och utan AI. Alla tio scenarioposterna laddas med JavaScript avstängt, kontrollerna fungerar utan WebGL, och tangentbordsrotation, synligt fokus och reducerad rörelse byggdes in med varje funktion. Projektets tillgänglighetssida listar kontrollerna, de icke-visuella motsvarigheterna och de kända begränsningarna. Målet är WCAG 2.2 nivå AA, kontrollerat med automatiserade tester i Chromium, Firefox och WebKit.

Den regeln hjälper också sökmotorer och AI-assistenter: texten, namnen och datan finns i HTML-koden, inte inuti en canvas.

En checklista för en snabb och tillgänglig 3D-sida

1. Skriv sidan utan 3D först. Om HTML-versionen inte är begriplig kommer 3D inte att rädda den.
2. Bestäm vad 3D ska förklara, och skär bort allt som bara finns där för att imponera.
3. Sätt budgetar för JavaScript, modellvikt och texturstorlek innan modelleringen börjar, och kontrollera dem i bygget.
4. Komprimera modellerna med verktyg som meshoptimizer, leverera dem i formatet glTF och behåll en okomprimerad reserv när du förlitar dig på nyare webbläsarfunktioner som DecompressionStream.
5. Ladda scenen efter innehållet, och först när den snart ska synas.
6. Begränsa pixelförhållandet så att skärmar med hög pixeltäthet inte renderar fyra gånger så många pixlar.
7. Respektera prefers-reduced-motion, ge varje interaktion ett tangentbordsalternativ och placera en textmotsvarighet bredvid varje canvas.
8. Testa på riktiga mellanklassmobiler och i mer än en webbläsarmotor, och följ sedan Core Web Vitals efter lanseringen.

Vad det kostar

3D lägger till tid för modellering, optimering och tester utöver design och utveckling, och reservlösningarna är en del av jobbet, inte ett tillägg. När vi lämnar offert syns det som raden ”skräddarsydd rörelse, 3D eller interaktiv data” bland kostnadsfaktorerna i vår guide om vad en hemsida kostar i Colombia.

Så bygger Dardo 3D-webbplatser

Vi designar och bygger 3D-upplevelser inom vår tjänst för interaktiva 3D-webbplatser, och lättare rörelse- och scrollarbete inom kreativ utveckling. För Hyper byggde vi en scrollstyrd 3D-berättelse med React Three Fiber som förvandlar utspridda signaler till en enda kundprofil. Om du har en idé som behöver rum för att förstås, berätta om den.