Plano em tempo real: sites 3D com Gemini
Esqueça os geradores de prompts. Aqui está um plano interativo completo, passo a passo. Do chat em branco até uma experiência 3D interativa – apenas usando a conversa com inteligência artificial em tempo real.
Etapa 1: Preparando o ambiente
Você não precisa instalar nada no seu computador. Todo o processo vai rodar diretamente no navegador. Para iterar o mais rápido possível, abra duas abas lado a lado:
- Abra o Google Gemini gratuito (gemini.google.com).
- Abra o editor de código online CodePen.io ou PlayCode.io. Aqui vamos testar imediatamente o código gerado, sem precisar criar e salvar arquivos HTML.
Etapa 2: Prompt Mestre de Início
O primeiro prompt é o mais importante. Ele define os limites para o Gemini e configura a base tecnológica (Three.js via CDN, tudo em um único arquivo). Copie este texto e cole no Gemini:
Você é especialista em WebGL e na biblioteca Three.js. Sua tarefa é escrever o código HTML completo (incluindo CSS e JS internos) para uma cena 3D funcional. Requisitos: 1. Crie um objeto 3D girando no centro (TorusKnot ou Icosahedron). 2. Importe Three.js e OrbitControls por meio de um link CDN (unpkg ou cdnjs) na tag script. 3. Precisa ser um 'Single file' – tudo em um único bloco de código, sem import maps. 4. Não use modelos externos (GLTF) nem texturas (JPG/PNG). Crie tudo de forma procedimental no código (MeshStandardMaterial, luzes, cores). 5. Adicione luzes pontuais (PointLight) e sombras suaves. 6. Defina o fundo com uma cor bem escura.
Etapa 3: Execução e verificação
Assim que o Gemini gerar o código, copie-o no canto superior direito do bloco de código. Vá para a segunda aba (por exemplo, CodePen) e cole todo o código APENAS no campo HTML (deixe os campos de CSS e JS vazios, nosso código já contém tudo).
Dica: Você verá imediatamente um objeto 3D girando. Tente clicar nele com o mouse e arrastar – graças ao OrbitControls, é possível girá-lo!
Etapa 4: Iteração em tempo real
Agora começa o trabalho em tempo real de verdade. Volte para o Gemini. Não é preciso escrever um novo código ou enviar o antigo (ele se lembra). Basta continuar conversando e adicionando requisitos aos poucos. Experimente enviar, aos poucos, estas mensagens:
Isto está ótimo. Agora mude o material do objeto de cor sólida para um 'Wireframe' (modelo em rede) brilhante, em azul neon e rosa.
Perfeito. Agora adicione ao fundo da cena um sistema de partículas (Points e PointsMaterial) girando lentamente, que simule estrelas no espaço.
Excelente. E agora faça com que, quando eu mover o mouse, as cores das luzes comecem a mudar suavemente de acordo com a posição do cursor na tela.
Etapa 5: Solução de problemas (Debugging)
Ao ajustar o código em tempo real, às vezes a IA comete um erro e você verá apenas uma tela preta ou branca no CodePen. Você não precisa saber programar, basta descrever o problema no chat:
O último código que você enviou não está funcionando. A tela está completamente preta e nada está girando. Verifique se você carregou corretamente o OrbitControls e se a câmera não está dentro do objeto. Tente corrigir isso e envie para mim a versão completa corrigida.
Pronto! Salvando o projeto
Quando você estiver 100% satisfeito com o resultado, copie o último código funcional do CodePen. No Windows, abra o Bloco de Notas (Notepad) ou, no Mac, o TextEdit, cole o código e salve o arquivo como 'meu_3D_web.html'. Pronto! Você tem seu próprio aplicativo 3D.