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)
This commit is contained in:
root
2026-07-04 17:09:47 +02:00
parent 3e1f10a01a
commit ad2898200b
8 changed files with 1424 additions and 24 deletions

View File

@@ -37,6 +37,19 @@ A → подающий конвейер → накопитель → CV/laser/ul
Проверка WebGL: Engineering Details → **3D capability check** (FPS, WebGL status).
### Автоматическая демонстрация
**Главная возможность** — Auto Demo:
- Нажмите "🎬 Запустить автодемо" для полного автоматического цикла
- Товар автоматически: появляется → сканируется → классифицируется → маршрутизируется в B/C/D
- Controls: Пауза/Продолжить, Остановить, Reset
- Режимы: Автоматический (по умолчанию) или ручной (Next step)
**Реальные 3D модели** (6 STL, 55%):
- Бутылка, Тарелка, Цилиндр, Короб 300, Короб 400, ЛанчБокс
- Fallback primitives для heavy models (> 1 MB)
- Manifest: `src/data/modelAssets.ts`
## Стек
- Vite, React, TypeScript