React Three Fiber skill

O que ela faz

Ensina o Claude a usar o React Three Fiber, que monta cenas 3D do Three.js como componentes React. Ele cria o Canvas com câmera e luz, coloca objetos e modelos 3D no formato GLTF, anima quadro a quadro com o useFrame e trata clique e mouse em cima de cada objeto.

Vem com os ajudantes da biblioteca Drei: girar a câmera com o mouse (OrbitControls), iluminação de ambiente pronta, texto em 3D, conteúdo HTML por cima da cena e animação controlada pela rolagem da página. Também mostra como juntar com GSAP, Framer Motion e Zustand.

Tem uma parte só de desempenho: renderizar só quando algo muda, instancing pra milhares de objetos, nível de detalhe conforme a distância e ajuste automático em aparelho fraco. Lista os erros comuns que pesam ou quebram a cena, como mudar estado dentro do useFrame ou esquecer de liberar a memória de objetos criados à mão.

Nas palavras de quem fez

Quando usar

• Mostrar um produto em 3D que o cliente gira e examina na página de vendas
• Montar um configurador em que a pessoa troca cor ou material e vê na hora
• Fazer um portfólio ou uma landing com animação 3D que acompanha a rolagem
• Criar um joguinho ou uma visualização de dados em 3D dentro de um app React
• Deixar leve uma cena 3D que está travando no celular

Depois de instalar, é só pedir assim

• Coloca o modelo 3D do tênis (tenis.glb) no topo da página, girando devagar, e deixa o cliente arrastar pra ver de todos os lados
• Cria uma seção em 3D que vai se mexendo conforme a pessoa rola a página
• Essa cena 3D tá travando no celular, otimiza pra rodar liso

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas