A driving simulator hardware brand needed customers to interactively assemble complex multi-component products in 3D — with real-time compatibility validation and AR export. We built the assembly engine as a client-side Three.js application.
The brand sells configurable simulator systems where customers combine multiple components — wheels, pedal sets, cockpits, monitors, mounts — into a complete setup. Customers needed to visualize their configuration in 3D before purchasing, verify that parts fit together, and preview the assembled product in augmented reality. No tool existed to handle the complexity of 20+ interchangeable components with compatibility constraints.
A client-side Three.js assembly engine that lets users interactively build complete simulator systems from multiple 3D component models.
The configurator uses anchor-point-based attachment logic — each component defines connection points, and the engine snaps parts together precisely. Real-time compatibility validation prevents invalid combinations, and configuration conflict detection warns users when selections contradict each other.
The assembled configuration exports to GLB for Android AR viewing and USDZ for iOS AR — so customers can place their configured product in their real space before buying.
- Interactive 3D product assembly from up to 20+ component models
- Anchor-point-based attachment logic for precise part alignment
- Real-time compatibility validation between components
- Configuration conflict detection with user warnings
- Export to GLB (Android AR) and USDZ (iOS AR)
- Client-side Three.js — no server rendering required
Customers can now build, visualize, and validate complex multi-component product configurations in their browser, then preview the result in augmented reality. The configurator handles the full complexity of a product line with dozens of interchangeable parts.