Vestlyd V12C product configurator
A 3D product configurator with the Vestlyd V12C as an example. You can switch between feet and a stand and choose the colour of the stand.
- Role
- 3D and web development
- Tools
Three.js
Claude Code
Blender
- Technology
- WebGL
- Format
- Interactive, runs live in the browser
About the demo
The demo is a 3D product configurator that I made on my own initiative, with the Vestlyd V12C speaker as an example. Vestlyd did not commission it. You can see the speaker on feet or on a stand and choose the colour of the stand: black, steel or gold. The change shows straight away in 3D.
My role
Here I made both the 3D model and the design of the configurator. I modelled the speaker with feet and stand in Blender and animated how it is lifted up onto the stand. The animation sits on its own layer, an NLA track, so it is easy to find and play in the code. I decided what you can choose, that the feet fade out while the stand fades in, and that zoom is turned off so the page scrolls as normal. The Three.js viewer was made with Claude Code from my design, and I refined the lighting, materials and transitions until the product looked right.
Technology
The demo runs in the browser with Three.js and WebGL. The model is in one compressed 3D file, and the demo loads about 1.5 MB. When you choose the stand, the animation plays while the feet fade out and the stand fades in. Steel and gold are set up to be more metallic and glossy than black. With a mouse, you drag to rotate the speaker up to 60 degrees to each side. Zoom is turned off, so the mouse wheel scrolls the page as normal. On the case page, a horizontal swipe with a finger rotates the speaker, and a vertical swipe scrolls the page. The texts are available in Danish and English.
Sources
- Vestlyd V12C (the speaker the demo uses as an example)
- Three.js (3D in the browser)