➡️

Babylon.jsでアニメーション作成

2023/03/15に公開

JavaScript

Babylon.js

tech

この記事ではBabylon.jsでアニメーションを行った方法についてまとめた記事となります。
この記事のコードを読み込めば以下のようにオブジェクトを動かすことができます。

基本的なモデルの配置や環境構築については別の記事を参照してください。

またこの記事は以下の公式チュートリアルの写経になります。

　　　　#boxのモデルの作成と配置
	let box = BABYLON.MeshBuilder.CreateBox("box", {width: 0.3, height: 0.3, depth: 0.3});
        box.position.x = 0.0;
        box.position.y = 1;
        let boxMaterial = new BABYLON.StandardMaterial("material");
        boxMaterial.diffuseColor = BABYLON.Color3.Random();
        box.material = boxMaterial;

	#アニメーションの設定
        let aniBox = new BABYLON.Animation("boxAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        let boxKeys = [];
        boxKeys.push({
          frame: 0,
          value: -1
        });
        
        boxKeys.push({
          frame: 150,
          value: 1
        });
        
        aniBox.setKeys(boxKeys);
        
        box.animations = [];
        box.animations.push(aniBox);
        
        scene.beginAnimation(box, 0, 150, true);

アニメーションを生成するにはまず
BABYLON.Animation("boxAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
のように記載する

beginAnimationについては以下の通り
scene.beginAnimation(target, from, to);
target - 今回アニメーションをするオブジェクトの名前
from - 開始フレームの情報
to - 終了フレームの情報
なお以下のページには記載されていないが第４引数にtrueをいれることでloopをさせることができる

Discussion