3D websites: when they're worth it and how to keep them fast

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, 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?

WebGL runs in every modern browser. WebGPU 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 lists the controls, the non-visual equivalents and the known limits. The target is WCAG 2.2 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, serve them in the glTF format and keep an uncompressed fallback when you rely on newer browser features such as 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, 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 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.

How Dardo builds 3D websites

We design and build 3D experiences through our interactive 3D websites service, and lighter motion and scroll work through creative development. For 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.