Three.js Animationpor CloudAI-X

Three.js Animation Skill.

Defina uma estratégia de reprodução e blending para um modelo de personagem ou produto já carregado.

3D
Three.js

Revisão da fonte · Three.js AnimationSKILL.md

Tarefa 3D Produz • Um inventário de clipes verificado e um plano de reprodução • Lógica de mixer e actions para transições • Movimento procedural ou por morph targets atrelado ao tempo da cena Antes de começar Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Three.js Animation: Combine Clipes e Movimento Procedural

Animação com clip, mixer, action, esqueleto e morph, com padrões de blending e movimento procedural.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Three.js Animation concentra-se no movimento dentro de uma cena: movimento procedural, keyframe tracks, poses esqueléticas e morph targets. Ela separa o animation clip armazenado, o mixer que o faz avançar e a action que controla sua reprodução.

O blending é um caso de uso central. Actions com pesos e crossfades oferecem uma transição controlada entre estados como parado e caminhando. Esses padrões de implementação exigem uma inspeção real do modelo; uma skill não pode garantir que um asset importado inclua o rig, o target ou o clipe esperado.

Entregas esperadas

Um inventário de clipes verificado e um plano de reprodução
Lógica de mixer e actions para transições
Movimento procedural ou por morph targets atrelado ao tempo da cena

Veja o briefing de exemplo

Do briefing à revisão

01
Inspecione o modelo
Liste nomes de clipes, ossos e morph targets antes de escolher um caminho de movimento.
02
Defina as regras de reprodução
Defina velocidade, loop, pesos das actions e se um clipe finalizado deve manter a última pose.
03
Combine e revise
Avance o mixer com o delta do quadro em segundos, não com o tempo total decorrido, e depois verifique se as transições têm saltos e atualizações ativas desnecessárias.

02 Quando usar

Quando usar

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Bom encaixe

Assets GLTF animadosUse quando um modelo existente traz clipes que precisam de seleção e controle de reprodução.
Movimento em camadasCombine um movimento base com uma action aditiva ou um ajuste procedural separado.

Limites a verificar

Sem criação de rigOs exemplos de esqueleto operam em skinned meshes existentes; eles não criam o rig de um personagem que não tenha um.
Tracks tipadas exigem verificaçãoAdapte as tracks e os caminhos de target dos exemplos ao tipo real da propriedade e à versão instalada.

Traga estas informações

Dados do modeloForneça o asset e os clipes ou morph targets conhecidos.
Mudanças de estadoExplique quais ações do usuário alternam os estados de movimento.
Restrições de reproduçãoDefina as expectativas de interrupção, loop e velocidade.

03 Decisões importantes

Decisões importantes

Três papéis distintos
Separar clip, mixer e action ajuda a explicar por que dados de movimento válidos podem não ser reproduzidos visivelmente.
Transições planejadas
Crossfades e pesos dão às mudanças de estado uma passagem visual bem pensada.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Use o diretório threejs-skills relevante como orientação para o agente. Ele não é o runtime do Three.js e não instala assets de cena.

Arquivo-fonte original

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation/SKILL.md

Um projeto Three.js e um renderer funcionando; verifique os exemplos da fonte na versão instalada. Controles e loaders adicionais dependem do caminho escolhido.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use threejs-animation para inspecionar os clipes do meu GLB fornecido e implementar uma transição de parado para caminhando. Não presuma nomes de clipes. Explique a atualização do mixer e as configurações de loop, depois teste a volta ao estado parado sem salto de pose.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Os nomes dos clipes são verificados antes do uso.
O mixer avança e as transições permanecem contínuas.
Animações inativas não mantêm atualizações desnecessárias.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill vem incluída nem que suas ferramentas externas, credenciais e dependências de software estejam inclusas.

Baixar OpenDesign Leia o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Responsável pela fonte: CloudAI-X
Repositório: CloudAI-X/threejs-skills
Arquivo da skill: skills/threejs-animation/SKILL.md
Licença: Não confirmada — revise os termos originais antes de reutilizar.
Versão revisada: 2026-10-07 · b1c623076c66

Resumo editorial da fonte

Animação com clip, mixer, action, esqueleto e morph, com padrões de blending e movimento procedural.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela cria um esqueleto?

Não. A fonte opera sobre uma skinned mesh existente e seus ossos.

Ela consegue animar sem clipes importados?

Sim. Inclui movimento procedural e keyframe tracks criadas manualmente.

O que uma action controla?

A reprodução, a velocidade, o loop, o peso e o blending de um clipe por meio do mixer.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, material de origem e trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design