BabylonJS-Mesh AssetsManager

assestsmanagerクラスを使用すると、メッシュ、画像、およびバイナリファイルをシーンにロードできます。

構文

var assetsManager = new BABYLON.AssetsManager(scene);

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);

         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

           //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

           //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var assetsManager = new BABYLON.AssetsManager(scene);

            var meshTask = assetsManager.addMeshTask("skull task", "", "scenes/", "skull.babylon");

            meshTask.onSuccess = function (task) {
               task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
            }

           //Move the light with the camera
            scene.registerBeforeRender(function () {
               light.position = camera.position;
            });

            assetsManager.onFinish = function (tasks) {
               engine.runRenderLoop(function () {
                  scene.render();
               });
            };
            assetsManager.load();
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

上記のデモリンクでは、skull.babylonメッシュを使用しています。以下から_skull.babylon_のjsonファイルをダウンロードできます-

skull.babylon

*the* ファイルをscenesフォルダーに保存して、以下に示す *as* 出力を取得します。 *skull.babylon* は、メッシュにプロットされる位置のすべての詳細を含むjsonファイルです。

出力

スカル

説明

assetmanagerの場合、最初に行う必要があるのは、上記と同じオブジェクトを作成することです。

今、あなたは次のようにassetmanagerオブジェクトにタスクを追加することができます-

var meshTask = assetsManager.addMeshTask("skull task", "", "scenes/", "skull.babylon");

上記で作成されたmeshTaskは、onSucessおよびonErrorと呼ばれる2つのコールバックへのアクセスを提供します。

構文

以下は、onSuccessコールバックの構文です-

meshTask.onSuccess = function (task) {
   task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
}

上記の場合、メッシュの位置は成功コールバックで0に変更されます。

画像とtxtファイルをロードするためのデモ

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);

         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

           //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

           //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            var assetsManager = new BABYLON.AssetsManager(scene);

            var imageTask = assetsManager.addImageTask("image_task", "images/balloon.png");
            imageTask.onSuccess = function(task) {
               console.log(task.image.width);
            }

            var textTask = assetsManager.addTextFileTask("text task", "mesh.txt");
            textTask.onSuccess = function(task) {
               console.log(task.text);
            }

            assetsManager.load();
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

_mesh.txt_というファイルを作成し、「This is babylonjs test」というテキストを追加します。上記のデモをブラウザで実行すると、コンソールに、mesh.txtにある画像の幅とテキストが表示されます。

mesh.txtコンテンツの添付– mesh.txt-

This is babylonjs test

シーンのローディングインジケータを表示するには、次を使用します-

trueに設定されている場合、ロードインジケーターが表示されます。無効にするにはfalseに設定します。

assetsManager.useDefaultLoadingScreen = true;

アセット

ローディングインジケータを表示する他の方法もあります-

BABYLON.SceneLoader.ShowLoadingScreen = true;//false to disable it

ロード画面を手動で非表示および表示するには、次を実行します。

engine.displayLoadingUI();
engine.hideLoadingUI();

テキストの読み込みは、loadingUIText：engine.loadingUIText = "text";を使用して制御されます。 engine.loadingUIBackgroundColor = "red"を使用した背景;

Babylonjs-mesh-assetsmanager

目次

BabylonJS-Mesh AssetsManager

構文

Demo

出力

説明

構文

画像とtxtファイルをロードするためのデモ