feat: Interactive 3D Forge Visualization (WebGL) (Bounty #865)

[508704820]

Creates an interactive 3D forge visualization using React Three Fiber (WebGL), featuring an anvil, hammer, molten metal, rotating gears, fire particles, and ambient sparkles in a dark forge environment.

3D Elements

Anvil — Metallic box geometry with high metalness and low roughness

Hammer — Animated hammer with periodic strike motion

• Handle: Brown wooden cylinder
• Head: Dark metallic box
• Strike animation: Sinusoidal rotation every 4 seconds
• Smooth return to rest position via lerp

Molten Metal — Glowing sphere on the anvil

• Orange emissive material (emissiveIntensity: 2)
• Gentle breathing deformation (scale oscillation)

4 Rotating Gears — Procedurally generated gear shapes

• ExtrudeGeometry from THREE.Shape with variable teeth
• Center holes cut via Path.holes
• Orange metallic material (semi-transparent)
• Independent rotation speeds (some reverse)
• Positioned as background machinery

Forge Fire — 50 instanced particle spheres

• Upward motion with phase cycling (0-3 seconds)
• Scale decreases as particles rise
• Sine/cosine horizontal drift
• Orange basic material with transparency

Ambient Sparkles — Drei Sparkles component

• 30 golden sparkles around the forge area
• Slow drift animation

Floating Ring — Torus with Float animation

• Hovering above the forge
• Gentle rotation and float

Lighting

• Forge point light: Orange, intensity 5, castShadow
• Ambient: Dark blue-purple, intensity 0.15
• Rim directional: Amber, castShadow
• Background glow: Red-orange point light
• ACES Filmic tone mapping

Interaction

• OrbitControls: Rotate, zoom (3-8 distance), no pan
• Auto-rotate: 0.5 speed
• Max polar angle: 90° (prevent below-floor view)

Dependencies

• @react-three/fiber
• @react-three/drei
• three

Acceptance Criteria

• Interactive 3D visualization (OrbitControls + auto-rotate + zoom)
• Forge/factory themed elements (anvil, hammer, molten metal, gears, fire)
• WebGL rendering (React Three Fiber + ACES tone mapping + shadows)

Closes #865

Wallet: Lt9nERv6VHsojw15LpFeiaabuphAggzfLF9sM9UXRrZ