The Short Answer
A 3D website is built in six stages: a brief that sets the scene budget, a storyboard of what moves when, 3D modelling in a tool such as Blender, optimisation of the models for the web, the build in Three.js with the rest of the site, and testing on real phones. A site with one 3D scene usually takes 6 to 10 weeks; a scroll-driven 3D story takes 10 to 16.
1. The Brief and the Scene Budget
The first decision is how much 3D the site needs, and the honest answer is usually less than the first idea. A scene budget says how many 3D moments there are, what each one must explain, and how heavy each may be on a phone.
This is where a studio should push back. If the 3D does not help a visitor understand or buy, it is decoration, and decoration is expensive in 3D. Our guide to when a business needs a 3D website helps with that call.
2. Storyboard and Scroll Script
Before anything is modelled, the team writes down what the visitor sees at each point of the page: where the model sits, what it does as they scroll, and what the copy says beside it. Rough frames or a quick prototype in Spline are enough.
This step saves the most money. Changing a storyboard costs an afternoon; changing a finished animated scene costs a week.
3. Modelling
The product or scene is modelled in Blender, or converted from the client's CAD files. Web models are built differently from models for still renders: fewer polygons, textures sized for phones, and materials that look right under real-time lighting.
CAD files save a lot of time but are never web-ready as they arrive. We explain why in CAD to 3D model for the web.
4. Optimisation
Every model is exported as glTF or GLB, compressed with Draco or Meshopt for geometry and KTX2 for textures, and lighting is often baked into the textures so the browser does less work. A product that weighed 80 MB in the modelling file commonly ends up at 1 to 5 MB.
This stage decides whether the site works on a mid-range Android phone. Our GLB optimisation guide goes into the detail.
5. The Build
The site itself is usually Next.js or another modern framework, with the 3D scene in Three.js, often through React Three Fiber. GSAP and its ScrollTrigger plugin tie the scene to scroll, and a CMS such as Sanity holds the copy so the client can edit it.
| Layer | Common choice | Why |
|---|---|---|
| Modelling | Blender | Free, standard, exports clean glTF |
| 3D runtime | Three.js / React Three Fiber | Mature, fast, huge ecosystem |
| Scroll animation | GSAP ScrollTrigger | Precise, reliable scroll timing |
| Site framework | Next.js | Fast pages, good SEO, easy hosting |
| Content | Sanity or another headless CMS | Copy edits without a developer |
| Compression | glTF-Transform, Draco, KTX2 | Small files that load on phones |
6. Testing on Real Devices
3D that runs smoothly on a developer's laptop can stutter on a three-year-old phone. Good studios test on real mid-range Android phones and older iPhones, check the page with reduced motion turned on, and make sure the page still works if WebGL fails to start.
The page should also pass Core Web Vitals with the 3D in place. That is possible, and we explain how in do 3D websites hurt SEO and speed.
A Realistic Timeline
| Project | Typical timeline |
|---|---|
| Site with one 3D hero or product viewer | 6 to 10 weeks |
| Scroll-driven 3D story, three to five scenes | 10 to 16 weeks |
| Product configurator | 12 to 20 weeks |
| Immersive experience | 16 weeks and up |
Working With Kalex
Kalex models in Blender and builds in Three.js and Next.js, so the 3D and the website come from one team. See our 3D website service, read what 3D websites cost, or tell us about your project.