3D Mirror Configurator — Dimensions, Lighting & Accessories

We developed a mirror configurator where people can choose a model, adjust its size and see it inside a furnished 3D room. Measurement guides show the selected dimensions in the scene, with a calculated price beside the controls.

Round and rectangular mirrors have their own options. Depending on the model, you can add LED lighting, sensors, clocks or sockets. The controls group these choices into sections so the product stays visible while you make changes.

We connected the room scene, configuration panel and pricing to the same state. Changes to the model or dimensions feed the pricing lookup, while product parameters in the URL load the right starting model and settings. On smaller screens, the controls collapse into menus to leave more space for the mirror.

The frontend uses React and Material UI, with React Three Fiber, Three.js and Drei for the scene. Redux Toolkit keeps track of the mirror settings and price components.

Built with React, JavaScript, Three.js, React Three Fiber, Drei, Redux Toolkit, React Redux, Material UI, Tailwind CSS, GSAP and XLSX, using JSON product and pricing data.

Try the live mirror configurator — adjust dimensions and explore lighting, sensors, clocks and other accessories in the 3D room.