Pular para o conteúdo

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
A maquete 3D colorida por estado comercial, com filtros de preço, dormitórios e pavimento ao lado.

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?

Retrato de Thiago Sanches

Dados de contato

Disponível para trabalho remoto em times internacionais

Nome
Thiago Sanches
Localização
Brasil · UTC−3 · trabalho remoto
Idiomas
Português nativo · inglês com fluência profissional
Baixar currículo

Experiência

  • 5 anos

    em sistemas corporativos

  • 70%

    menos tempo por relatório novo

  • 50%

    menos latência em GraphQL

  • Workers

    processos assíncronos com filas em Redis