glTF - Babylon.js Tips集

glTF

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

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

Babylon.jsではモデルを読み込む方法が複数あります。違いについてはこちらを参照ください。

table:Scene Loader 一覧

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) {

const mesh = newMeshes0;

mesh.position.y = 0.5;

});

// 3. BABYLON.SceneLoader.LoadAssetContainer

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

const mesh = container.meshes0;

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) {

task.loadedMeshes0.position.y = 0.5;

};

assetsManager.load();

参考