3D & Modelagem
Claude 3.5 Sonnet
Visualizador 3D de Produto em Three.js com GLTF e Iluminação de Estúdio
Página que exibe um modelo .glb/.gltf girando com iluminação de estúdio, troca de cores do material e zoom por scroll — pronta para e-commerce.
0cópias
0joinhas
0favoritos
O prompt
Crie uma página HTML única (Three.js via CDN r128) que funciona como visualizador de produto 3D para a loja {{nome_loja}}.
Parâmetros:
- Nome da Loja: {{nome_loja}}
- URL do Modelo (.glb ou .gltf): {{url_modelo_3d}}
- Cor Inicial do Produto: {{cor_produto}}
Requisitos:
1. Carregar o modelo com GLTFLoader a partir de {{url_modelo_3d}}, centralizado na cena, com escala normalizada para caber no viewport.
2. Iluminação de estúdio: HDRI simples ou 3 luzes (key, fill, rim) + sombras suaves em um plano abaixo do produto.
3. Rotação automática lenta do produto; arrastar com o mouse pausa a rotação e permite girar livremente (OrbitControls com damping).
4. Painel lateral minimalista com 5 swatches de cor que trocam a cor principal do material do produto em tempo real (iniciando em {{cor_produto}}) e um seletor de acabamento (fosco/brilhante via roughness/metalness).
5. Zoom por scroll limitado (não atravessar o produto), botão 'Vista frontal' que reseta a câmera com animação suave.
6. Loading: spinner simples até o modelo carregar; mensagem amigável se a URL falhar.
Como usar
- Substitua {{nome_loja}}, {{url_modelo_3d}} (use um .glb hospedado em CDN ou no próprio site) e {{cor_produto}} (hex).
- Cole no Claude — o prompt é autocontido, sem build.
- Salve como viewer.html e abra no navegador: o produto gira sozinho; arraste para girar, scroll para zoom.
- Para plugar em um e-commerce real, troque a URL do modelo por uma query string (?modelo=...) — peça à IA: 'aceite a URL via query param'.
Exemplo de saída
viewer.html (~200 linhas): GLTFLoader carregando o .glb com normalização de escala/posição, 3 luzes + sombras suaves no plano, OrbitControls com damping e auto-rotate pausável por arrasto, painel com 5 swatches trocando a cor do material + toggle fosco/brilhante (roughness/metalness), zoom limitado e botão 'Vista frontal' com tween da câmera.