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:
13
README.md
13
README.md
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user