Interactive 3D websites with Three.js and WebGL

An interactive 3D website lets visitors explore a product, place or idea from more than one angle, right in the browser. Dardo designs the information path first, then builds real-time scenes with Three.js and WebGL, or recommends rendered video when that does the job better. Headlines, navigation and the next step stay in readable HTML, so the site still works when a scene can't run.

Get a proposalMessage us on WhatsApp
Dardo / Editorial illustration
On this page

When does a website need 3D?

A real-time scene earns its cost when the visitor's input changes what they learn: rotating a product to see how it fits together, moving through a building or landscape, comparing places side by side, or exploring a system that is easier to grasp in space. If the viewpoint and order are fixed, a rendered film or frame sequence is simpler to produce and test, and it can still feel cinematic.

3D tends to suit product showcases, spatial and architectural storytelling, science and research communication, and immersive brand worlds for a launch. If motion and scroll storytelling are enough without a navigable scene, creative development is the lighter route; maps and dashboards built on data belong to data visualization.

What a 3D website project includes

The proposal states which deliverables are in scope, who creates or supplies the 3D assets and how each item is accepted.

  • Narrative and interaction brief: what visitors explore, in what order and what they do next
  • 3D asset plan covering models you supply, licensed assets or new modeling, prepared as compressed glTF files
  • Browser prototype with mouse, touch and keyboard controls on an agreed phone and desktop
  • Readable HTML content and a reduced-motion route through the same story
  • Performance, device and fallback acceptance, plus handover of source files and asset licenses

Janus Observatory: a 3D interface for ten possible futures

Janus Observatory is a project developed with Blue Marble Space in which Dardo turned a speculative research structure into a cinematic browser journey. Ten futures create an immediate navigation problem: a plain list would lose the spatial premise, and one long 3D sequence would make comparison hard. So the experience is layered. A cinematic opening sets the atmosphere, an atlas shows the full set and an observatory supports closer reading, with routes back that don't replay the introduction.

The 3D layer establishes scale and difference between worlds, while labels, navigation state and written explanations carry the facts outside the rendered scene. Acceptance asks whether a visitor can name the current world, return to the atlas and continue after a rendering fallback; frame rate alone can't answer that. The build is held to bundle budgets and browser QA, and releases are checked for visual regressions. The scenarios are exploratory, not forecasts, and no measured learning or engagement is claimed.

Performance and SEO for 3D websites

Search engines can't read what is drawn inside a canvas, so the headline, copy, links and metadata are rendered as HTML before the scene loads. A poster image holds the scene's place, its space is reserved so nothing shifts, and the 3D code loads after the first content appears. When a state of the experience deserves to be found in search, it gets its own URL.

Performance is measured on the actual assets and target devices rather than promised as a universal frame rate. We record the load sequence, a representative interaction, memory use where relevant and any acceptable visual downgrade on lower-powered phones, working toward Google's Core Web Vitals thresholds. We don't guarantee rankings; we make sure the 3D layer never stands between your content and the crawler.

Fallbacks, reduced motion and accessibility

A visitor should still understand the offer when motion is reduced, the graphics context is lost or a device can't sustain the scene. The fallback can be a still image, a short video or an ordinary content layout, and it must keep the decision available rather than show an error. With reduced motion, camera flights become cuts or steps the visitor controls, and interactive parts get keyboard controls and visible focus.

What drives the cost of a 3D website?

The cost of a 3D site follows original asset production, the number of distinct scenes and interaction states, animation, graphics programming, device support and testing. A supplied product model and a custom environment are very different starting points even if both end up on one page, so the quote separates art direction, modeling or licensed assets, animation, programming, content, audio and launch support.

The first milestone is a small working slice on an agreed phone and desktop browser, with real text, one representative asset and the actual interaction. It exposes navigation, file-size and frame-time problems before the rest is produced. The proposal also names who can replace content and models after launch. Dardo is a team of three in Bogotá led by founder Nicolás Cerón, working in English or Spanish on US Eastern and Central hours.

Questions before you choose

How much does a 3D website cost?

It depends mostly on asset production and the number of scenes. A 3D scope is quoted once we know whether models exist, how many distinct scenes and interaction states are needed and which devices must be supported. The inquiry form's budget bands, from under USD 5,000 up to USD 60,000 and above, help size the first proposal.

Are 3D websites bad for SEO?

Not when the content lives in HTML. Search engines can't read what is drawn inside a WebGL canvas, so the headline, copy, links and metadata must be rendered as normal page content, with the scene loaded afterward. Built that way, a 3D page is crawled like any other; the remaining risks are slow loading and layout shifts, which we test before launch.

Do Three.js websites work on phones?

They can, when the scene is built for phones instead of scaled down from a desktop demo. That means compressed models and textures, a capped rendering resolution, rendering only when something changes and a lighter version for lower-powered devices. We test on an agreed phone from the first working slice, so mobile limits shape the design rather than surprising you at launch.

Does an interactive 3D website always need WebGL?

No. The technique follows the task. If people must change the viewpoint or manipulate an object, real-time WebGL graphics are usually the right call. A fixed narrative can use rendered frames or video with a lighter content layer, which is cheaper to produce and easier to keep fast. Sometimes layered images and careful motion are enough.

Who creates the 3D models?

Either side can, and the proposal says which. You might supply existing product models that need preparing for the web, we might use licensed assets, or the scope might include new modeling. Each route changes cost and timing. Whatever the source, we agree file formats, polygon and texture budgets, and who owns the final source files and licenses.

How long does it take to build a 3D website?

There is no fixed duration; it depends on asset production, the number of scenes and review rounds. We set the schedule in the proposal after scoping the first working slice, because that slice reveals what usually moves dates, such as heavy models or interactions that need rethinking for touch. Share any launch date at the start so the work can be phased around it.

Can you add a 3D scene to our existing website?

Often, yes. A single 3D section, such as a product viewer or an opening scene, can be added to an existing site if its stack lets the scene load after the page content. We review the current build first, then scope the scene, its fallback and its performance budget as a contained piece of work that can be accepted on its own.

From the blog

Free tools

  • Configurator demo

    Configure a fictional modular shelf in 3D and watch its size, parts list and sample price follow every choice. Export it as a .glb or view it in AR.

Related work & studies

Janus Observatory: published project interfaceImplemented research experience / Interactive graphicsJanus ObservatoryExplore the entrance, atlas and observatory of this project developed with Blue Marble Space, then read the implementation evidence and research limits. This demonstrates interactive delivery; it does not claim a client conversion result.Inspect the project

From concept to an interactive brief

Start with what the visitor must explore, not a visual effect. Inspect Janus Observatory, define the assets and fallback, then ask Dardo for a proposal against a representative scene.