ZYON Website
An interactive landing page for a (fictional) Swiss streetwear brand - one 3D shelf scene in the browser where each cap colorway sits as a stack, and a click opens a 3D detail viewer with a turntable, price and specs.
- Type
- Personal Project · Creative / 3D
- Year
- 2026
- Role
- Sole developer - including 3D asset preparation and design.
Cut the source 3D model from 155 MB to 2.1 MB without losing the look, and made the whole scene keyboard- and touch-accessible with an invisible button layer - no raycasting.
- 155 MB → 2.1 MB asset pipeline
- Accessible: mouse, touch & keyboard
- Single 3D shelf scene, no framework
The problem
A high-end 3D product page is only usable on the web if the assets are tiny and the scene is accessible - a 155 MB model and mouse-only interaction fail both.
A single 3D shelf scene where each cap colorway is a stack, opening into a 3D detail viewer with a turntable, price and specs - fast and accessible.
What I did
- Reduced the 155 MB source model to 2.1 MB with gltf-transform: 1K WebP textures, deduplication and pruning, without visible quality loss.
- Built the scene in vanilla JS with Three.js and orchestrated motion with GSAP - no framework.
- Layered invisible <button> elements over the projected 3D positions so the scene works with mouse, touch and keyboard, without raycasting.
Outcome
A performant, accessible 3D prototype that loads a rich shelf scene from a 2.1 MB model.
Stack
- Vite 6
- Vanilla JS
- Three.js
- GSAP
- glTF / gltf-transform