threejs-fotointerior-real

Cena Interior Fotorrealista (Guia Geral)

Este skill combina os skills abaixo em um fluxo completo e fornece um modelo de projeto executável. O método é baseado em room-at-dawn (MIT): um quarto ao amanhecer, inteiramente gerado por código, executado no navegador. A escala do projeto original é aproximadamente:

• 1,83 milhões de triângulos, carregamento em cerca de 7 segundos (RTX 4090).
• Arquivo de iluminação assada gi.bin com cerca de 13 MB, bake de aproximadamente 30 minutos.
• Vídeo em 4K HDR10.

Qual skill usar em cada etapa

Etapa	skill	O que entregar
0	3d-spec-prompt	Transformar ideias em especificações verificáveis: ambiente, hora, escala, objeto principal, câmera
1 Dimensões e casca	template/src/layout.js, parts/room.js deste skill	Dimensões reais (metros), janela, espessura da parede, casca
2 Objetos principais	threejs-procedural-cloth (cobertores, cortinas), threejs-procedural-vegetation (árvores do lado de fora), threejs-procedural-pothos (plantas internas)	Objetos de foco visual
2b Céu e exterior	threejs-sky-backdrop (céu padrão, nuvens, grama externa, casas, sebes distantes, apenas o que é visível)	Mesmo céu para bake e cena renderizada
3 Materiais	threejs-procedural-textures	Paredes, chão, madeira, tecidos, marcas de uso, capas de livros
4 Objetos de ambientação	threejs-lived-in-props	Pano pendurado na cadeira, copo, garrafa, meias, fios, papel amassado
5 Iluminação	threejs-baked-gi	Luz do céu e luz solar indireta assada nos vértices, salvo como gi.bin; luz solar direta em tempo real
6 Imagem final	threejs-realtime-post	AO, bloom, exposição separada interna/externa, correção de cor
7 Validação, gravação	webgl-deterministic-recording	Regressão de screenshots, renderização quadro a quadro, saída cinematográfica (profundidade de campo, motion blur, HDR10)

Criar novo projeto

bash <pasta do skill>/scripts/new-project.sh ~/git_project/my-room
cd ~/git_project/my-room && python3 -m http.server 5430 --bind 127.0.0.1
# http://127.0.0.1:5430/            Já inclui bake/gi.bin
# http://127.0.0.1:5430/?bake=128   Após modificar a cena, refazer bake, clicar "download gi.bin" e salvar em bake/

(<pasta do skill> é o diretório base exibido ao carregar este skill; quando instalado como plugin, fica em ~/.claude/plugins/cache/)

• Este script copia o modelo e os códigos de cada sub-skill para src/lib/ (gi, post, props, textures, cloth, vegetation, pothos, sky, film), tornando o projeto autossuficiente.
• Não requer bundlers nem npm. three e three-mesh-bvh são carregados do jsdelivr.
• Parâmetros de URL:
  • ?cam= : Câmera (room, desk, window, corner, view = olhando para fora pela janela).
  • ?t= : Hora fixa (folhas e nuvens paradas, para screenshots).
  • ?view=gi : Visualizar apenas iluminação.
  • ?only=furniture : Construir apenas uma parte.
  • ?exp= : Exposição.
• A página fornece window.__ready, window.__stats, window.__camera, para conexão com as ferramentas de webgl-deterministic-recording.
• Controles: Arrastar para girar; WASD / setas para andar (Shift para andar devagar, colide com paredes e móveis); clicar na tela muda para controle de rotação com mouse, visão a 1,6 m (Esc sai). O modo orbital limita câmera e ponto de interesse dentro do cômodo; zoom e pan não ultrapassam as paredes.

Estrutura do modelo:

