glTF

glTF（GL Transmission Format）は3Dモデルやシーンを表現する為のフォーマットです。

https://scrapbox.io/files/62c118a51e82e8001d2b5a26.png

Babylon.jsではモデルを読み込む方法が複数あります。

table:モジュールレベルのメソッド（モダンな方法）

BABYLON.AppendSceneAsync Appendメソッドの非同期版です。

BABYLON.LoadAsync Loadメソッドの非同期版です。

BABYLON.LoadAssetContainerAsync LoadAssetContainerメソッドの非同期版です。

BABYLON.ImportMeshAsync ImportMeshメソッドの非同期版です。

BABYLON.AssetsManager / assetsManager.addMeshTask 複数のアセットを非同期にロードするためのユーティリティです。

code:js

// 1. BABYLON.AppendSceneAsync

BABYLON.AppendSceneAsync(BASE_URL + MODEL_NAME, scene).then(() => {

const mesh = scene.getTransformNodeByName("node0");

mesh.position.y = 0.5;

});

// 2. BABYLON.ImportMeshAsync

BABYLON.ImportMeshAsync(BASE_URL + MODEL_NAME, scene).then((result) => {

mesh.position.y = 0.5;

});

// 3. BABYLON.LoadAssetContainerAsync

BABYLON.LoadAssetContainerAsync(BASE_URL + MODEL_NAME).then((result) => {

mesh.position.y = 0.5;

result.addAllToScene();

});

// 4. BABYLON.AssetsManager / assetsManager.addMeshTask

const assetsManager = new BABYLON.AssetsManager(scene);

const meshTask = assetsManager.addMeshTask("model", "", BASE_URL, MODEL_NAME);

meshTask.onSuccess = function (task) {

};

assetsManager.load();

table:SceneLoader クラスのメソッド（レガシーな方法）

BABYLON.SceneLoader.Append ファイル内のアセットをすべて読み込み、既存のシーンに追加します。

BABYLON.SceneLoader.AppendAsync Appendメソッドの非同期版です。

BABYLON.SceneLoader.Load ファイル内のアセットをすべて読み込み、新しいシーンを作成します。

BABYLON.SceneLoader.LoadAsync Loadメソッドの非同期版です。

BABYLON.SceneLoader.LoadAssetContainer ファイル内のアセットをすべて読み込み、コンテナに格納します。

BABYLON.SceneLoader.LoadAssetContainerAsync LoadAssetContainerメソッドの非同期版です。

BABYLON.SceneLoader.ImportMesh ファイルから指定したメッシュを読み込み、既存のシーンに追加します。

BABYLON.SceneLoader.ImportMeshAsync ImportMeshメソッドの非同期版です。

BABYLON.AssetsManager / assetsManager.addMeshTask 複数のアセットを非同期にロードするためのユーティリティです。

code:js

const MODEL_NAME = "Duck.gltf";

// 1. BABYLON.SceneLoader.Append

BABYLON.SceneLoader.Append(BASE_URL, MODEL_NAME, scene, function (scene) {

const mesh = scene.getTransformNodeByName("node0");

mesh.position.y = 0.5;

});

// 2. BABYLON.SceneLoader.ImportMesh

BABYLON.SceneLoader.ImportMesh("", BASE_URL, MODEL_NAME, scene, function (newMeshes) {

mesh.position.y = 0.5;

});

// 3. BABYLON.SceneLoader.LoadAssetContainer

BABYLON.SceneLoader.LoadAssetContainer(BASE_URL, MODEL_NAME, scene, function (container) {

mesh.position.y = 0.5;

container.addAllToScene();

});

// 4. BABYLON.AssetsManager / assetsManager.addMeshTask

const assetsManager = new BABYLON.AssetsManager(scene);

const meshTask = assetsManager.addMeshTask("model", "", BASE_URL, MODEL_NAME);

meshTask.onSuccess = function (task) {

};

assetsManager.load();

参考