A tarefa
Uma casa que ainda não foi construída costuma ser vendida com um punhado de renders e um PDF das plantas. O comprador vê uma coisa separada da outra e precisa juntar tudo na cabeça: onde fica a porta, para onde a sala abre, a que distância o quarto está da cozinha.
A ideia aqui foi fazer da planta e da casa uma coisa só. A página começa na folha que um arquiteto mandaria imprimir, e esse mesmo desenho vira o prédio conforme o leitor rola, então a distribuição fica clara antes mesmo de entrar no primeiro ambiente.
É um conceito nosso, não uma encomenda de cliente, e o trabalho continua. Em duas semanas ele passou por quatro versões completas; a ideia da planta baixa só apareceu no quarto dia.
O que construímos
A primeira tela é uma folha de desenho
A página abre numa planta do térreo: paredes em preto, nomes dos ambientes, áreas e cotas, e no canto o carimbo com a escala e o número da folha. Nada ali parece 3D, e isso é de propósito.
Essa planta não é uma imagem. É o próprio modelo 3D da casa, cortado a 1,2 metro e visto de cima através de uma lente bem longa, então o desenho e o prédio são literalmente a mesma coisa. Cada parede da folha é uma parede pela qual a câmera vai passar depois.
A rolagem sobe o corte, e as paredes crescem
Como a planta é um corte do modelo, não é preciso truque nenhum para deixá-la em 3D. A rolagem levanta a altura do corte, e o leitor vê as paredes crescendo do papel.
Depois a lente encurta, a câmera desce até a porta de entrada e entra. Daí o tour avança para dentro da casa em vez de rodeá-la por fora: o hall, a sala de estar, a mesa de jantar, o pátio, a galeria de vidro, o quarto, o banheiro e o jardim.
Cada ambiente é um desenho em linha até você chegar nele
Os ambientes à frente da câmera continuam desenhados em linhas pretas finas sobre branco, como uma página do projeto. Quando a câmera chega, os materiais de verdade varrem o ambiente: pedra, carvalho, nogueira, mármore, linho, reboco.
Assim a ideia da primeira tela vive o passeio inteiro. O leitor nunca está diante de um render pronto: ele vê o desenho virar casa, um ambiente de cada vez.
Uma casa com móveis, uma oliveira e luz de fim de tarde
A casa precisa parecer uma de alguns milhões: ambientes amplos, móveis de verdade, um sofá rebaixado junto à lareira, uma mesa de jantar comprida, uma oliveira no pátio e uma piscina depois do jardim. A luz é de sol baixo, de fim de tarde, e é ela que dá profundidade aos ambientes.
Tudo isso, das paredes às cadeiras e à árvore, é geometria escrita em código. Não há arquivo do Blender por trás desta casa. As superfícies são escaneamentos CC0 gratuitos do Poly Haven.
O passeio termina onde começou
Depois do jardim a câmera sobe acima do telhado, mostra a casa inteira de cima, já construída, e a planta volta como folha. A última tela diz isso numa linha: todo prédio começa chapado, os nossos não ficam assim.
Debaixo dessa linha há um botão, e ele abre uma conversa no WhatsApp. Não há formulário no fim de um passeio desses.
Por dentro do projeto
A casa é desenhada ao vivo no navegador, então a maior parte do trabalho foi no modelo, no peso das texturas e em manter a imagem firme enquanto a câmera anda. Veja o que existe por baixo do passeio.
O modelo
A planta é um corte do modelo
A planta é desenhada a partir do modelo 3D, cortado a 1,2 m e visto de cima por uma lente bem longa, que o achata num desenho.
Dezessete espaços, todos em código
Da garagem e da adega até a suíte principal e o jardim privativo, cada parede, cada móvel e a oliveira são geometria feita em código.
three.js, GSAP e Lenis, sem etapa de build
A cena roda em three.js, o passeio é preso à rolagem com GSAP ScrollTrigger e suavizado com Lenis. O site são arquivos simples, servidos como estão: a cena e o tour juntos somam cerca de 130 KB de script.
Peso e carregamento
Treze materiais CC0, em dois tamanhos
O notebook carrega o conjunto completo de treze materiais, cerca de 39 MB, e o celular recebe o mesmo conjunto com um quarto dos pixels, cerca de 13 MB. Poly Haven
Uma tela de carregamento que fala a verdade
A porcentagem conta os 41 arquivos que a cena realmente pede e guarda o último décimo para preparar a cena, então o número nunca volta para trás.
Um plano B em vez de página em branco
A casa precisa de WebGL 2. Um navegador sem ele, ou que perde o contexto gráfico no meio do caminho, recebe uma imagem da casa e o vídeo do passeio, e a visita continua mostrando do que se trata a página.
Imagem estável
Um orçamento fixo de pixels para todo o passeio
Em vez de trocar o tamanho do render entre os ambientes, o que fazia a imagem pular, o tour desenha 2,4 megapixels fixos no notebook e 1,5 no celular.
Cintilação rastreada e removida
O teto cintilava depois que a rolagem parava; a causa era a poeira de sol no ar, então a poeira saiu e a luz do sol e seus feixes ficaram.
O que saiu disso
- Uma rolagem leva o leitor da planta impressa por sete ambientes da casa.
- A casa inteira é geometria em código, vestida com treze materiais CC0 gratuitos.
- O celular baixa mais ou menos um terço das texturas que o notebook baixa.
- O aparelho que não consegue desenhar a casa recebe uma imagem e um vídeo do passeio, e não uma página em branco.
A página responde à pergunta que a planta sozinha nunca responde — como é estar dentro da casa — e faz isso sem tirar a planta de cena. Para um arquiteto ou uma incorporadora, é a diferença entre um comprador que lê um desenho e um comprador que anda pela sua futura sala.
