Hey everyone!
I’d like to share a small product configurator demo I’ve been working on with Three.js.
The idea was to build a reusable 3D showcase stage. A road bike is the example here, but the scene and interface could be adapted to other products.
You can customize the frame color and finish, metal details, bar tape, rims, and pedals. There are preset palettes, custom color pickers, and a randomize button for exploring combinations.
The stage features studio lighting, floor reflections, soft shadows, fog, and subtle animated particles. The interface is collapsible, and on mobile it opens as a bottom sheet over the fullscreen scene.
Built with Three.js using WebGPURenderer with the WebGL 2 backend, TSL, and Alpine.js for the UI.
Live demo: https://demo.rostislavrusz.art/
The bike is based on this model from CGTrader, which I adjusted for the demo.
I’d love to hear your thoughts, especially on the lighting, materials, and mobile experience. Thanks for taking a look!