fix: stabilize 3D auto demo and clean scene labels
ROOT CAUSE:
- requestAnimationFrame loop calling setState 60fps caused Canvas unmount/remount every frame
- Circular dependency in useEffect deps (simulation.currentItem) caused infinite re-render loop
- No ErrorBoundary meant Canvas errors showed black screen
- "Накопитель" label cluttered clean view
FIXES:
1. Throttled RAF Loop (App.tsx):
- Update UI only every 100ms instead of every 16ms (60fps)
- Removed circular dependency from useEffect deps
- Added refs for proper RAF cleanup
- Canvas no longer remounts every frame
2. ErrorBoundary (ThreeErrorBoundary.tsx):
- Created error boundary for Canvas
- Shows fallback UI instead of black screen
- "Reload 3D" and "Use 2D Fallback" buttons
- Auto-triggers 2D fallback on error
3. Clean Labels (SceneLabels3D.tsx):
- Moved "Накопитель" label to technical mode only
- Cleaner default 3D view
- Less clutter, easier to see simulation
RESULT:
- NO MORE BLACK SCREEN ✅
- Stable auto demo ✅
- Clean 3D scene ✅
- Proper error handling ✅
STATUS:
- Build: ✅ TypeScript successful (4.14s)
- Tests: ✅ 43/43 passed (1.19s)
- Docker: ✅ Rebuilt successfully (8.08s)
- Domains: ✅ All 200 OK
- Visual QA: ✅ Verified via browser MCP (no black screen!)
CHANGES:
- Modified: App.tsx (+114), ProductDemoSection.tsx (+29), SceneLabels3D.tsx (+4), styles.css, README.md
- Created: ThreeErrorBoundary.tsx (new error boundary component)
- Total: +215 insertions, -24 deletions (5 files modified, 1 file created)
ad2898200b