Spatial Commerce & 3D Configurator

Write a React Three Fiber component that loads a GLTF model with KHR_materials_variants and provides a UI to switch between material variants in real time. Requirements: (1) Use useGLTF from @react-three/drei to load the model. After loading, read the KHR_materials_variants extension data from gltf.parser.json.extensions?.KHR_materials_variants — extract the variants array (each has a name). (2) Implement a switchVariant(variantIndex: number) function: iterate gltf.scene.traverse, for each Mesh check mesh.userData.gltfExtensions?.KHR_materials_variants?.mappings, find the mapping where mapping.variants includes variantIndex, then call gltf.parser.assignFinalMaterial(mesh, mapping.material) to apply the variant material. (3) Store the active variant index in a Zustand store (provide the store definition). (4) Render the model with ContactShadows and Environment preset="studio". (5) Outside the Canvas, render a variant selector UI: a row of color swatch buttons (one per variant), styled with Tailwind, that call switchVariant on click. Highlight the active variant. (6) Animate the material transition: on variant switch, briefly animate mesh.material.opacity from 0 to 1 over 300ms using useFrame. Full TypeScript. Explain the KHR_materials_variants data structure in comments.

Write a React Three Fiber WebXR AR mode implementation that lets users place a 3D product model on a real-world surface using hit-testing. Requirements: (1) Use R3F's XR components: <XR> wrapper, useXR() hook, and ARButton from @react-three/xr (or write a custom AR session button using navigator.xr.requestSession("immersive-ar", { requiredFeatures: ["hit-test"] })). (2) Hit-test setup: on session start, request a hit-test source against the "viewer" reference space. Each frame, get hit-test results and extract the pose matrix. (3) Placement reticle: render a flat RingGeometry at the hit-test position/orientation to show where the model will be placed. Animate it with a subtle pulse scale. (4) Placement: on screen tap (select event), place the product model at the current hit-test position. Allow repositioning by tapping again. (5) Scale control: pinch gesture (two-pointer distance delta) to scale the placed model between 0.1x and 2x. (6) Exit AR: button to end the XR session and return to the 3D preview. (7) Fallback: if WebXR is not supported, show a <model-viewer> web component with the same GLTF. Full TypeScript. Include the XR session feature detection check.