Arquivo	Conteúdo
src/layout.js	Único local para dimensões, sol, céu (padrão SKIES), configuração externa (OUTSIDE), correção de cor, câmera, áreas de móveis intransponíveis (BLOCKERS)
src/materials.js	lit() (patch GI, preserva patches de shader originais, registra albedo), solid(), tbox(), tplane(), metres()
src/scene.js	Cria cada parte na ordem fixa pelo campo order
src/parts/room.js	Chão, teto, quatro paredes, abertura da janela e peitoril, casca preta externa, núcleo das paredes
src/parts/outside.js	Exterior: céu, grama, caminho de cascalho, sebes, casas, árvores distantes, árvore principal e árvores médias/distantes (apenas o visível, com threejs-sky-backdrop + threejs-procedural-vegetation). Todas com gi = false, não bloqueiam luz de bake
src/parts/furniture.js	Mesa, cadeira, toalha pendurada (PBD), copo, garrafa, livros sobre a mesa, livros na estante
src/main.js	Criar cena → bake, carregar arquivo ou luz plana → sol → reflexão → pós-processamento → câmera (orbital + andar, restrito ao cômodo)

Regras obrigatórias entre skills

1. Unidades em metros, coordenadas fixas. X ao longo da parede da janela, Z para dentro (janela em z = 0, z < 0 é exterior), Y para cima. Todas as dimensões somente em layout.js.
2. Determinismo. Números aleatórios sempre com RNG(seed). Se a ordem, nome ou contagem de vértices de uma peça mudar, o bake daquela malha será invalidado; applyBake reportará como obsoleto.
3. Luz armazenada nos vértices, exigindo subdivisão. Superfícies com objetos em cima subdivididas a 1,5–2 cm; áreas grandes a 4–8 cm. Use tbox/tplane.
4. Todos os materiais iluminados devem passar por lit(). giPatch substitui diretamente onBeforeCompile; lit() encadeia os patches originais, incluindo variações de parede (wallPatch), contraste de tecidos, vento. Materiais com textura devem fornecer albedo (a avg da textura) para que a cor da luz indireta seja correta.
5. Divisão do sol: Luz direta com DirectionalLight (intensidade igual ao sun.irr da configuração de bake); luz indireta assada em arquivo. Não adicione luz ambiente ou hemisférica.
6. Paredes devem ter núcleo sólido com shadowSide definido como FrontSide. Sem isso, o sol vaza pontos brilhantes no rodapé e nos cantos das paredes (já ocorrido; veja references/integration.md).
7. Exposição focada no interior. Interior tem cerca de 1/20 da claridade externa: exposure em torno de 4,5; exterior com ext em torno de 0,3 para escurecer.
8. Reflexão capturada após o bake. captureEnv deve ser executado após applyBake/runBake, com a sonda no centro do cômodo.
9. Com fundo externo distante, o clipping far da câmera deve ser maior que o elemento mais distante. O modelo usa 400 m (sebes a 100 m, grama até 260 m). Com far = 100, o fundo cortado exibe uma névoa de horizonte branca que se move com a câmera (já ocorrido).
10. A câmera de sombra do sol deve cobrir as copas das árvores externas para que a sombra das árvores entre: o modelo posiciona o sol a 30 m de distância, near 12, far 40.

Medições reais (modelo, RTX 4090, Chrome headless, 1280×800)

• Criação da cena: 1,2 s, sendo a toalha pendurada ~0,65 s; 107.000 triângulos; da abertura da página até a imagem: ~1,6 s.
• Bake em tempo real a 128 spp: 61.407 amostras, 26 workers, 6 s, gi.bin com 743 KB. Após recarregar, aplicado a 39 malhas, 0 inválidas.
• preview.jpg: cômodo, vista da mesa, janela, apenas luz. preview-bake.jpg: esquerda com luz plana, direita após bake.

Leitura adicional

• references/workflow.md: Passos de cada etapa, decisões a tomar, entregáveis e pontos de verificação.
• references/integration.md: Interfaces entre skills, pontos de atenção e problemas encontrados.
• references/checklist.md: Lista de verificação e faixas de referência para métricas.