Can I vibe code Threekit?

Build a custom 3D product visualizer component using React, Three.js, and @react-three/fiber for a Shopify storefront PDP.

1. DATA MODEL:
- Support a ConfiguratorProduct schema: product_id, base_mesh_url (.glb), materials (array of id, name, diffuse_map_url, roughness_map_url, normal_map_url, price_delta), nodes (array of mesh target names inside the GLB model).
- Store user configuration state: selected_options mapping mesh node IDs to material IDs, total_price calculation.

2. 3D CANVAS IMPLEMENTATION:
- Render a Canvas with OrbitControls, soft shadows, directional lighting, and environment map (HDR preset).
- Load the glTF model using useGLTF. Implement suspense fallback loader showing a progress spinner.
- Traverse the model scene nodes; when an option is selected by the user, dynamically replace the material on the corresponding named mesh node with a new MeshStandardMaterial using pre-loaded PBR textures.
- Implement camera position transitions (smooth lerp) when switching focused component zones (e.g., zoom to sofa legs when selecting leg material).

3. AUGMENTED REALITY INTEGRATION:
- Include an 'View in AR' button that detects mobile browser OS.
- For iOS devices, open an iOS AR Quick Look anchor linking to a pre-converted USDZ asset.
- For Android devices, trigger Google Scene Viewer via intent link (`intent://arvr.google.com/scene-viewer/...`).

4. E-COMMERCE INTEGRATION:
- Expose an onChange callback returning selected option combinations, generated dynamic SKU string, and updated calculated price.
- Render UI controls outside the WebGL canvas: radio buttons and thumbnail swatches for materials.

5. FAILURE MODES & PERFORMANCE:
- Dispose of unmounted textures and geometries explicitly to prevent WebGL memory leaks.
- Catch WebGL context loss events and display a graceful fallback 2D image snapshot.
- Limit canvas resolution scale based on window.devicePixelRatio (cap at 2x) for mobile GPU stability.

Out of scope: Complex CAD ingestion, automated 3D file compression, server-side 4K ray-tracing, parametric mesh stretching.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs