Implementing a 3D Equipment Configurator Using @react-three/fiber & Three.js

Overview
To enhance customer experience and product visualization, we built an interactive 3D equipment configurator for RCR Mining Technologies.
The goal was simple:
Let users rotate, explore, and customize mining equipment directly on the website.
This project improved engagement and set a new benchmark for digital product experiences in the mining industry.

Challenges We Faced

Building a high-performance web-based 3D configurator came with several hurdles:

Technical Compatibility Issues

  • Conflicts between different Node.js versions
  • Integrating smoothly with Microsoft Dynamics 365 (msdyn365)
  • Ensuring the 3D engine worked consistently across all browsers and devices

Performance & Optimization

  • Large 3D models were slowing down loading time
  • Need to maintain high visual quality while achieving smooth rendering
  • Complex state management for interactions like rotate, zoom, highlight, etc.

Cross-Platform Consistency

  • Behavior differences on Windows vs. macOS
  • UI responsiveness on mobile, tablet, and desktop

Our Solution

To overcome these challenges, we implemented a modern, optimized architecture:

1. Switched to Three.js + @react-three/fiber

This gave us:

  • Cleaner React-based 3D code
  • Better control over rendering
  • Faster loading and improved performance

2. Added Interactive Hotspots

Users can click on parts of the machine to:

  • View details
  • Explore components
  • Understand key functionalities

3. Improved Model Performance

We used Blender, model decimation, and texture compression tools to:

  • Reduce model size
  • Improve loading times
  • Maintain visual clarity

4. Fully Responsive Design

The configurator was designed to provide a seamless experience on:

  • Mobile
  • Tablets
  • Desktop screens

Results

The new 3D configurator delivered impressive outcomes:

  •  Smooth integration with Microsoft Dynamics 365
  •  Highly interactive and engaging user experience
  •  40% increase in time spent on the configurator
  •  Positive feedback from users on clarity and navigation

Impact on RCR Mining Technologies

The project significantly boosted RCR’s digital presence:

  • Enhanced customer trust and understanding of products
  • Positioned RCR as an innovation leader in mining equipment visualization
  • Strengthened brand visibility in a competitive market

Provided a modern, tech-driven customer experience.

Scroll to Top