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) => {
const mesh = result.meshes0; mesh.position.y = 0.5;
});
// 3. BABYLON.LoadAssetContainerAsync
BABYLON.LoadAssetContainerAsync(BASE_URL + MODEL_NAME).then((result) => {
const mesh = result.meshes0; 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) {
task.loadedMeshes0.position.y = 0.5; };
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) {
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();
参考