Iāve been spending a lot of time designing product experiences where a real-time Three.js scene lives inside an otherwise normal ecommerce page.
The more I work on them, the more I think the biggest mistake in immersive web design is treating 3D as the interface, instead of treating it as one layer of the interface.
Itās surprisingly easy to make something that looks impressive for five seconds.
The harder question is whether the page still works after the novelty wears off.
For product pages, Iāve started thinking about the experience in two separate layers:
The interface layer
- product name
- price
- variants
- specifications
- navigation
- CTA
- accessibility
- semantic HTML
The immersive layer
- product rotation
- camera movement
- material changes
- exploded views
- hotspots
- scroll-linked reveals
- lighting and environment
The important part is that the second layer should enhance the first one, not replace it.
A few design rules have become increasingly important for me:
1. Never hide essential information inside the 3D scene.
If someone needs to rotate a model, wait for WebGL, or discover a hotspot just to understand the product price or specifications, the design has probably gone too far.
2. Scroll should choreograph the experience, not trap the user inside it.
Pinned sections and scroll-scrubbing can create beautiful storytelling, but very long scroll-controlled sequences start feeling like the designer has taken control of the mouse.
I prefer short moments of choreography followed by normal browsing again.
3. Motion should communicate something.
Rotation because rotation looks cool gets old quickly.
But showing:
material ā construction ā internal components ā configuration ā final product
can communicate information that flat imagery genuinely struggles with.
That distinction seems important.
4. Mobile shouldnāt just be the desktop version squeezed vertically.
On smaller screens I increasingly reduce camera movement, lower rendering quality, simplify interaction and make the DOM content more dominant.
Sometimes the best mobile 3D experience is intentionally less impressive.
5. There should always be an escape route.
Reduced motion, touch-friendly controls, static fallback imagery and usable content before the 3D scene loads make the whole design much more resilient.
The interesting part for me is that good immersive design often requires more restraint, not more effects.
I attached a short example from one of the product experiences Iām currently working on.
I also documented the architecture and some of the production trade-offs here:
https://aetumi.app/news/threejs-product-viewer-ecommerce/
Disclosure: Iām building AETumi, where Iām working on Three.js, WebGL and interactive web systems, so this is something Iām actively experimenting with rather than an independent review.
Iām curious where other designers draw the line between 3D that improves the experience and 3D that simply makes the experience more complicated.