[Babylon.js] 読み込んだGLBの移動、拡大縮小、回転について

はじめに

ImportMeshAsyncで読み込んだGLBの、特にマイナス方向の拡大縮小について少しつまずいたので共有します。
ちなみにImportMeshではなくImportMeshAsyncを使いましょう。

つまずき

GLBの3Dオブジェクトを左右反転したく、全ての3Dオブジェクトに対してscaling.x = -1としたが変化がなかった。（前提として3Dオブジェクトの原点は(0,0,0)）

ここで注意すべきは、GLBの読み込み時に親オブジェクトである__root__が作成され、その中に3Dオブジェクトが内包されるという仕様だ。

そしてGLBの全てのオブジェクトに対して変形を行うと、__root__、__root__直下の3Dオブジェクトそれぞれに対し適用されてしまい、結果として2回スケールマイナス1されて打ち消され効果が成さなかった。

今回は全ての3Dオブジェクトを反転させたいため、__root__のみマイナス1すれば良い。

言われたら簡単なことだが、簡単すぎて気付くのに結構時間かかったし、何なら諦めて反転させてからGLB出力してた。。。
ぼーっとInspector眺めてたらふと気付いた感じ。
プラスのスケールや移動、回転では二重に適用されているものの一応思っている結果が得られている点も気付きにくいポイントである。

改善した書き方

JavaScript

BABYLON.SceneLoader.ImportMeshAsync("", "", "model.glb", scene).then(({ result }) => {
    // このGLBの__root__を取得
    const rootNode = result.find(({ name }) => name === "__root__");
    if (!rootNode) {
        console.warn("'__root__'を取得できませんでした。");
        return;
    }
    
    // __root__のみを変形
    rootNode.position.set(0, 0, 0);
    rootNode.rotation.set(0, 0, 0);
    rootNode.scaling.set(1, 1, 1);
});

余談

ラティス変形ができるらしい。試してみようと思う。
WebGLでこんな事もできるの！と毎回驚かされる。