Immersive 3D Real Estate Tour

Write a React Three Fiber 360° panorama viewer with smooth room-to-room transition animations. Requirements: (1) Panorama sphere: SphereGeometry(500, 60, 40) with scale.x = -1 (inverted normals for inside view). MeshBasicMaterial with the equirectangular panorama as map. Camera at origin, FOV 75. (2) Navigation: mouse drag for look-around (update camera Euler yaw/pitch, clamp pitch to ±85°). Touch support: single finger drag. Device orientation (gyroscope): listen to DeviceOrientationEvent, apply alpha/beta/gamma to camera rotation with a smoothing lerp factor 0.1. Scroll wheel to zoom FOV between 40–90°. (3) Hotspots: render 3D hotspot markers (CircleGeometry, always face camera via billboarding) at specified world positions on the sphere surface. On click (raycaster), trigger room transition. (4) Room transition: crossfade shader — two sphere meshes (current and next panorama), a u_progress uniform 0→1. Fragment shader: mix(texture2D(u_current, uv), texture2D(u_next, uv), smoothstep(0.4, 0.6, u_progress + noise(uv * 3.0))). GSAP tween u_progress from 0 to 1 over 800ms with ease: "power2.inOut". On complete, swap current = next, reset. (5) Tour data: accept prop tour: { rooms: Array<{ id, panoramaUrl, hotspots: Array<{ position: [x,y,z], targetRoomId, label }> }>, startRoomId }. (6) Export as PanoramaViewer. Full TypeScript.

Write a React component that renders an SVG floor plan minimap for a 360° property tour, with a live indicator showing the viewer's current position and look direction. Requirements: (1) Props: floorPlan: { svgUrl: string, rooms: Array<{ id: string, svgRoomId: string, position: { x: number, y: number } (in floor plan pixel coords), worldPosition: [number, number, number] }> }, currentRoomId: string, cameraYaw: number (radians, updated each frame from the panorama viewer). (2) SVG rendering: load and embed the floor plan SVG. For each room, add a click handler that calls onRoomSelect(roomId). Highlight the current room with a fill color change. (3) Live direction indicator: an SVG arrow/cone shape centered on the current room's floor plan position. Rotate it to match cameraYaw (convert from 3D world yaw to floor plan 2D rotation — account for the coordinate system difference). Animate rotation smoothly with CSS transition: transform 0.1s. (4) Visited rooms: track visited room IDs in state, apply a "visited" CSS class to their SVG elements (slightly dimmed). (5) Minimap toggle: collapsed state shows only a small compass icon in the corner; expanded state shows the full floor plan. Animate expand/collapse with CSS transition. (6) Room labels: show room name tooltips on hover over SVG room regions. (7) Export as FloorPlanMinimap. Full TypeScript with React. Explain the world-yaw to SVG-rotation coordinate conversion.