Getting Started - Chapter 1 - Working with Models

The playgrounds on this page contain models (in this example, houses) which can be positioned, rotated and scaled. Once the basics (such as importing a model and putting your project on a web page) have been introduced, we will give you details on how to accomplish this with Babylon.js.

Importing a Scene or Model

When you add a model to a scene, you are loading it through the browser. As you likely already know, loading anything from a website is an asynchronous function. Therefore, before you can do anything with your models, you must first ensure they have been loaded successfully. You can do this using the ImportMeshAsync method of the SceneLoader, as follows:

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync(folder_path + file_name, scene, optionalOptions);

The scene parameter is optional and will default to the current scene. In the options you can specify which meshes to load:

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("/relative path/myFile"); //Empty string loads all meshes
ImportMeshAsync("/relative path/myFile", scene, { meshNames: "model1" }); //Name of the model loads one model
ImportMeshAsync("/relative path/myFile", scene, { meshNames: ["model1", "model2"] }); //Array of model names

Note that any of the calls above will only load the models; however, you will not be able to manipulate them in any way. Internally, a Promise object is set up and returned, but the above code does nothing with the result of that Promise. Examples of this are in the following two playgrounds, which only import the named models.

Therefore, to act on the result and manipulate the objects, we follow the Promise with the then method to call a function with the result of the Promise. The result is an object containing, among other things, the property meshes, which contains all the loaded models. We can use this array, or the models' names, to manipulate each mesh.

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("/relative path/myFile").then((result) => {
    result.meshes[1].position.x = 20;
    const myMesh1 = scene.getMeshByName("myMesh_1");
    myMesh1.rotation.y = Math.PI / 2;
});

The following playground imports all models and changes their positions:

Moving On

Having a working scene in the playground is one thing, but you will ultimately want your game or application to run on your own website. In the next section, we will provide an HTML template to do just this.

Warning

A clear point: different file types export models differently.

A less obvious point: different file types may change when imported into Babylon.js.

You need to be aware of how the type you are using affects the outcome. It is not appropriate at this stage to go into detail, but the following examples indicate why this is important.

1. Some software saves all meshes with a rotationQuaternion set, and you cannot then use the rotation methods unless you first do one of the following:

myMesh.rotationQuaternion = null; //Any version of Babylon.js

import { Vector3 } from "@babylonjs/core/Maths/math.vector";
myMesh.rotation = Vector3.Zero(); //babylon.js versions > 4.00

2. The following two types were exported from exactly the same scene and imported into Babylon.js:

.babylon A model is stored as one mesh, i.e. each house body and roof forms one house.

detached_house
ground
semi_house

.glb A _root_ node is added to hold all the models and model parts, which are stored as sub-meshes.

_root_
    detached_house
        detached_house primitive0
        detached_house primitive1
    ground
    semi_house
        semi_house primitive0
        semi_house primitive1