Chapter 22

3-04: 車輪のアニメーション (Wheel Animation)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.03.30に更新

このページの原文: https://doc.babylonjs.com/start/chap3/animation

🚙 3-04: 車輪のアニメーション (Wheel Animation)

まずひとつの車輪にアニメーションをつけてみる

車輪を回転させてみましょう。
車を直立させるために、x 軸を中心に回転させ、車輪 (タイヤ) の円柱が y 軸に平行である必要があります。

新しい Animation オブジェクトを作ります。

const animWheel = new BABYLON.Animation(
    "wheelAnimation", 
    "rotation.y", 
    30, 
    BABYLON.Animation.ANIMATIONTYPE_FLOAT, 
    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);

このそれぞれのパラメータについて。
名前 name、アニメーション化するプロパティ targetProperty、アニメーションの FPS (frames per second, 1 秒あたりのフレーム数) framePerSecondアニメーションタイプアニメーション ループモード (繰り返すなど)、 というパラメータを渡しています。

https://doc.babylonjs.com/typedoc/classes/babylon.animation

これに続いて、フレーム番号でアニメーション化するプロパティの値を設定するキーフレーム配列が続きます。

const wheelKeys = []; 

// キーフレーム (アニメーションキー) が 0 のとき、
// rotation.y に 0 を設定
wheelKeys.push({
    frame: 0,
    value: 0
});

// キーフレームが 30 (30 FPS なので 1 秒後のこと) のとき、
// rotation.y に 2PI (360度) を設定し一回転を表す
wheelKeys.push({
    frame: 30,
    value: 2 * Math.PI
});

最後に、キーフレーム配列をアニメーションにリンクし、アニメーションをメッシュにリンクして開始します。

// キーフレームをセット
animWheel.setKeys(wheelKeys);

//Link this animation to the right back wheel
// このアニメーションを右後ろの車輪にリンクする
wheelRB.animations = [];
wheelRB.animations.push(animWheel);

//Begin animation - object to animate, first frame, last frame and loop if true
// アニメーションを開始する
scene.beginAnimation(wheelRB, 0, 30, true);

https://doc.babylonjs.com/divingDeeper/animation/animation_method

他の車輪も回す

すべての車輪を同じように回転させるため、すべてに同じアニメーションを使用します。

scene.beginAnimation(wheelRF, 0, 30, true);
scene.beginAnimation(wheelLB, 0, 30, true);
scene.beginAnimation(wheelLF, 0, 30, true);

(車の構築で)コードが大量になってきたので、
車をモデルとして保存し、
アイテムとしてインポートしてアニメーション化します。

BABYLON.SceneLoader.ImportMeshAsync("", "url to model car", "car.babylon").then(() =>  {
    const wheelRB = scene.getMeshByName("wheelRB");
    const wheelRF = scene.getMeshByName("wheelRF");
    const wheelLB = scene.getMeshByName("wheelLB");
    const wheelLF = scene.getMeshByName("wheelLF");

    scene.beginAnimation(wheelRB, 0, 30, true);
    scene.beginAnimation(wheelRF, 0, 30, true);
    scene.beginAnimation(wheelLB, 0, 30, true);
    scene.beginAnimation(wheelLF, 0, 30, true);
});

https://playground.babylonjs.com/#KDPAQ9#15

🚙 次

車輪のアニメーションが終わりましたね。
次は車自体を動かし、村に走らせてみましょう。