Babylon.jsで任意の３Dモデルを使用する

本日はBabylon.jsを触っていきます。

昨日hellocubeでキューブを出しました。

今回は任意の３Dモデルを読み込みます。

〇Babylon.jsでGlbを読み込む

今回はglb形式の３Dモデルを使用していきます。

Publicフォルダ内にModelというサブフォルダを作成しました。

今回はペイント3Dで提供されている玉ねぎのモデルを使用していきます。

Onion.glbという名前のモデルをModelフォルダ内に配置します。

　glbモデルを読み込むためにはLoaderが必要です。

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF"; //追加

今回はglbを読み込むためにloaders/glTFをインポートしていますが、objをインポートしたい場合は "@babylonjs/loaders/obj"を使用することで可能です。

モデルを読み込むためにはSceneLoader.ImportMeshAsync()を使用します。

      var glb =SceneLoader.ImportMeshAsync("", "（モデルのパス）", "(File名)");

第一引数に読み込むメッシュ数を配列で、第二引数にモデルのパス、第三引数にモデルのファイル名を指定します。

今回の場合は次のようになります。

      var glb =SceneLoader.ImportMeshAsync("", "/Models/", "Onion.glb");

これにより玉ねぎのモデルが読み込まれました。

今回はglbの中にテクスチャが埋め込まれていたためモデルをロードするだけでテクスチャまできちんと参照されましたが、多くのモデルはモデルを読み込んだ後にメッシュに画像付きのマテリアルをアタッチする必要があります。

これは次のように実装します。

     //マテリアルの作成
      const material = new StandardMaterial("KendamaKing", scene);
      material.diffuseColor = new Color3(1,1,1);
 　//画像の読み込み
     material.diffuseTexture = new Texture("/Models/image01.png", scene);
     var glb =SceneLoader.ImportMeshAsync("", "/Models/", "Onion.glb").then((result)=>{
     //最初の配列のメッシュにマテリアルを適応
       result.meshes[0].material =material;
     });

これはコメント通りですがモデルを読み込む前にマテリアルを作成し、画像を適応しています。モデルを読み込む際にメッシュにこのマテリアルをアタッチすることで画像付きのモデルを実現しています。

以上でモデルを使用できました。