Three.js Product Configurator

What this builds

A complete product configurator where a user selects options (color, material, size, add-on components) through a UI panel and watches a 3D model update in real time. The configurator manages a state machine of valid option combinations, pre-loads all material variants, swaps them on the model with zero flicker, provides camera presets per feature, and persists the current configuration in the URL for sharing.

• GLB model with named meshes/groups that map to configurable parts.
• Variant state machine: tracks which combinations are valid, disables impossible selections.
• Material library: pre-built materials for all variants, warm-cached to prevent shader compilation stalls.
• Camera presets: clicking a feature zooms the camera to a preset angle for that part of the product.
• Annotation/hotspot system: 3D-positioned labels that track model surface points.
• URL-synced state: current configuration encoded in URL query params for direct links and sharing.
• Loading manager with progress bar and skeleton UI.
• Full disposal on unmount.