What Three.js is, which projects justify the cost of 3D and which ones just get an expensive animation that wrecks performance. Including the cheaper alternatives nobody suggests.
Every so often the same request arrives: "I want something in 3D on the homepage, like Apple's." It is a reasonable request — 3D done well is impressive — but it almost always starts backwards: the technology gets chosen first and the purpose is looked for afterwards.
It is worth doing it the other way round. This article is about when 3D on a website pays for itself and when it is an expensive animation that slows everything else down.
What Three.js actually is
Three.js is a JavaScript library built on top of WebGL, the technology that lets the browser talk directly to the graphics card. Without it, programming 3D on the web means writing shaders and managing buffers by hand; with it, you work with manageable concepts: a scene, a camera, lights and objects.
It is open source, mature and runs in any modern browser without plugins. Everything you see out there described as "interactive 3D web" is built with Three.js or with something built on top of it.
When 3D earns its place
The rule is simple: 3D is worth it when what you are showing is genuinely spatial and the user needs to manipulate it. Not when it looks nice.
All four have something in common: remove the 3D and the user loses information. That is the acid test.
When it is just dead weight
The opposite pattern is just as easy to spot: a shape spinning in the header, particles following the cursor, a logo with volume. It looks great in the design presentation and adds nothing for the visitor.
The problem is not aesthetic, it is cost. That decoration is paid for in the first seconds of loading — exactly the seconds that decide whether someone stays. And it is paid on every visit, on every phone, forever.
If removing the 3D leaves nobody missing anything except the design team, it was not necessary.
What it really costs
Download weight. Three.js is not a small library. Importing only what you need trims it considerably, but a basic scene with model loading and controls is still among the heaviest things on the page. And that is before counting the 3D model itself, which has its own size.
GPU work. 3D is not drawn once and done: it is redrawn many times per second while it is on screen. On a laptop you do not notice. On a mid-range phone it means heat, battery drain and fan noise, and the browser may end up throttling performance.
Google's metrics. All of the above pushes the wrong way on Core Web Vitals: more JavaScript to download and execute, a busy main thread, and a header that takes longer to be ready. If the 3D sits high on the page, it directly affects what Google measures.
The problem almost nobody mentions
A Three.js scene is drawn inside a canvas element. And a canvas is opaque: Google sees nothing inside it, and neither does a screen reader.
This means that if your page's main message lives inside the 3D, then as far as a search engine is concerned that page is empty. And for a blind person, so is it.
The fix is not complicated, but it has to be deliberate: the real content — headlines, descriptions, prices, buttons — must exist as normal HTML alongside the canvas, not inside it. The 3D accompanies; it does not replace.
Cheaper alternatives almost nobody suggests
Before building a full scene, it is worth ruling these out:
One of these covers most requests that begin with "I want something in 3D".
If you decide to do it, do it properly
When 3D is justified, these decisions separate a fast website with 3D from a slow website:
How to decide in two questions
Before commissioning anything, answer these honestly:
Does the user lose information if I remove the 3D? If the answer is no, you do not need it: you need a good image or a video.
Am I willing to have the page load more slowly in exchange? If the 3D sits in the header and your business depends on people not leaving, the honest answer is usually no.
Two noes and you have just saved yourself a fair amount of money. Two yeses and you have a real use case worth doing properly.
In short
Three.js is an excellent tool for solving specific spatial problems: configuring, walking through, inspecting. As header decoration it is one of the most expensive ways there is to slow a website down.
The right question is never "can I add 3D?". It is "what does my customer understand better if I show it in 3D?". If you have an answer to the second one, go ahead.
Have a project in mind?
Tell us what you want to achieve.