--- title: "3D Websites: When They're Worth It and How to Keep Them Fast" description: "When a 3D website is worth it, 3D vs video vs images, and what we learned keeping Janus Observatory's ten 3D worlds fast and usable without WebGL." url: "https://dardo.studio/en/blog/3d-websites/" language: "en" translations: {"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/","nl":"https://dardo.studio/nl/blog/3d-websites/","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-12T23:16:15.266Z" --- [Blog](https://dardo.studio/en/blog/) # 3D websites: when they're worth it and how to keep them fast When a 3D website earns its place, when video or images work better, and how we kept Janus Observatory's ten 3D worlds fast, accessible and usable. By [Nicolás Cerón](https://dardo.studio/en/studio/) ·October 12, 2026 ![The interior of an old planetarium at night: a brass star projector casts amber points of light across a navy dome, and a small faceted crimson planet hovers above it.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Key takeaways - 3D is worth it when the subject is spatial or when exploring it explains something a picture can't; otherwise images or video usually work better. - Build the page so it works without WebGL and treat the 3D layer as an enhancement; it also keeps text and data readable for search engines. - On Janus Observatory, gzip variants cut the transfer of 59 3D models from 15.8 MB to 8.2 MB, with the originals kept as a fallback. - Set budgets for JavaScript and model weight before modelling, and check them on every release. - Cap the pixel ratio, respect reduced motion, give every interaction a keyboard path and test on real mid-range phones. ## The short answer A 3D website is worth it when the subject is spatial or when moving through it explains something a picture can't: a product you want to turn around, a place, a dataset, a world. It isn't worth it when it only decorates a page that a photo or a short video would explain just as well. Either way, the 3D layer has a real cost in download size, battery and accessibility, so build the page to work without it and treat the 3D as an enhancement. This guide draws on two of our own projects: [Janus Observatory](https://dardo.studio/en/work/janus-observatory/), a browser experience with ten 3D worlds, and dardo.studio, whose homepage opens with a real-time 3D scene. ## When 3D earns its place - **The visitor needs to see something from more than one angle:** a product, a building, a piece of equipment. - **Space is the story:** a map, a site plan, a journey through places. - **Interaction explains a system** faster than text, as with comparing scenarios or exploring data. - **The brand experience is the product:** launches, exhibitions and campaigns where atmosphere matters and visitors expect to explore. ## When it doesn't - The 3D scene repeats what a headline and an image already say. - Most visitors arrive on mid-range phones over mobile data and need one fact quickly, such as a price, an address or opening hours. - Nobody on the team will maintain the models, the code and the fallbacks after launch. ## 3D, video or images? | Option | Good for | Watch out for | | --------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------- | | Real-time 3D with WebGL or WebGPU | Exploring, rotating, comparing, reacting to input | Model and code weight, GPU load, accessibility work, browser testing | | Video | Showing a sequence or atmosphere the same way every time | File size, autoplay rules, captions, no interaction | | Images or a short animation | Explaining one thing quickly | Less memorable; can't be explored | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) runs in every modern browser. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) is newer and faster for some work, but support still varies, so plan a fallback. The 3D entrance on dardo.studio tries WebGPU first and falls back to WebGL 2, while the service, work and contact pages are plain HTML that never wait for a 3D scene. ## What we learned building Janus Observatory Janus Observatory turns ten published scenarios for Earth's future into a 17-chapter story, an atlas and an observatory, with ten original low-poly worlds and an articulated alien astronomer. It runs on Cloudflare Workers' free plan, which caps the size of the application. The project's release report of 27 September 2026 records what it took to keep it fast: - **Compress models and keep a fallback.** The 59 3D models ship as gzip variants totalling 8.2 MB instead of 15.8 MB, 47.9% less to download. Browsers that can't decompress them get the original files. - **Decode off the main thread, then stop.** Meshopt decoding runs on a single background worker that shuts down after five idle seconds. - **Set a JavaScript budget and enforce it.** Initial homepage JavaScript is 197,059 bytes gzipped against a 256,000-byte budget, and the build checks it. - **Watch for request storms.** A speculative prefetch loop in the Next.js and OpenNext stack made 11,704 requests in one failed browser trace. The fix was to turn prefetching off for those links, and the tests now require zero speculative requests. - **Fix the resolution instead of chasing frame rates.** The canvases render at a fixed 1 to 1.5 device pixel ratio. The report also withdrew an earlier frame-rate figure that depended on lowering the resolution, so we don't quote one. ## Build it to work without 3D Janus has one rule that shapes everything else: the core experience must work without WebGL and without AI. All ten scenario records load with JavaScript turned off, the controls work without WebGL, and keyboard rotation, visible focus and reduced motion were built with each feature. Its [accessibility page](https://janus-observatory.nicocerond.workers.dev/accessibility) lists the controls, the non-visual equivalents and the known limits. The target is [WCAG 2.2](https://www.w3.org/TR/WCAG22/) level AA, checked with automated tests in Chromium, Firefox and WebKit. That rule also helps search and AI assistants: the text, names and data live in the HTML, not inside a canvas. ## A checklist for a fast, accessible 3D page 1. **Write the page without 3D first.** If the HTML version doesn't make sense, the 3D won't fix it. 2. **Decide what the 3D explains**, and cut anything that's only there to look impressive. 3. **Set budgets** for JavaScript, model weight and texture size before modelling starts, and check them in the build. 4. **Compress models** with tools such as [meshoptimizer](https://meshoptimizer.org/), serve them in the [glTF](https://www.khronos.org/gltf/) format and keep an uncompressed fallback when you rely on newer browser features such as [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream). 5. **Load the scene after the content**, and only when it's about to be seen. 6. **Cap the pixel ratio** so high-density screens don't render four times the pixels. 7. **Respect** [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), give every interaction a keyboard path and put a text equivalent next to every canvas. 8. **Test on real mid-range phones** and in more than one browser engine, then follow [Core Web Vitals](https://web.dev/articles/vitals) after launch. ## What it costs 3D adds modelling, optimization and testing time on top of design and development, and the fallbacks are part of the job, not an extra. When we quote it, it shows up as the "custom motion, 3D or interactive data" line in the cost factors we describe in our guide to [what a website costs in Colombia](https://dardo.studio/en/blog/website-cost-colombia/). ## How Dardo builds 3D websites We design and build 3D experiences through our [interactive 3D websites](https://dardo.studio/en/services/interactive-3d-websites/) service, and lighter motion and scroll work through [creative development](https://dardo.studio/en/services/creative-development/). For [Hyper](https://dardo.studio/en/work/hyper/) we built a scroll-driven 3D story with React Three Fiber that turns scattered signals into one customer profile. If you have an idea that needs space to be understood, [tell us about it](https://dardo.studio/en/contact/?service=interactive-3d-websites). ## Common questions **Do 3D websites hurt SEO?** Not if the content lives in the HTML. Search engines read text, links and structured data, not what's drawn inside a canvas, so put names, descriptions and data in the page and use the 3D scene to enhance them. **Do 3D websites work on phones?** They can, with budgets for model size and JavaScript, a capped pixel ratio and testing on real mid-range phones. Always provide a version that works without WebGL. **Should I use WebGL or WebGPU?** WebGL runs in every modern browser. WebGPU is newer and can be faster, but support still varies, so if you use it, plan a WebGL fallback, as the dardo.studio homepage does. **Is a 3D website accessible?** It can be, if accessibility is built with each feature: keyboard controls, visible focus, reduced motion and a text equivalent next to every canvas. Janus Observatory targets WCAG 2.2 level AA. ## Sources & further reading Sources behind this page, with further detail from the original publishers. - [Janus Observatory: accessibility](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/en/studio/) Nicolás Cerón is the founder of Dardo, a brand, web design and development studio in Bogotá, Colombia. ## Related articles - [**How much does a website cost in Colombia in 2026? Real prices and what moves a quote**Dated, published prices from Bogotá providers, the fixed yearly costs of a domain and hosting, and the factors that actually move a website quote.](https://dardo.studio/en/blog/website-cost-colombia/) - [**Framer to Astro: how to move a Framer site without losing its design or rankings**Framer has no HTML export, so moving to Astro is a rebuild. What to capture first, what breaks, and how to keep the design, URLs and rankings.](https://dardo.studio/en/blog/framer-to-astro/) - [**7 brand repositioning examples: what changed and what the companies reported**Seven real brand repositionings, from Juan Valdez to Domino's and CUPRA: what changed, what the companies reported, and what the cases have in common.](https://dardo.studio/en/blog/brand-repositioning-examples/) - [**WordPress or a custom website? How to choose, and when each one pays off**When WordPress is the right choice, when a custom site pays off, and the middle path of headless WordPress, compared on cost, speed, updates and ownership.](https://dardo.studio/en/blog/wordpress-vs-custom-website/) ## Keep exploring. - [Service · **Interactive 3D websites with Three.js and WebGL**](https://dardo.studio/en/services/interactive-3d-websites/) - [Your project · **Start a conversation**](https://dardo.studio/en/contact/)