3D on the web with Three.js and WebGL: what is possible and what it costs
Product configurators, 3D viewers, interactive hero scenes, medical and industrial visualisation — all run in the browser today without plugins. A guide to what Three.js and WebGL development includes and how to keep it fast on a phone.
WebGL is the browser’s way of drawing with the graphics card; Three.js is the library that makes it practical. Together they put real 3D on ordinary web pages: a product you can rotate and configure, a dental scan or a CT volume a clinician can inspect in a browser, an industrial part with its dimensions, a scroll-driven scene that makes a brand page feel built rather than templated. No plugins, no app to install — a URL.
What 3D web development includes
- Asset pipeline — converting CAD, STL, OBJ or scans into optimised glTF models with sensible polygon counts, compressed textures and levels of detail.
- Viewers and configurators — camera controls, materials and colour options, part swapping, measurements, annotations, and the UI around them.
- Scientific and medical visualisation — meshes and volumes together, slicing, layers, opacity, measurement tools.
- Brand and motion — scroll-driven scenes, shaders and lighting that run at 60 fps on a mid-range phone.
- Integration — the configurator writes to the cart or the quote request; the viewer loads from your product data; the scene is part of a Next.js or React application, not an island.
- Performance engineering — frame budgets, lazy loading, fallbacks for devices without the GPU to spare, and measurement on real hardware.
When it pays off
When the product is physical and configurable; when a customer needs to understand shape, size or fit before buying; when specialists collaborate on spatial data; when a brand wants a site that is visibly not a template. It does not pay off as decoration dropped on a slow page — the first rule of 3D on the web is that it must not cost the page its speed.
How we work
A prototype first, with your real model, measured on the slowest device you care about. Then the full feature set, the integration with your data and the UI, and a performance pass before launch.
What to prepare
- Source models or scans, and their formats.
- What the user must be able to do: rotate, configure, measure, compare, buy.
- The devices and browsers that matter for your audience.
- Where the 3D lives: a product page, a standalone tool, a hero section.
See the Three.js and WebGL development page.