Tour 3D imobiliário com Three.js: guia prático para devs

Tecnologia de games no imobiliário: o que devs precisam entender

O problema de comprar na planta sempre foi o mesmo: traduzir uma planta baixa 2D em algo que você consegue sentir. Segundo o Terra.com.br, a Atta3D acaba de lançar o Atta Ultra, que resolve isso reaproveitando engines de games. Mas como dev, a pergunta que me interessa é outra: qual o stack real por trás disso e o que dá pra aprender?

Na minha experiência com projetos web 3D, vejo o movimento como a convergência de três áreas que amadureceram nos últimos cinco anos: WebGL 2 maduro, physically-based rendering (PBR) como padrão de mercado e streaming de assets pesados rodando direto no browser. Antes, fazer algo assim exigia Unity ou Unreal rodando nativo. Hoje, dá pra entregar quase tudo client-side.

O que provavelmente está rodando por baixo do capô

Quando soube do lançamento, fui direto investigar o stack mais provável. As opções reais que devs seniores consideram pra esse tipo de produto:

• Unreal Engine 5 com Pixel Streaming: entrega qualidade cinematográfica com ray tracing em tempo real, mas custa caro em servidor e exige GPU dedicada no backend (AWS G4/G5, Azure NV-series). Cada usuário ativo pode consumir 10-30 Mbps.
• Unity + WebGL build: mais leve, melhor pra mobile, mas perde em qualidade visual. Boa escolha pra tours mais simples.
• Three.js ou Babylon.js puro com assets glTF: a abordagem mais web-friendly. É o que vou te mostrar funcionando mais abaixo.
• PlayCanvas ou 8th Wall: meio-termo entre performance e qualidade, com bônus de colaboração multiplayer se necessário.

Minha aposta: o Atta Ultra roda Unreal 5 com streaming — a tal “orientação solar em diferentes épocas do ano” exige cálculo atmosférico real, coisa que só engines AAA entregam bem hoje sem custar meses de dev.

Por que engines de games são perfeitas pra isso

Games resolveram três problemas que o imobiliário sempre teve — e a incorporadora terceirizou a solução:

1. Navegação livre com física: WASD, colisão, gravidade — tudo já existe e funciona. Não tem por que reinventar.
2. Iluminação dinâmica realista: o cálculo de posição solar baseado em data é literalmente um sistema de sky atmosphere com sun position. Three.js já tem isso pronto via Sky shader da NASA, e Unreal tem nativamente.
3. Pipeline de assets consolidado: modelagem 3D, LOD (level of detail), streaming de texturas — qualquer empresa de games tem isso afinado há duas décadas.

O insight aqui é claro: incorporadoras estão terceirizando UX imersiva para quem sempre entendeu de UX imersiva — devs de games.

Na prática: tour 3D mínimo com Three.js

Não dá pra falar de “tour imobiliário navegável” sem mostrar código. Montei um exemplo enxuto que carrega um ambiente, deixa o usuário caminhar com WASD e mostra como adicionar uma consulta de “vista da unidade”. Não é produção-ready, mas é o esqueleto técnico honesto do que o Atta Ultra faz em escala.

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';

// Setup básico de cena
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);

const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.set(0, 1.7, 5); // altura do olho humano em metros

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

// Iluminação que simula orientação solar (truque-chave do Atta Ultra)
const sun = new THREE.DirectionalLight(0xfff5e0, 1.2);
sun.position.set(10, 15, 5);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
scene.add(sun);
scene.add(new THREE.AmbientLight(0xffffff, 0.4));

// Controles de primeira pessoa
const controls = new PointerLockControls(camera, renderer.domElement);
renderer.domElement.addEventListener('click', () => controls.lock());

const keys = {};
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);

