📐 Design — Cidade 3D Fase 2

Arquitetura, componentes, fluxo de dados e testes — revise seção por seção

1. Arquitetura

A cena Three.js passa de órbita isométrica para exploração a pé. O backend continua o mesmo (Sanctum + /city/data), mas o payload ganha: ruas, prédios gerados, e um streaming de mensagens de chat via SSE (Server-Sent Events) por agente — sem dependência nova.

Frontend (Three.js)
├── CameraController  — WASD + mouse, colisão AABB
├── CityGenerator     — ruas, quadras, prédios de preenchimento
├── CharacterFactory  — carrega modelos GLTF por tipo de agente
├── HudOverlay        — painel POSIÇÃO + minimapa
└── ChatPanel         — fluxo SSE /city/chat/{agent}

Backend (Laravel)
├── CityViewerController::data()  — stores + agents + city layout
├── ChatController                — SSE endpoint por agente
└── AgentThinkJob (queue)         — chama OpenRouter, persiste last_decision
2. Componentes
CameraControllerPointer-lock, WASD, gravidade simples, raycast contra colisores AABB de prédios
CityGeneratorRua central + quadras laterais a partir das posições das lojas; prédios de preenchimento procedural (seed determinística)
StreetMeshAsfalto (canvas texture com faixas), calçada de ladrilho, postes a cada N metros
CharacterFactoryGLTF por agent.type; fallback: cápsula texturizada. Animação Idle/Walk/Run
HudOverlayPainel POSIÇÃO (x,y,z, triângulos) + minimapa 2D no canto
ChatPanelAbre ao clicar no NPC; mostra nome, status (pensando/respondendo), mensagens; envia via POST e recebe via SSE
3. Fluxo de dados
  1. Viewport carrega → GET /city/data → lojas + agentes + layout de ruas
  2. CityGenerator monta ruas e prédios; prédios de loja ganham fachada custom
  3. Usuário anda (WASD) → colisão por AABB → câmera segue
  4. Clica em NPC → ChatPanel abre → GET /city/chat/{agent}/stream (SSE)
  5. Envia mensagem → POST /city/chat/{agent} → job enfileirado → OpenRouter → persiste last_decision → SSE emite resposta
  6. HUD recalcula posição a cada frame
4. Tratamento de erros
5. Testes

Esse design está correto? Aprovo para escrever a especificação formal.

✅

Aprovar design

Escrever spec → revisão → plano de implementação

✏️

Revisar

Quero mudar algo antes de seguir