使い方ガイドへスキップ
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. 3つの異なる役割

    クリップ、ミキサー、アクションを分けて考えると、有効なモーションデータが目に見えて再生されない理由を説明しやすくなります。

  2. 設計されたトランジション

    クロスフェードと重みにより、状態の切り替えに配慮された視覚的な受け渡しができます。

04 依頼例

絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

関連するthreejs-skillsのディレクトリを、エージェント向けのガイダンスとして使用します。これはThree.jsのランタイムではなく、シーンアセットをインストールするものでもありません。

アップストリームのソースファイル
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation/SKILL.md

動作するThree.jsプロジェクトとレンダラーが必要です。ソースの例は、インストール済みのリリースに照らして確認してください。追加のコントロールやローダーは、選ぶ方法によって異なります。

まず1つの成果物から始める

スキルを実行する前に、このブリーフの範囲、ソース素材、制約を調整してください。

サンプルブリーフ
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