Babylon JS Day 9

Today was all about working with assets. The project that I’m going to work on tomorrow involves several models, textures, and audio files. Today I wanted to learn how to create a scene while loading assets from the server.

I got started by revisiting the scene I made yesterday. I cleaned up the code a little and made a Babylon JS Playground out of it. You can check it out here.

I saved this scene as a .babylon file and added it to my project. This was the first attempt at loading it into my scene. I only needed to load the mesh, not the rest of the scene, so I passed the “stand” value as the name of the mesh.

BABYLON.SceneLoader.ImportMeshAsync("stand", "../assets/scenes/", "terrarium-base.babylon");

Then I shifted my attention to loading some third-party assets. I’ve followed a low poly artist named @quaternius for a few years, and I support them on Patreon. One of the benefits I get is a full zip archive of all their models. I’m going to use a few of these tomorrow so I wanted to learn how to load them into my scene.

I spent a bit of time reading the documentation for importing assets. Two pages provided what I was after.

1. Loading Any File Type has instructions for loading a variety of file types.
2. Asset Manager is an awesome feature that will let me define loading tasks for all my assets at once. I can even provide some code to execute on success.

Below is an example of the asset manager that I created. For now, this loads the .babylon scene file that I mentioned above, along with an .obj (the .mtl file is imported automatically) and a texture atlas. You can see that the onSuccess call for the texture will assign the texture to a material. When the flower task succeeds, I assign a position and the material. At the end of all of this I can the load() method on the asset manager object, right before the scene loads. As far as I can tell, Babylon JS will load all the assets before starting the scene.

  var assetsManager = new BABYLON.AssetsManager(scene);
  var flowerMat = new BABYLON.StandardMaterial("baseMat", scene);

  var textureTask = assetsManager.addTextureTask("image task", "../assets/models/textures/palette_32x32.png");
  textureTask.onSuccess = function (task) {
    flowerMat.diffuseTexture = task.texture;
  };
  var meshTask = assetsManager.addMeshTask("flower task", "", "../assets/models/", "flower.obj");
  meshTask.onSuccess = function (task) {
    task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
    task.loadedMeshes[0].material = flowerMat;
  };
  meshTask.onError = function (task, message, exception) {
    console.log(message, exception);
  };

  var baseTask = assetsManager.addMeshTask("base task", "", "../assets/scenes/", "terrarium-base.babylon");
  baseTask.onSuccess = function (task) {
    // Nothing to do for now
  };
  baseTask.onError = function (task, message, exception) {
    console.log(message, exception);
  };

  assetsManager.load();

I still have a lot to learn about working with assets in a Babylon JS project, but I now have enough knowledge to move forward with my project tomorrow.