Three.js Website: How It's Built, What It Costs, How Long

A Three.js website is a normal website (HTML, CSS, a framework like Next.js) with a WebGL canvas on top that draws 3D in real time on the visitor's graphics chip. It's built by a small team in four layers: design, 3D assets, creative code and a regular front end. Published studio timelines run 8–14 weeks for a site with one 3D moment and 14–20 weeks for 3D throughout, and budgets run from $8k+ for a freelance WebGL flagship to $50K–100K for a studio site with 3D on every page.

This guide is for the person commissioning one. No code knowledge needed, though we show a little so you know what you're paying for.

The Three.js website stack in plain English

One budget note: GSAP used to have paid plugins. After Webflow's acquisition, GSAP and its previously paid Club plugins became free, including for commercial use. That's one license line you no longer need.

What a React Three Fiber website looks like in code

If you've heard "react three fiber website" and wondered what that means, this is a complete hero scene that loads a product model:

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF, Environment } from '@react-three/drei'

function Bottle() {
  const { scene } = useGLTF('/models/bottle.glb')
  return <primitive object={scene} />
}

export default function Hero() {
  return (
    <Canvas dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 35 }}>
      <Suspense fallback={null}>
        <Bottle />
        <Environment preset="studio" />
      </Suspense>
    </Canvas>
  )
}

Twenty lines gets a model on screen. The weeks go into brand-matched lighting, deliberate motion and mid-range phones.

How a Three.js website is built: six phases

1. Concept and motion storyboard. What the visitor sees and touches at each scroll point, drawn in frames before any code.
2. Asset pipeline. Models built or cleaned up in Blender, textured, exported as GLB and compressed. CAD-only? This phase grows.
3. Prototype on a real phone. One rough scene on a mid-range Android. Bad ideas die cheaply here.
4. Build. Scenes, scroll choreography, the HTML site around them, CMS hookup.
5. Performance and fallbacks. Compression, device tiers, poster images, reduced-motion mode. Details in our 3D website performance guide.
6. QA and launch. Browser matrix, accessibility checks, analytics, Search Console.

Loading: why the 3D arrives last

The single most important engineering decision on a Three.js website design is load order. Utsubo reports the Three.js core at about 600 KB minified, and over 3 MB once drei, post-processing and a GLB are added. You don't want that blocking your headline.

So the page ships HTML and a poster first, then fetches the 3D code. Slow connections still get a complete page.

Who builds it: the team

• Designer / art director: look, typography, motion language.
• 3D artist: modeling, UVs, textures, lighting, export.
• Creative developer: Three.js/R3F, shaders, scroll choreography, performance. The hardest role to hire.
• Front-end developer: the HTML site, CMS, forms, SEO basics.
• QA: devices, browsers, accessibility.

Small studios combine roles; a solo freelancer covers all of them, which is why timelines and prices vary so much. Our 3D website cost guide has the published ranges.

Three.js vs Webflow, Framer or Spline

Webflow and Framer can host 3D through embeds or code blocks, which is fine for one decorative scene. Once the 3D drives the story, you want full control of the code and load order. We compare the trade-offs in Webflow vs Framer vs custom code.

For inspiration before you brief anyone, our roundup of WebGL website examples sorts real projects by what the 3D is for.

Maintenance: what happens after launch

• Pin library versions. Three.js releases often and sometimes changes APIs. Upgrade on purpose.
• Asset updates. A new product or colorway goes through the same model pipeline.
• Device checks. Browsers and GPUs shift; test on real phones every quarter.
• Keep the fallback alive. The poster-and-HTML version is what Google and low-end phones see.