* Light mount 3D product configurator on Bock Lighting's React e-commerce website.
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 had a lighting configurator built with vanilla Three.js which they were looking to upgrade into React and React Three Fiber for increased performance. They also wanted new features such as animated transitions and WebAR.
The original vanilla Three.js code was refactored from sequential processing with JavaScript to a more dynamic, component-based architecture in React and React Three Fiber. Animated transitions were added for multiple parts to assemble into place and for material colour to transition smoothly during surface changes. More realistic surface materials and lighting were integrated for the WebGL models to better resemble previously pre-rendered product images. Web-based augmented reality functionality using the WebXR API was implemented so users can augment their customised products into their environment with an Android or iOS mobile device. The upgraded 3D app has remained in active use for Bock Lighting's customers for over three years since the upgrade.
Tech stack: React, React Three Fiber, Three.js, WebXR.