Skip to content

Three.js · WebGL

Web 3D development that serves a purpose

3D earns its place when the user needs to manipulate what they see: rotate a product, walk through a space, understand a part. If it is just decoration, we will say so and save us both the project.

When 3D earns its place

All four cases share one thing: remove the 3D and the user loses information. That is the acid test.

🛋️

Product configurators

A sofa in fourteen fabrics, trainers with six soles, a fitted kitchen. 3D replaces a catalogue of hundreds of photos nobody can maintain, and cuts returns because the customer has seen exactly what they are buying.

🏢

Spaces and real estate

Walking through a flat that does not exist yet, or understanding the layout of a warehouse. A 2D floor plan does not convey volume, and the photos of the development do not exist yet either.

⚙️

Technical and industrial parts

Machinery, components and exploded views. Rotating the part and seeing where each piece fits is information, not decoration. It replaces an instruction PDF nobody opens.

🗺️

Data with a spatial shape

Facility maps, networks, building floors with sensors. If the data has coordinates, 3D is the natural way to show it.

What we do not do

A shape spinning in the header. Particles following the mouse. The 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, which are exactly the ones that decide whether anyone stays. And it is paid on every visit, on every phone, forever.

How we build it

The hard part of 3D on the web is not the 3D: it is keeping it from wrecking performance.

Optimised models, not just exported

A model coming out of CAD or Blender weighs tens of megabytes and is useless on the web. Geometry is reduced, textures are baked and it is compressed with Draco or Meshopt. The difference between 40 MB and 2 MB is work, not magic.

3D loads after, not before

The page is visible and usable without waiting for the model. The viewer loads separately and only when needed, so the first impression is not a blank screen with a percentage on it.

A fallback on phones and older machines

Not every device handles WebGL smoothly. There is always a way out: images, video or a frame sequence. Nobody is left unable to see the product.

The performance cost is measured

Before and after, with real Core Web Vitals. If 3D sinks the page speed, that is something to know and decide on, not to discover three months later when traffic drops.

Frequently asked questions about 3D on the web

What is Three.js?

A JavaScript library built on WebGL, the technology that lets the browser talk directly to the graphics card. It is open source, mature and works in any modern browser with no plugins or installs. Practically everything you see described as an "interactive 3D website" is built with Three.js or something on top of it.

Does the user need to install anything?

No. Everything happens in the browser, just like a normal page. No plugins, no apps, no downloads. It works on mobile and desktop.

Will it make the site slow?

It depends how it is done. A model exported as-is can weigh 40 MB and sink the page; the same model optimised drops to a couple of megabytes and loads after the site is already usable. We measure the impact before and after, and if it does not pay off, we say so.

How much does a 3D website cost?

More than a normal site, and almost all of the difference is in modelling and optimisation, not programming. That is why the first thing we check is whether you already have 3D models of your products: if they come from the factory or from engineering, the price changes a lot. Write to us and we will estimate it.

What if I just want it to look impressive?

Then you probably do not need it, and we will tell you. A shape spinning in the header is paid for in the first seconds of loading, which are the ones that decide whether anyone stays. The test is simple: if removing the 3D costs the user no information, it was not necessary.

Looking for something more specific? Also see:

Ready for the website you deserve?

Tell us about your project. Free first consultation, no commitment.