// Carrega o modelo do apartamento (glTF é o padrão da indústria)
const loader = new GLTFLoader();
loader.load(
  '/models/apartamento.glb',
  (gltf) => {
    scene.add(gltf.scene);
    console.log('Imóvel carregado:', gltf.scene);
  },
  (xhr) => console.log((xhr.loaded / xhr.total * 100) + '% carregado'),
  (err) => console.error('Erro ao carregar modelo:', err)
);

// Loop principal com física simples
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
let prevTime = performance.now();

function animate() {
  requestAnimationFrame(animate);
  const time = performance.now();
  const delta = Math.min((time - prevTime) / 1000, 0.1);
  prevTime = time;

  velocity.x -= velocity.x * 10.0 * delta;
  velocity.z -= velocity.z * 10.0 * delta;
  direction.z = Number(keys['KeyW']) - Number(keys['KeyS']);
  direction.x = Number(keys['KeyD']) - Number(keys['KeyA']);
  direction.normalize();

  if (keys['KeyW'] || keys['KeyS']) velocity.z -= direction.z * 40.0 * delta;
  if (keys['KeyA'] || keys['KeyD']) velocity.x -= direction.x * 40.0 * delta;

  controls.moveRight(-velocity.x * delta);
  controls.moveForward(-velocity.z * delta);

  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Esse é o esqueleto. O que um produto como o Atta Ultra provavelmente adiciona em cima:

• Raycasting pra detectar em qual cômodo o usuário está e mostrar ficha técnica contextual
• Sistema de “teleporte” entre unidades — cada apartamento vira uma cena ou sub-scene carregada sob demanda
• Sky shader dinâmico que muda posição do sol baseado em data e coordenadas geográficas reais
• Hotspots com mídia: plantas baixas 2D sobrepostas, vídeos curtos, ficha técnica, simulado de financiamento
• Analytics de comportamento: tempo em cada ambiente, cômodo mais revisitado, dúvida mais consultada

Comparação real: as abordagens que vão cair no teu colo

Erros comuns que devs cometem nesse tipo de projeto

Já vi gente caindo nas mesmas armadilhas. Anota aí antes de aceitar o próximo job:

1. Carregar o modelo inteiro de uma vez

Se o apartamento tem 200 MB de geometria, o usuário abandona antes do primeiro frame. Use LOD (level of detail) e streaming de chunks. Three.js tem three-mesh-bvh pra raycasting otimizado e o Unreal resolve nativamente com World Partition. O Atta Ultra só fica fluido porque faz isso por baixo.

2. Ignorar o mobile

Mais de 60% dos acessos imobiliários vêm de celular no Brasil. Se o tour só roda em desktop com GPU dedicada, você perdeu a maioria dos leads. Teste no Safari iOS — é onde a maioria dos projetos quebra por causa de limitações de memória e WebGL extensions.

3. Não pensar em UX de game design

Tem dev que coloca navegação livre tipo Skyrim e o usuário fica perdido em três segundos. O que funciona: movimento limitado com mini-mapa + pontos de interesse brilhando. O Atta Ultra provavelmente faz isso — quando o CEO diz “cada pessoa explora de acordo com suas dúvidas”, ele está descrevendo um sistema de objetivos estilo quest log.

4. Esquecer do analytics

Para a incorporadora, o dado mais valioso é: “o usuário parou 3 minutos no quarto da suíte mas ignorou a varanda”. Sem tracking de gaze, tempo e posição, o produto vira só marketing bonito que ninguém sabe se converte. Integra com Hotjar, Mixpanel ou endpoint próprio via fetch + beacons.

5. Texturas 4K em tudo sem compressão

Use KTX2 + Basis Universal pra comprimir texturas sem perda visual perceptível. Reduz bandwidth em até 70% e mantém a GPU feliz. Three.js carrega isso com o KTX2Loader.

6. Confundir PBR com ray tracing

PBR (physically-based rendering) é shading baseado em física, roda em qualquer GPU moderna. Ray tracing em tempo real é outra história — exige hardware dedicado. Pra imobiliário, PBR entrega 95% do realismo por 5% do custo. Não cace ray tracing a menos que o cliente pague pixel streaming.

Por que isso importa pra você, dev

Se você trabalha com web, três tendências vão se consolidar até 2027:

1. WebGPU vai derrubar parte da barreira mobile. Quando estabilizar de fato, tours 3D no browser vão rivalizar com apps nativos em qualidade. Three.js já tem WebGPURenderer experimental.
2. Empresas de real estate vão contratar mais devs 3D do que designers 2D. Já está acontecendo — busca “Three.js developer” no LinkedIn Brasil e vê as vagas abertas no setor imobiliário.
3. Esse padrão vai migrar pra outros setores: arquitetura, medicina (visualização de exames em 3D), educação (labs virtuais), e-commerce (configuradores 3D). Quem dominar agora vai surfar a próxima onda.

Na minha visão, o movimento da Atta3D é só a ponta. O próximo passo natural é real-time customization: o cliente muda a cor do piso, vê a varanda com churrasqueira, e tudo isso atualiza o orçamento na hora. Pipeline de e-commerce 3D rodando em Three.js já existe — é só unir com o tour.

FAQ — perguntas que devs realmente fazem

1. Three.js aguenta um apartamento completo ou só estúdios pequenos?

Aguenta apartamentos completos, mas com LOD ativo. Um apartamento de 80m² bem modelado fica em torno de 5-15 MB de glTF comprimido com Draco. Carrega rápido e roda em celular intermediário tipo Galaxy A-series ou iPhone 12 pra cima.

2. Como integrar o tour com o CRM da incorporadora?

Via eventos JS disparando webhook. Cada hotspot tem um ID único, e quando o usuário clica em “agendar visita” ou “falar com corretor” dentro do tour, dispara um fetch pra HubSpot, RD Station, ou endpoint custom. Padrão comum é usar navigator.sendBeacon pra não perder evento no unload.

3. WebGL ou WebGPU? Qual escolher hoje em produção?

WebGL 2 ainda é o padrão compatível com 100% dos browsers alvo. WebGPU está estabilizando mas tem fragmentação entre Chrome, Firefox e Safari. Pra produção séria, fica com Three.js + WebGLRenderer; pra protótipo experimental, testa WebGPURenderer e vê o ganho em ray tracing e compute shaders.

4. Quanto custa um projeto desses pra cobrar do cliente?

Depende do escopo: tour simples em Three.js fica na faixa de R$ 30-80 mil. Projeto premium com Unreal Pixel Streaming e múltiplos empreendimentos sobe pra R$ 200-500 mil+. Mais manutenção mensal se virar produto SaaS com hosting incluso.

5. Existe alternativa open source ao Atta Ultra pra começar a estudar?

Não existe um produto final idêntico open source, mas a base é toda aberta. Three.js + React Three Fiber formam o stack mais usado no mundo pra web 3D. Pra modelos gratuitos pra testar, baixa do Sketchfab e evolui pra um mini-empreendimento. Quando travar em algo, dispara nos comentários que a gente desenrola.

6. WebGPU vai matar o Three.js tradicional?

Não. Three.js é renderer-agnostic — vai suportar WebGL, WebGPU e WebGL2 numa API única. Quem aprendeu Three.js hoje vai migrar pra WebGPU sem reescrever a aplicação inteira. A curva é aprender os novos paradigmas de compute shaders e bind groups.

Se você chegou até aqui, é porque o tema te interessou de verdade — não apenas pelo marketing imobiliário, mas pelo que significa pra carreira de dev web. Recomendo rodar o código acima localmente, carregar um modelo do Sketchfab e evoluir pra um mini-empreendimento. Quando travar em algo, manda no comentário.

Gostou? Me segue no GitHub e deixa um comentário se tiver dúvida ou quiser aprofundar algum ponto.