3D-websites: wanneer ze de moeite waard zijn en hoe je ze snel houdt

Het korte antwoord

Een 3D-website is de moeite waard als het onderwerp ruimtelijk is of als je erdoorheen bewegen iets uitlegt wat een afbeelding niet kan: een product dat je wilt ronddraaien, een plek, een dataset, een wereld. Hij is het niet waard als hij alleen een pagina versiert die een foto of een korte video net zo goed zou uitleggen. Hoe dan ook heeft de 3D-laag een echte prijs in downloadgrootte, batterij en toegankelijkheid. Bouw de pagina dus zo dat hij ook zonder 3D werkt, en behandel de 3D als verrijking.

Deze gids is gebaseerd op twee van onze eigen projecten: Janus Observatory, een browserervaring met tien 3D-werelden, en dardo.studio, waarvan de homepage opent met een realtime 3D-scène.

Wanneer 3D zijn plek verdient

• De bezoeker moet iets van meer dan één kant zien: een product, een gebouw, een apparaat.
• Ruimte is het verhaal: een kaart, een situatietekening, een reis langs plekken.
• Interactie legt een systeem uit, sneller dan tekst, bijvoorbeeld bij het vergelijken van scenario's of het verkennen van data.
• De merkbeleving is het product: lanceringen, tentoonstellingen en campagnes waarbij sfeer telt en bezoekers verwachten te kunnen rondkijken.

Wanneer niet

• De 3D-scène herhaalt wat een kop en een afbeelding al zeggen.
• De meeste bezoekers komen binnen op middenklassetelefoons via mobiele data en hebben snel één feit nodig, zoals een prijs, een adres of openingstijden.
• Niemand in het team onderhoudt na de lancering de modellen, de code en de fallbacks.

3D, video of beeld?

WebGL draait in elke moderne browser. WebGPU is nieuwer en voor sommig werk sneller, maar de ondersteuning verschilt nog, dus plan een fallback. De 3D-entree van dardo.studio probeert eerst WebGPU en valt terug op WebGL 2, terwijl de pagina's voor diensten, werk en contact gewone HTML zijn die nooit op een 3D-scène wachten.

Wat we leerden bij het bouwen van Janus Observatory

Janus Observatory maakt van tien gepubliceerde scenario's voor de toekomst van de aarde een verhaal in 17 hoofdstukken, een atlas en een observatorium, met tien originele low-poly-werelden en een gearticuleerde buitenaardse astronoom. Het draait op het gratis abonnement van Cloudflare Workers, dat de grootte van de applicatie begrenst. Het releaserapport van het project van 27 september 2026 legt vast wat er nodig was om het snel te houden:

• Comprimeer modellen en houd een fallback. De 59 3D-modellen worden geleverd als gzip-varianten van samen 8,2 MB in plaats van 15,8 MB, 47,9% minder om te downloaden. Browsers die ze niet kunnen decomprimeren, krijgen de originele bestanden.
• Decodeer buiten de main thread, en stop daarna. Meshopt-decodering draait op één achtergrondworker die na vijf seconden zonder werk afsluit.
• Stel een JavaScript-budget vast en handhaaf het. De initiële JavaScript van de homepage is 197.059 bytes gzipped, tegen een budget van 256.000 bytes, en de build controleert dat.
• Let op request storms. Een speculatieve prefetch-lus in de stack van Next.js en OpenNext deed 11.704 verzoeken in één mislukte browsertrace. De oplossing was prefetching voor die links uit te zetten, en de tests eisen nu nul speculatieve verzoeken.
• Leg de resolutie vast in plaats van framerates na te jagen. De canvassen renderen op een vaste device pixel ratio van 1 tot 1,5. Het rapport trok ook een eerder framerate-cijfer in dat afhing van een lagere resolutie, dus dat noemen we niet.

Bouw het zo dat het zonder 3D werkt

Janus heeft één regel die al het andere bepaalt: de kernervaring moet werken zonder WebGL en zonder AI. Alle tien scenariorecords laden met JavaScript uitgeschakeld, de bediening werkt zonder WebGL, en draaien met het toetsenbord, zichtbare focus en beperkte beweging zijn bij elke functie meegebouwd. De toegankelijkheidspagina zet de bediening, de niet-visuele equivalenten en de bekende beperkingen op een rij. Het doel is WCAG 2.2 niveau AA, gecontroleerd met geautomatiseerde tests in Chromium, Firefox en WebKit.

Die regel helpt ook zoekmachines en AI-assistenten: de tekst, namen en data staan in de HTML, niet in een canvas.

Checklist voor een snelle, toegankelijke 3D-pagina

1. Schrijf de pagina eerst zonder 3D. Als de HTML-versie niet klopt, lost de 3D dat niet op.
2. Bepaal wat de 3D uitlegt, en schrap alles wat er alleen staat om indruk te maken.
3. Stel budgetten vast voor JavaScript, modelgewicht en textuurgrootte voordat het modelleren begint, en controleer ze in de build.
4. Comprimeer modellen met tools zoals meshoptimizer, lever ze in het formaat glTF en houd een ongecomprimeerde fallback als je op nieuwere browserfuncties zoals DecompressionStream vertrouwt.
5. Laad de scène na de content, en pas wanneer hij bijna in beeld komt.
6. Begrens de pixel ratio zodat schermen met een hoge pixeldichtheid niet vier keer zoveel pixels renderen.
7. Respecteer prefers-reduced-motion, geef elke interactie een toetsenbordroute en zet een tekstequivalent naast elk canvas.
8. Test op echte middenklassetelefoons en in meer dan één browser-engine, en volg na de lancering de Core Web Vitals.

Wat het kost

3D voegt modelleer-, optimalisatie- en testtijd toe bovenop ontwerp en ontwikkeling, en de fallbacks horen bij het werk; ze zijn geen extraatje. Als wij er een offerte voor maken, verschijnt het als de regel "maatwerkanimatie, 3D of interactieve data" bij de kostenfactoren die we beschrijven in onze gids over wat een website in Colombia kost.

Zo bouwt Dardo 3D-websites

We ontwerpen en bouwen 3D-ervaringen via onze dienst interactieve 3D-websites, en lichter bewegings- en scrollwerk via creative development. Voor Hyper bouwden we met React Three Fiber een 3D-verhaal dat op scroll reageert en verspreide signalen samenbrengt tot één klantprofiel. Heb je een idee dat ruimte nodig heeft om begrepen te worden? Vertel ons erover.