Bit By Bit Developers

Importing glTF Files

Image showing gltf logo

glTF logo

Intro to glTF

glTF file standard is great for creating rich, animated and textured 3D assets. Let's see how we can import this file type into our application. First of all, download this BoomBox.glb file that you will be using as a local asset. If you have your own file, you can use that as well.



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.

Image showing the menu button to manage your local assets

Button To Manage Local Assets

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

Image showing the button to upload local assets

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.

Image showing the local asset form

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.

Image showing the local asset manager with one file in it

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"

Find the Get local asset file by name component

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.

Image showing how to find load the asset component

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.

Image showing how most basic script of loading glb asset to scene should look like

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.

Image showing imported boombox local asset

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.

Image showing where to find component that enables right handed coordinate system

Force Right Handed Coordinate System

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

Image showing the fixed model when used with right handed coordinate system

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.