3D Product Configurator Optimization

Bock Lighting manufactures Decorative and RLM Lighting fixtures for a wide range of industries and applications. They have a React 3D lighting product configurator for clients to customise and order lighting fixtures directly from their website.

They has a lighting configurator built with vanilla three.js which they were looking to upgrade into React and React Three Fiber for increased performance. Also for new features such as animated transitions and WebAR.

The original vanilla three.js code was refactored from sequential processing with JavaScript to dynamic processing with react. Animated transitions were added for multiple parts to assemble into place and material colour to transition during surface changes. More realistic surface materials and lighting integrated for the WebGL models to resemble previously pre-rendered product images. Web augmented reality functionality with WebXR was installed for user’s to able to augment their customized products into their environment with an Android or iOS mobile device. The upgraded 3D app has still been in use for their customers after the upgrade was done 3 years ago.