Three.js Animationpor CloudAI-X

Three.js Animation Skill.

Dale a un modelo de personaje o de producto ya cargado una estrategia definida de reproducción y mezcla.

3D
Three.js

Revisión de la fuente · Three.js AnimationSKILL.md

Tarea 3D Produce • Un inventario de clips verificado y un plan de reproducción • Lógica de mixer y acciones para las transiciones • Movimiento procedural o de morph targets vinculado al tiempo de la escena Antes de empezar Un proyecto de Three.js y un renderer en funcionamiento; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Three.js Animation: Combina clips y movimiento procedural

Animación con clips, mixers, acciones, esqueletos y morph targets, con patrones de mezcla y de movimiento procedural.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Three.js Animation se centra en el movimiento dentro de una escena: movimiento procedural, pistas de fotogramas clave, poses esqueléticas y morph targets. Separa el clip de animación almacenado, el mixer que lo avanza y la acción que controla su reproducción.

La mezcla es un caso de uso central. Las acciones con peso y los crossfades ofrecen una transición controlada entre estados como reposo y caminar. Estos patrones de implementación requieren inspeccionar un modelo real; un skill no puede garantizar que un recurso importado incluya el rig, el target o el clip esperados.

Entregables esperados

Un inventario de clips verificado y un plan de reproducción
Lógica de mixer y acciones para las transiciones
Movimiento procedural o de morph targets vinculado al tiempo de la escena

Ver el brief de ejemplo

Del brief a la revisión

01
Inspecciona el modelo
Enumera los nombres de los clips, los huesos y los morph targets antes de elegir una vía de movimiento.
02
Define las reglas de reproducción
Define la velocidad, el bucle, los pesos de las acciones y si un clip terminado debe mantener su última pose.
03
Mezcla y revisa
Avanza el mixer con el delta del fotograma en segundos, no con el tiempo total transcurrido, y luego revisa las transiciones en busca de saltos y actualizaciones activas innecesarias.

02 Cuándo usarlo

Cuándo usarlo

Un proyecto de Three.js y un renderer en funcionamiento; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Buen encaje

Recursos GLTF animadosÚsalo cuando un modelo existente incluye clips que requieren selección y control de reproducción.
Movimiento por capasCombina un movimiento base con una acción aditiva o un ajuste procedural independiente.

Límites que conviene comprobar

No crea rigsLos ejemplos de esqueleto operan sobre mallas con skinning ya existentes; no crean el rig de un personaje que falte.
Las pistas tipadas requieren comprobaciónAdapta las pistas de ejemplo y las rutas de los targets al tipo de propiedad real y a la versión instalada.

Aporta estos datos

Datos del modeloProporciona el recurso y los clips o morph targets conocidos.
Cambios de estadoExplica qué acciones del usuario cambian los estados de movimiento.
Restricciones de reproducciónDefine las expectativas de interrupción, bucle y velocidad.

03 Decisiones importantes

Decisiones importantes

Tres funciones distintas
Separar clip, mixer y acción ayuda a explicar por qué unos datos de movimiento válidos pueden no reproducirse visiblemente.
Transiciones diseñadas
Los crossfades y los pesos dan a los cambios de estado un traspaso visual cuidado.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa el directorio correspondiente de threejs-skills como guía para el agente. No es el runtime de Three.js ni instala recursos de escena.

Archivo fuente original

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

Un proyecto de Three.js y un renderer en funcionamiento; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa threejs-animation para inspeccionar los clips de mi GLB suministrado e implementar una transición de reposo a caminar. No asumas los nombres de los clips. Explica la actualización del mixer y los ajustes de bucle, y luego prueba la vuelta al reposo sin saltos de pose.

Inspecciona el resultado

Comprueba el resultado real según estos criterios observables.

Los nombres de los clips se verifican antes de usarlos.
El mixer avanza y las transiciones se mantienen continuas.
Las animaciones inactivas no conservan actualizaciones innecesarias.

OpenDesign ofrece un espacio de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: CloudAI-X
Repositorio: CloudAI-X/threejs-skills
Archivo del skill: skills/threejs-animation/SKILL.md
Licencia: No confirmada: revisa los términos originales antes de reutilizarlo.
Versión revisada: 2026-10-07 · b1c623076c66

Resumen editorial de la fuente

Animación con clips, mixers, acciones, esqueletos y morph targets, con patrones de mezcla y de movimiento procedural.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no una medida de uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Crea un esqueleto?

No. La fuente opera sobre una malla con skinning existente y sus huesos.

¿Puede animar sin clips importados?

Sí. Incluye movimiento procedural y pistas de fotogramas clave creadas a mano.

¿Qué controla una acción?

La reproducción, la velocidad, el bucle, el peso y la mezcla de un clip a través de su mixer.

OpenDesign

Deja espacio para la próxima iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño