사용 가이드로 건너뛰기
Three.js Animation작성자 CloudAI-X

Three.js Animation 스킬.

불러온 캐릭터 또는 제품 모델에 명확한 재생 및 블렌딩 전략을 부여합니다.

  • 3D
  • Three.js
소스 검토 · Three.js AnimationSKILL.md
작업 3D 결과물 • 확인된 클립 목록과 재생 계획 • 전환을 위한 믹서 및 액션 로직 • 씬 시간에 연결된 프로시저럴 또는 모프 타깃 모션 시작하기 전에 동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

Three.js Animation: 클립과 프로시저럴 모션 블렌딩

클립, 믹서, 액션, 스켈레탈 및 모프 애니메이션과 블렌딩·프로시저럴 모션 패턴을 다룹니다.

소스 기반 워크플로실행 벤치마크가 아님

작업 방식

Three.js Animation은 씬 안의 모션, 즉 프로시저럴 움직임, 키프레임 트랙, 스켈레탈 포즈, 모프 타깃에 집중합니다. 저장된 애니메이션 클립, 이를 진행시키는 믹서, 재생을 제어하는 액션을 구분합니다.

블렌딩은 핵심 활용 사례입니다. 가중치가 적용된 액션과 크로스페이드로 대기와 걷기 같은 상태 사이를 제어된 방식으로 전환할 수 있습니다. 이러한 구현 패턴은 실제 모델 점검이 필요하며, 가져온 에셋에 예상한 리그, 타깃 또는 클립이 있다고 스킬이 보장할 수는 없습니다.

예상 결과물

  • 확인된 클립 목록과 재생 계획
  • 전환을 위한 믹서 및 액션 로직
  • 씬 시간에 연결된 프로시저럴 또는 모프 타깃 모션
예시 브리프 보기

브리프에서 검토까지

  1. 01
    모델 점검

    모션 방식을 고르기 전에 클립 이름, 본, 모프 타깃을 나열합니다.

  2. 02
    재생 규칙 설정

    속도, 반복, 액션 가중치, 클립이 끝난 뒤 마지막 포즈를 유지할지 여부를 정의합니다.

  3. 03
    블렌딩 및 검토

    믹서는 누적 경과 시간이 아니라 초 단위 프레임 델타로 진행시킨 다음, 전환 시 튀는 현상과 불필요한 활성 업데이트가 없는지 확인합니다.

02 활용 상황

사용 시점

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

적합한 경우

  • 애니메이션이 있는 GLTF 에셋기존 모델에 선택하고 재생을 제어해야 할 클립이 들어 있을 때 사용합니다.
  • 레이어드 모션기본 움직임에 애디티브 액션이나 별도의 프로시저럴 조정을 결합합니다.

확인할 한계

  • 리그 생성 불가스켈레탈 예제는 기존 스킨드 메시에서 동작하며, 없는 캐릭터 리그를 만들어 주지는 않습니다.
  • 타입별 트랙은 확인 필요예제 트랙과 타깃 경로를 실제 프로퍼티 타입과 설치된 릴리스에 맞게 조정하세요.

준비할 입력

  • 모델 데이터에셋과 알려진 클립 또는 모프 타깃을 제공하세요.
  • 상태 변경어떤 사용자 동작이 움직임 상태를 전환하는지 설명하세요.
  • 재생 제약중단, 반복, 속도에 대한 기대치를 정하세요.

03 핵심 결정

중요한 결정

  1. 서로 다른 세 가지 역할

    클립, 믹서, 액션을 분리하면 유효한 모션 데이터가 왜 눈에 보이게 재생되지 않을 수 있는지 설명하는 데 도움이 됩니다.

  2. 설계된 전환

    크로스페이드와 가중치는 상태 변경에 세심하게 다듬어진 시각적 연결을 만들어 줍니다.

04 예시 브리프

집중된 브리프 시도

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

관련 threejs-skills 디렉터리를 에이전트 가이드로 사용하세요. Three.js 런타임이 아니며 씬 에셋을 설치하지 않습니다.

업스트림 소스 파일
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation/SKILL.md

동작하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스에 맞는지 확인하세요. 추가 컨트롤과 로더는 선택한 방식에 따라 달라집니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
threejs-animation을 사용해 제공한 GLB의 클립을 점검하고 대기에서 걷기로 가는 전환을 구현하세요. 클립 이름을 가정하지 마세요. 믹서 업데이트와 반복 설정을 설명한 뒤, 포즈가 튀지 않고 대기로 돌아가는지 테스트하세요.

결과 점검

실제 출력이 다음의 관찰 가능한 기준을 충족하는지 확인하세요.

  • 사용 전에 클립 이름을 확인한다.
  • 믹서가 진행되고 전환이 끊김 없이 이어진다.
  • 비활성 애니메이션이 불필요한 업데이트를 유지하지 않는다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 번들로 제공된다거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함된다는 의미가 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
CloudAI-X
라이선스
확인되지 않음 — 재사용 전에 업스트림 약관을 검토하세요.
검토된 스냅샷
2026-10-07 · b1c623076c66
편집 소스 요약
클립, 믹서, 액션, 스켈레탈 및 모프 애니메이션과 블렌딩·프로시저럴 모션 패턴을 다룹니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원문 요약입니다. 저장소 스타는 날짜 기준의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

스켈레톤을 생성하나요?

아니요. 소스는 기존 스킨드 메시와 그 본에서 동작합니다.

가져온 클립 없이도 애니메이션할 수 있나요?

네. 프로시저럴 모션과 직접 작성한 키프레임 트랙이 포함되어 있습니다.

액션은 무엇을 제어하나요?

믹서를 통해 클립의 재생, 속도, 반복, 가중치, 블렌딩을 제어합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation/SKILL.md