Three.js website development, and when 3D is worth it
A 3D scene can let a visitor turn a product around before they enquire. It can also add megabytes and drain a phone battery for a spinning logo. Which one you get is decided before any model loads.
Reviewed by: Rahul Jaiswar, founder
First, the question to settle
Would a short video or an image sequence tell the same story? If yes, use that. It plays on any phone and costs far less to make. 3D is worth it when the visitor needs to act on the object: rotate it, change its parts, or see it from an angle a photo can’t give.
The library
Three.js is a JavaScript library that draws 3D graphics in the browser using WebGL, and increasingly WebGPU. React Three Fiber lets developers write Three.js scenes as React components.
Where we use it
We have built interactive 3D with Three.js and React Three Fiber in website prototypes.
What we check
Before a scene ships we check its file size and how long it takes to load on mobile data, which is how most visitors will arrive.
Good reasons for 3D
- The object is the sale: furniture, machines, devices, packaging.
- Visitors configure colours or parts and should see the result straight away.
- The information is spatial, like a floor layout.
Reasons to hold back
- Key text would sit inside the canvas, where search engines and screen readers can’t read it.
- Most visitors arrive on older phones over mobile data, and a still image is the honest answer for them.
- Your team wants to edit scenes without a developer. A visual tool such as Spline may suit that, with less control over performance.
Questions to ask a Three.js team
- What does a visitor see if WebGL is unavailable or the GPU is weak?
- What frame rate does the scene hold on a mid-range Android phone?
- Does rendering pause when the scene scrolls out of view?
- Who can replace the 3D models after launch?
Pitfalls in 3D builds
- The black screen. A lit material in a scene with no lights renders black, and an output colour space or tone-mapping mismatch can leave a scene near-black or washed out. Check lighting and colour settings first, then plan context-loss handling and a still image fallback.
- Heavy first load. Load the scene after the page’s main content, with compressed geometry and textures.
- Rendering when nothing moves. A continuous render loop keeps the GPU busy on a static view. Render still scenes on demand.
- 3D inside scroll layouts. Pinned sections and 3D transforms can collapse spacing. Test layout while actually scrolling.
For movement without 3D, see the Motion page. 3D sections are built under our websites service.
Is there a product your visitors should see in 3D?
Tell us what they need to understand about it and whether 3D models already exist.