How to build a 3D website: pick your route first
There are three ways to put 3D on a website and they cost very different amounts of time. One model a visitor can turn is an afternoon's work. A page whose story is told in a scroll-driven scene is a design project with code at its core. Most guides start with the tool; this one starts with the deadline, because that is what decides the route. Each route below gets the effort it really takes, where it breaks on a mid-range phone, and what you are still responsible for afterwards — including the step nearly every guide skips, which is getting the model in the first place.
The three routes, and what each really costs
Choose between a single-model embed, a visual design tool and a custom rendering library. A rotatable object is a smaller project than a scroll-driven scene; custom scenes also need ongoing engineering.
Route 1 — one model on a page: model-viewer, an afternoon
Use model-viewer for a single GLB visitors can rotate. Include a poster, descriptive alt text and touch-action="pan-y" so the page still scrolls on a phone.
Route 2 — a 3D design tool: Spline, and where it stops
Spline fits a visual design workflow. Check the export requirements and how the scene fits the surrounding website before committing to this route.
Route 3 — Three.js, when the scene is the product
Use Three.js when the scene needs custom logic and rendering control. You own loading, interaction, performance tuning and resource disposal.
The step every guide skips: where the model comes from
Models can be made in Blender, commissioned, licensed from marketplaces or generated with AI. Mint supplies the asset layer; it is not the website builder.
Spline vs Three.js, decided by job rather than preference
Choose by who will maintain the scene and how much custom control the job requires. Read the full Spline vs Three.js comparison for the tradeoffs.
Spline vs Three.jsChoosing by budget and deadline, not by ambition
Choose the smallest route that meets the deadline. Separate the asset budget from animation, performance work and the surrounding site.
3D website cost rangesChecklist before you ship
Check payload, mobile cold load, a WebGL fallback, reduced motion and readable HTML text before shipping.
FAQ
What format should a 3D model for the web be?
GLB is a convenient self-contained delivery format for glTF-compatible web viewers.
Can I add 3D without code?
A visual tool or an embed can reduce coding, but you still need an asset and a working website integration.