Site 3D Interativo: BMW i4 com Three.js & Claude Code

Prompt completo para construir um configurador 3D automotivo no navegador com carregamento glTF e controles orbitais.

Como fazer

Passo 1. Baixe o modelo 3D otimizado (.glb/.gltf) do veículo em baixa poligonalidade.
Passo 2. Abra seu terminal e inicie o projeto com Vite + Three.js ou React Three Fiber.
Passo 3. Cole o prompt de engenharia no Claude Code ou Antigravity e gere a aplicação completa.

Prompt Arquitetural: Showroom 3D em Three.js & React Fiber

Build a fully interactive 3D luxury automotive website showcase for the all-electric BMW i4.
Stack: Next.js 15, React Three Fiber (@react-three/fiber), Three.js, Drei (@react-three/drei), Tailwind CSS v4.

Key Architecture & Features:
1. Canvas Setup: Studio environment HDR lighting with soft contact shadows, ground reflection plane (meshReflectorMaterial with blur [300, 100]), toneMapping: ACESFilmicToneMapping.
2. 3D Model Loading: Load 'bmw_i4.glb' using useGLTF with Draco compression. Center pivot point and scale smoothly to viewport.
3. Interactive Customizer:
   - Color picker state (Frozen Portimao Blue, Sanremo Green, Alpine White, Black Sapphire) smoothly updating vehicle car paint material (clearcoat: 1.0, clearcoatRoughness: 0.1, roughness: 0.2, metalness: 0.9).
   - Wheel variant toggle between 19" M aerodynamic rims and 20" individual bi-color wheels.
4. Camera Choreography: Smooth lerped camera transitions using OrbitControls with minPolarAngle={Math.PI / 4} and maxPolarAngle={Math.PI / 2.1}.
5. UI Overlay: Minimalist luxury dark HUD (#0A0A0C) with floating tech specs (0-100 km/h: 3.9s, Range: 590 km, 544 hp), battery animation, and 'Schedule Test Drive' CTA button.

O prompt inteiro está aqui

Deixe o e-mail e o WhatsApp aqui embaixo e ele abre nesta tela.

Liberar

O prompt fica em inglês de propósito, porque os modelos executam melhor assim. O que está entre colchetes é o que você troca.

Performance 60 FPS

Use Draco Compression no arquivo .glb para reduzir o peso do 3D de 50MB para menos de 4MB sem perder detalhe de malha.

Libere o prompt

Ele abre nesta tela na hora, e vai junto para o seu e-mail.

O seu contato não vai para lista de terceiro. Para sair, basta responder pedindo. Como eu trato os seus dados.

A ferramenta que eu uso aqui

Hostinger

É onde eu subo site, automação e servidor. Pelo meu código a assinatura sai com desconto.

Assinar com o meu desconto

Link de afiliado: eu ganho comissão se você assinar, e não custa mais caro por isso.

Este prompt é um dos que saem das minhas skills.

O conjunto inteiro, com as 32 que eu uso, está no pack por R$ 39,90. É arquivo: não acaba, não tem prazo e chega no seu e-mail em um minuto.

Ver o pack

Perguntas que sempre chegam

Este material é pago?

Não. Ele é gratuito. Você deixa o e-mail e o WhatsApp e ele abre nesta página. Quem chega pelo direct, depois de comentar no Instagram, já encontra tudo aberto.

Por que o prompt está em inglês?

Porque os modelos executam melhor assim. O que está entre colchetes é o que você troca pelo seu caso.

Posso usar em trabalho de cliente?

Pode. O prompt é ponto de partida, e o que sair dele é seu, respeitados os termos da ferramenta que você usar para gerar.

Veio do Instagram e tocou no botão? Então o prompt já abriu para você, e não precisa preencher nada aqui.