Maquete 3D como interface de vendas, com a regra de reserva no banco
Gêmeo digital de empreendimento
Aplicação em que a maquete 3D do empreendimento é a interface de consulta e reserva de unidades, com três telas lendo o mesmo estado de disponibilidade e a regra de reserva aplicada em transação no banco.
- Papel
- Concepção, arquitetura, implementação e pipeline de ingestão
- Período
- 2026
- Situação
- POC publicada, empreendimento fictício

O que o sistema faz
- Maquete 3D navegável com 72 unidades coloridas por estado comercial, com filtro por preço, dormitório e pavimento.
- Reserva de unidade pelo corretor, com validade de 48 horas, e confirmação de venda reservada ao gerente.
- Modo TV para o plantão de vendas, espelhando a disponibilidade no mesmo instante em que ela muda.
- Planta humanizada em 3D, com o volume cortado no pavimento escolhido.
- Mapa do entorno com pontos de interesse reais e distância até cada um.
- Portal do empreendimento, com acompanhamento, time e exportação.
Arquitetura
- Cena em React Three Fiber com 72 unidades, ciclo de luz de fim de tarde e anoitecer, e material por estado comercial.
- Arquitetura procedural: as torres são geradas em código a partir dos dados do pacote e a geometria é mesclada por material, o que reduz cada torre a cerca de catorze chamadas de desenho em vez de milhares de caixas.
- Duas implementações do mesmo contrato de unidades, escolhidas por variável de ambiente: um store local em arquivo com EventEmitter, e Supabase sobre PostgreSQL com a regra em função plpgsql.
- Regra de negócio em SQL: reserva apenas de unidade disponível sob bloqueio de linha, venda confirmada só pelo gerente, liberação por quem reservou ou pelo gerente, validade de 48 horas e registro de toda transição em tabela de eventos.
- Tempo real por Server-Sent Events: a rota envia um snapshot e depois cada mudança, com pulso a cada quinze segundos, e o EventSource do navegador reconecta sozinho quando o stream encerra.
- No modo banco, uma única assinatura de mudanças do PostgreSQL por empreendimento e por instância, redistribuída por um EventEmitter para todos os clientes conectados.
- Sessão por cookie httpOnly com os tokens do Supabase Auth, papel resolvido por empreendimento numa função do banco, e dado de pessoa servido apenas a quem está autenticado.
- Corte de planta por plano de recorte: ao entrar no modo Plantas, o plano de cada torre desce da cobertura até 1,30 m acima do piso do pavimento escolhido, com interpolação amortecida e sombras recortadas junto.
- Desenho de planta derivado dos retângulos de ambiente de cada tipologia: parede com vão de porta, janela, esquadria de correr, guarda-corpo e giro de folha, em metros locais, consumidos tanto pelo SVG quanto pelo corte 3D.
- Pipeline de ingestão por linha de comando: o espelho de vendas em planilha vira units.json, o endereço vira pontos de interesse reais, o relevo vem de tiles públicos de elevação, o entorno vem do OpenStreetMap e o modelo do arquiteto é convertido e otimizado para a web.
- Um repositório atende vários empreendimentos: um pacote de dados por empreendimento validado por schema, com build escolhido por slug e um hook que revalida o pacote a cada edição.
Detalhes de implementação
- A reserva acontece sob bloqueio de linha dentro de uma função do banco, e a expiração das reservas vencidas é agendada no próprio PostgreSQL.
- Um teste roda vinte corretores reservando a mesma unidade ao mesmo tempo e afirma uma aceita e dezenove recusadas.
- Nada reproduz nome, planta, render ou identidade de empresa real. O bairro e os pontos de interesse do mapa são reais, vindos do OpenStreetMap.
Tecnologias
- Next.js
- App Router servindo as três telas, o portal e as rotas de dados.
- React Three Fiber e three.js
- A cena 3D, a câmera e o material por estado comercial.
- TypeScript
- Linguagem única, com o domínio fora da camada de componentes.
- PostgreSQL
- Estado de disponibilidade, histórico de eventos e a regra de reserva em plpgsql.
- Supabase
- Banco gerenciado, autenticação e assinatura de mudanças.
- Server-Sent Events
- Transporte da mudança de disponibilidade até as telas.
- MapLibre GL
- Mapa do entorno com dados do OpenStreetMap.
- Zustand
- Estado de interface da cena, fora do React Three Fiber.
- Zod
- Validação do pacote de dados de cada empreendimento.
- gltf-transform e meshoptimizer
- Conversão e otimização do modelo do arquiteto para a web.
- three-gpu-pathtracer
- Geração das plantas humanizadas a partir da própria cena.

Vista principal do empreendimento no site do cliente. 
A mesma cena no ciclo de anoitecer. 
Planta humanizada gerada em 3D, com o volume cortado no pavimento escolhido. 
Unidade aberta em corte isométrico, com um marcador por ambiente e a faixa de fotos internas abaixo. 
Mapa do entorno em MapLibre, com os pontos de interesse por categoria e a distância de cada um até o empreendimento.
Quer conversar sobre arquitetura, decisão técnica e entrega em produção?
