--- title: "3D-website: wanneer loont het en hoe houd je hem snel?" description: "Wanneer een 3D-website loont, 3D vs video vs beeld, en hoe we de tien 3D-werelden van Janus Observatory snel en zonder WebGL bruikbaar hielden." url: "https://dardo.studio/nl/blog/3d-websites/" language: "nl" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T00:59:12.285Z" --- [Blog](https://dardo.studio/nl/blog/) # 3D-websites: wanneer ze de moeite waard zijn en hoe je ze snel houdt Wanneer een 3D-website zijn plek verdient, wanneer video of beeld beter werkt, en hoe we de tien 3D-werelden van Janus Observatory snel en bruikbaar hielden. Door [Nicolás Cerón](https://dardo.studio/nl/studio/) ·12 oktober 2026 ![Het interieur van een oud planetarium bij nacht: een messing sterrenprojector werpt amberkleurige lichtpunten op een marineblauwe koepel, en een kleine, gefacetteerde karmozijnrode planeet zweeft erboven.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Belangrijkste punten - 3D is de moeite waard als het onderwerp ruimtelijk is of als verkennen iets uitlegt wat een afbeelding niet kan; anders werken beeld of video meestal beter. - Bouw de pagina zo dat hij zonder WebGL werkt en behandel de 3D-laag als verrijking; zo blijven tekst en data ook leesbaar voor zoekmachines. - Bij Janus Observatory verkleinden gzip-varianten de overdracht van 59 3D-modellen van 15,8 MB naar 8,2 MB, met de originelen als fallback. - Leg budgetten voor JavaScript en modelgewicht vast voordat het modelleren begint, en controleer ze bij elke release. - Begrens de pixel ratio, respecteer beperkte beweging, geef elke interactie een toetsenbordroute en test op echte middenklassetelefoons. ## 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](https://dardo.studio/nl/werk/janus-observatory-webdesign-case/), 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? | Optie | Geschikt voor | Let op | | ---------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- | | Realtime 3D met WebGL of WebGPU | Verkennen, draaien, vergelijken, reageren op input | Gewicht van modellen en code, GPU-belasting, toegankelijkheidswerk, browsertests | | Video | Een reeks of sfeer telkens op dezelfde manier laten zien | Bestandsgrootte, autoplayregels, ondertiteling, geen interactie | | Afbeeldingen of een korte animatie | Snel één ding uitleggen | Minder memorabel; niet te verkennen | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) draait in elke moderne browser. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) 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](https://janus-observatory.nicocerond.workers.dev/accessibility) zet de bediening, de niet-visuele equivalenten en de bekende beperkingen op een rij. Het doel is [WCAG 2.2](https://www.w3.org/TR/WCAG22/) 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](https://meshoptimizer.org/), lever ze in het formaat [glTF](https://www.khronos.org/gltf/) en houd een ongecomprimeerde fallback als je op nieuwere browserfuncties zoals [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/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**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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](https://web.dev/articles/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](https://dardo.studio/nl/blog/wat-kost-een-website-colombia/). ## Zo bouwt Dardo 3D-websites We ontwerpen en bouwen 3D-ervaringen via onze dienst [interactieve 3D-websites](https://dardo.studio/nl/diensten/interactieve-3d-websites/), en lichter bewegings- en scrollwerk via [creative development](https://dardo.studio/nl/diensten/creative-development/). Voor [Hyper](https://dardo.studio/nl/werk/hyper-webdesign-case-study/) 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](https://dardo.studio/nl/contact/?service=interactive-3d-websites). ## Veelgestelde vragen **Zijn 3D-websites slecht voor SEO?** Niet als de content in de HTML staat. Zoekmachines lezen tekst, links en gestructureerde data, niet wat er in een canvas wordt getekend. Zet namen, beschrijvingen en data dus in de pagina en gebruik de 3D-scène om ze te verrijken. **Werken 3D-websites op telefoons?** Dat kan, met budgetten voor modelgrootte en JavaScript, een begrensde pixel ratio en tests op echte middenklassetelefoons. Zorg altijd voor een versie die zonder WebGL werkt. **Moet ik WebGL of WebGPU gebruiken?** WebGL draait in elke moderne browser. WebGPU is nieuwer en kan sneller zijn, maar de ondersteuning verschilt nog. Gebruik je het, plan dan een WebGL-fallback, zoals de homepage van dardo.studio doet. **Is een 3D-website toegankelijk?** Dat kan, als toegankelijkheid bij elke functie wordt meegebouwd: toetsenbordbediening, zichtbare focus, beperkte beweging en een tekstequivalent naast elk canvas. Janus Observatory mikt op WCAG 2.2 niveau AA. ## Bronnen & meer lezen Bronnen achter deze pagina, met meer details van de oorspronkelijke uitgevers. - [Janus Observatory: toegankelijkheid (in het Engels)](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/nl/studio/) Nicolás Cerón is de oprichter van Dardo, een studio voor branding, webdesign en webontwikkeling in Bogotá, Colombia. ## Gerelateerde artikelen - [**Wat kost een website in Colombia in 2026? Echte prijzen en wat een offerte bepaalt**Wat een website in Colombia kost: gedateerde prijzen van aanbieders in Bogotá, de vaste jaarkosten van domein en hosting, en wat een offerte echt bepaalt.](https://dardo.studio/nl/blog/wat-kost-een-website-colombia/) - [**Framer naar Astro: zo verhuis je een Framer-site zonder design of rankings te verliezen**Framer heeft geen HTML-export, dus overstappen naar Astro is opnieuw bouwen. Wat je eerst vastlegt, wat breekt en hoe je design, URL's en rankings behoudt.](https://dardo.studio/nl/blog/framer-naar-astro/) - [**Webflow naar Astro: zo migreer je een Webflow-site zonder content, design of rankings te verliezen**Webflow naar Astro migreren: de code-export laat het CMS, formulieren, zoeken en talen achter. Wat je meeneemt, wat je herbouwt en hoe je rankings behoudt.](https://dardo.studio/nl/blog/webflow-naar-astro/) - [**WordPress naar Astro: zo migreer je een WordPress-site, headless of volledig, zonder je rankings te verliezen**WordPress naar Astro: twee routes, wat je exporteert, hoe je Yoast-titels, permalinks en uploads behoudt en welke URL's de meeste migraties vergeten.](https://dardo.studio/nl/blog/wordpress-naar-astro/) ## Blijf ontdekken. - [Dienst · **Interactieve 3D-websites met Three.js en WebGL**](https://dardo.studio/nl/diensten/interactieve-3d-websites/) - [Jouw project · **Start een gesprek**](https://dardo.studio/nl/contact/)