threejs-animation は何をしますか？
Three.jsアニメーション - キーフレームアニメーション、スケルトンアニメーション、モーフターゲット、アニメーションミキシング。オブジェクトのアニメーション化、GLTFアニメーションの再生、プロシージャルモーションの作成、アニメーションのブレンド時に使用します。
概要
このスキルは、Three.jsを使用した3Dアニメーションの実装を支援します。キーフレームアニメーション、スケルトンアニメーション、モーフターゲット、アニメーションミキシングなど、Three.jsの主要なアニメーション機能をカバーしています。
主な機能
- キーフレームアニメーション: 時間経過に伴うプロパティの変化を定義
- スケルトンアニメーション: ボーンとスキンメッシュを使用したキャラクターアニメーション
- モーフターゲット: 形状のブレンドによる滑らかな変形
- アニメーションミキシング: 複数のアニメーションクリップを合成・ブレンド
使用方法
キーフレームアニメーションの作成
// キーフレームトラックの作成
const positionTrack = new THREE.VectorKeyframeTrack(
'.position',
[0, 1, 2],
[0, 0, 0, 10, 0, 0, 0, 0, 0]
);
// アニメーションクリップの作成
const clip = new THREE.AnimationClip('move', 2, [positionTrack]);
GLTFアニメーションの再生
// GLTFローダーでアニメーションを読み込み
const loader = new THREE.GLTFLoader();
loader.load('model.gltf', (gltf) => {
const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
// アニメーションループで更新
function animate() {
requestAnimationFrame(animate);
mixer.update(deltaTime);
renderer.render(scene, camera);
}
});
アニメーションのブレンド
// 複数のアニメーションアクションを作成
const walkAction = mixer.clipAction(walkClip);
const runAction = mixer.clipAction(runClip);
// クロスフェード
walkAction.crossFadeTo(runAction, 0.5);
walkAction.stop();
runAction.play();
注意事項
- アニメーションミキサーはフレームループ内で毎回更新する必要があります
- パフォーマンスに注意し、不要なアニメーションは停止してください
- モーフターゲットは大量の頂点データを消費するため、最適化が必要な場合があります