Acesso ao aplicativo bloqueado
Para obter acesso a este tutorial 3D, você precisa primeiro se inscrever em nosso canal no YouTube.
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 por meio de conversa com a inteligência artificial em tempo real.
Etapa 1: Preparação do ambiente
Você não precisa instalar nada no seu computador. Todo o processo vai rodar apenas 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: Master Prompt inicial
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 um código HTML completo (incluindo CSS e JS dentro) para uma cena 3D funcional. Requisitos: 1. Crie no centro um objeto 3D giratório (TorusKnot ou Icosahedron). 2. Importe Three.js e OrbitControls por link de CDN (unpkg ou cdnjs) na tag script. 3. Precisa ser '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 procedural 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 quadro de código. Vá para a segunda aba (por exemplo, CodePen) e cole todo o código SOMENTE 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 é necessário escrever um novo código nem enviar o antigo (ele se lembra). Basta conversar e ir adicionando requisitos aos poucos. Experimente estas mensagens, uma por vez:
Isto está ótimo. Agora mude o material do objeto de cor sólida para um 'Wireframe' brilhante (modelo em rede) em azul e rosa neon.
Perfeito. Agora adicione ao fundo da cena um sistema de partículas girando lentamente (Points e PointsMaterial), que vai simular 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: Resoluçã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 me envie a versão inteira corrigida.
Pronto! Salvando o projeto
Quando 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_site.html'. Pronto! Você tem o seu próprio aplicativo 3D.