Você não precisa ser programador para criar uma vitrine 3D impressionante. Você precisa de um ponto de vista claro, das proporções físicas do seu produto e da disciplina de especificar o que quer antes de abrir o prompt.

Quando publicamos a vitrine 3D interativa de Do Caos ao Lucro, dezenas de fundadores e autores mandaram mensagem perguntando qual biblioteca secreta ou prompt mágico foi usado. A resposta decepciona quem busca atalhos: a ferramenta foi o que menos importou. A clareza do modelo mental foi tudo.

O segredo: A IA acelerou em 55 minutos o que já estava desenhado e decidido no papel. Se você alimentar um modelo com pedidos vagos como "faça um 3D legal", ele devolve código inchado, genérico e quebrado. Quando a especificação é cirúrgica, a IA gera Three.js de primeira tentativa.

1. A regra de ouro: O roteiro antes da ferramenta

Antes de tocar em qualquer linha de código ou abrir o Claude Code, gastei 40 minutos em um arquivo de texto simples definindo 4 pilares:

  • A geometria física: As proporções exatas do livro (14cm de largura, 21cm de altura, 2.5cm de lombada).
  • A física da iluminação: Uma luz direcional quente suave simulando estúdio fotográfico, mais uma luz ambiente fria para não deixar sombras chapadas.
  • O objetivo emocional da câmera: No segundo 0, o livro entra em perspectiva de 45 graus, convidando o usuário a interagir.
  • O limite de interação: Permitir giro horizontal livre, mas travar o pitch vertical em 30 graus para que o livro nunca fique de cabeça para baixo.

2. Setup do ambiente local (Claude Code ou Cursor)

Baixe o starter kit gratuito e descompacte a pasta no seu computador. Abra a pasta diretamente no seu editor de código com IA (Claude Code, Cursor ou VS Code).

A grande vantagem de rodar localmente é que o agente tem acesso direto aos arquivos do seu disco, testa a renderização em tempo real e você não precisa ficar fazendo upload de arquivos para a nuvem.

Dica de ouro: Nunca edite dentro do arquivo .zip. Mova a pasta extraída para um diretório permanente, como Projetos/meu-site-3d, antes de abrir no editor.

3. Prompts copiáveis para você colar no seu agente

Aqui estão os três prompts exatos que estruturam o projeto. Você pode clicar no botão "Copiar" e colar diretamente no seu agente de código:

Prompt 1Briefing Arquitetural Inicial (Cena, Câmera e Canvas)
Atue como um Engenheiro Criativo Frontend especialista em Three.js e WebGL.
Eu quero criar uma página de vitrine interativa para o meu livro/produto.
Requisitos:
1. Um canvas Three.js centralizado com fundo escuro e iluminação realista de estúdio (luz principal direcional + luz de preenchimento ambiente suave).
2. O modelo 3D do livro deve ser uma malha retangular com proporções realistas de capa dura (14cm largura x 21cm altura x 2.5cm lombada).
3. O usuário deve conseguir girar o livro suavemente com o mouse (desktop) ou toque (mobile) usando dampening/inércia.
4. Ao carregar a página, faça uma animação de abertura suave (câmera aproximando e o livro dando um giro de 45 graus para exibir a capa e a lombada).
5. Código limpo, moderno, modular e responsivo sem dependências desnecessárias.
Prompt 2Mapeamento de Capa, Contracapa e Lombada
Atualize o material do livro 3D no Three.js para carregar texturas de imagem reais:
- Face frontal: capa.jpg
- Face traseira: contracapa.jpg
- Lombada: lombada.jpg
- Miolo (laterais das páginas): textura de papel com leve relevo/bump.
Adicione um fallback com cores sólidas elegantes e tipografia enquanto as imagens carregam, para evitar telas em branco.
Prompt 3Otimização Mobile e Gestos de Toque
Otimize a interação mobile do livro Three.js:
1. O toque na tela deve girar o livro sem travar o scroll vertical da página se o usuário arrastar fora da área ativa do canvas.
2. Limite a rotação vertical (pitch) entre -30 e +30 graus para evitar que o livro fique de cabeça para baixo.
3. Desative sombras pesadas em telas com DPR alto para garantir 60fps constante em celulares intermediários.

4. A virada: Por que a IA não substitui discernimento

Quando qualquer pessoa consegue gerar código Three.js em 50 minutos, o código em si deixa de ser um diferencial competitivo.

O que faz a vitrine converter não são os shaders complexos ou a rotação geométrica. É o fato de que ela celebra uma linguagem e uma promessa que a audiência já desejava. A IA não inventa o seu valor. Ela apenas traduz clareza mental em geometria na tela.

"O código virou subproduto instantâneo da clareza. Mas a clareza só nasce de entender a fundo o problema de quem você serve."

Pronto para colocar o seu site 3D no ar?

Baixe o kit gratuito, descompacte no seu computador e siga os passos do tutorial. Totalmente livre para você adaptar e publicar.

Baixar kit gratuito (.zip)