Importing glTF Files

Importing

Next you will need to open up our Application. Then click the small folder like button called "Assets" seen in the picture below to open up the local asset manager.

Button To Manage Local Assets

Now you should be able to click the "Upload Local Asset" button as seen in the next picture.

Button To Upload Local Assets

This will activate an asset creation part of the modal. Here you need to enter the name of the asset by typing "BoomBox" into the input. Then click the "Choose files" button. File navigator will pop up and you will need to navigate to your Downloads folder where the BoomBox.glb file was saved.

Form For Local Asset

Now you should be seeing BoomBox.glb in the modal, which indicates that you've chosen the file correctly. Hit "Upload" button which will return you to the list of all your Local Assets. In this list you can delete and upload more assets if you need to or download the files of your local assets from the browser to your file system.

Local Asset Manager With Created BoomBox Asset

If you see the BoomBox asset in the list, you can close the modal by clicking anywhere on its background canvas.

Using Local Asset In The Script

Now we will be importing the model we've just uploaded to the browser memory into the scene. Follow this category path to get to your component. "IO" -> "Asset" -> "Get local asset file by name"

Finding the "Get local asset file by name" component

After you get the component into the scene, please type "BoomBox" into the text input of that component as shown in the next picture. Also in order to draw the imported asset we will use a slightly different component of "Babylon" category that is capable of interpreting GLB files. Navigate to "Babylon" -> "IO" -> "Load asset" as seen in the picture below. Notice that BoomBox was typed into the component that gets the file from local assets.

Load Asset Component

Now you need to put "Get local asset" component as input to "Load asset" component. Next screenshot shows how your script should look like now.

Loading Local Asset To 3D Scene Script

After your script is looking like the one in the top picture, proceed to "Run The Code" and "Swap The Canvas" to inspect the result. It should look similar to what you see in the next screenshot.

Loaded Local Asset Of BoomBox

You probably already noticed that materials are mirrored on this model. In fact the whole model is mirrored. We might not have noticed that if not for text materials which are obviously reversed. This is because glTF and GLB files use the right handed coordinate system and we use the left hand coordinate system by default. Do not worry, we will fix that in a moment.

In order to use the right handed system we need a special component. Navigate to "Babylon" -> "Scene" -> "Use right handed system" component and place it in your script before the loading components and click the "Run The Code" button that you are already familiar with. Click the "Swap The Canvas" button and inspect the result.

Force Right Handed Coordinate System

It should look similar to the picture seen below. Notice that text is now readable and model seems better.

Resulting Fixed Model

This is it, this short script uses our uploaded local asset, which contains geometry and quite complex materials and textures. If you would like to keep using a left handed coordinate system with glTF files, consider mirroring your models before export takes place in software like Blender or you will need to use our components to transform such models and mirror them in Bit by bit developers application.