Interactive 3D Product Page
Product pages that go beyond static images — rotatable 3D detail views, hero scenes and scroll-driven product stories.
Full demo
ZONSEN
C2M Customization
Built for ZONSEN's C2M customisation programme
Project overview
A browser-based interactive 3D showcase for a motorcycle, built as the C2M Customization project. Visitors orbit the bike in 360°, switch the headlight and the display background, enter an exploded view where 15 part hotspots identify real components — aluminium lamp bracket, aluminium triple clamp, handlebar with retro grips, retro brown seat, wheels — read eight specification parameters, and customise the bike themselves: four body colours and three wheel styles, with the price updating live.
What an interactive 3D product page is
Web pages that feel like a showroom. Your website is your global storefront. We build custom 3D interactive pages — hero scenes, virtual showrooms, scroll-driven product stories — that make visitors stop and explore, on a foundation that stays crawlable and quick to load.
How buyers use it
- 01
Visitors rotate, zoom and inspect the product instead of scrolling past a flat image.
- 02
The product is shown the way it actually looks — form, scale and detail.
- 03
Product questions that used to need an email are answered on the page.
- 04
The interactive layer loads only where it is needed, on top of a crawlable page.
What we built — in this project
- Full-window 3D stage — a real mouse drag orbits the motorcycle model, and the view keeps a slow continuous camera motion
- Explore (exploded) view — the bike separates into a layered exploded assembly and 15 part hotspots appear on the model
- Tap a hotspot to open that part’s information panel — verified copy for the aluminium lamp bracket, aluminium triple clamp, handlebar with retro grips, retro brown seat and wheels
- Specification page with eight motorcycle parameters (401 cc, 33 kW @ 9500 rpm, 34.8 N·m @ 8000 rpm, electric start, slipper clutch, 6-speed gearbox, 1380 mm wheelbase, 2090×860×1080 mm)
- Headlight toggle — the front lighting switches on and off on the 3D model
- Gallery mode with an embedded image gallery, plus a fullscreen display mode that hides the side menu (specs / gallery / customisation / explore) and switches to a full-window presentation
- Nine switchable display backgrounds driven from the bottom toolbar
- C2M customisation — four body colours (¥0 / ¥588 / ¥388 / ¥388) and three wheel styles (¥0 / ¥899 / ¥599) update the 3D model and the price in real time (¥36800 → ¥37388 / ¥37188)
How the experience works
- 01
Concept & storyboard
We define the page narrative, scene design and interaction map.
- 02
Scene production
3D assets, lighting and environment built for web performance.
- 03
Development & optimization
Build with performance budgets; test across devices and networks.
- 04
Launch & measure
Ship, then optimize based on real visitor behavior.
What we can build for you
Scroll-driven storytelling
The page reacts to scrolling — model rotates, camera moves, features highlight — turning a visit into a guided tour.
Virtual showroom
Recreate physical showrooms or exhibitions online with walkthrough paths and hotspot content.
Product hero scenes
A single stunning 3D scene on your homepage that communicates your product’s essence in seconds.
Performance by design
Progressive loading, LOD and islands architecture keep the 3D layer off the critical path — the page itself stays lightweight.
Bilingual & global-ready
EN/ZH (or more) routes with proper hreflang and crawlable content for every market.
Headless & integrable
Works as a standalone site or embeds into your CMS, storefront or campaign microsite.
Typical situations
- Brand campaigns & exhibitions
- E-commerce product pages
- Industrial equipment & machinery
- Real estate & architecture
- Consumer electronics
Technical notes
Astro Static · Three.js / WebGL · Tailwind CSS · TypeScript / ESM · CDN-ready
Project fit & delivery
- Who this is for
- For product brands and manufacturers that want customers to understand a product through interactive 3D views, visual details, configuration options, and product storytelling within the web page.
- Typical project inputs
- Typical project inputs include product specifications, key selling points, product imagery, 3D assets when available, interaction requirements, content, and brand guidelines.
- Integration
- INTR can build an interactive product page within an existing website or as a dedicated web experience. For Shopify projects, the experience can be integrated into the storefront or product-page flow, depending on the existing theme and technical setup.
- Limitations
- The final experience depends on the product content, available 3D assets, page architecture, and required interaction complexity. High-detail scenes, large asset sets, or complex interaction flows may require additional optimization or custom development.
More ways we can help
Have a product in mind?
Tell us what needs to be explained, configured or experienced.
Reply within 1 business day · GMT+8