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.

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.

Antes de começar: o ambiente local

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.

Copie estes prompts

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.

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."