Using External Assets In the Playground

Sometimes you might want to load you own assets into the playground. Should the reason for doing so be to get help with a feature please think carefully before doing so.

It is very likely that the issue you are struggling with can be isolated and presented in a simplified and more focused form using basic meshes and existing textures and models.

Doing this will lead to quicker answers as your question will be more understandable, since few people want to work through long sections of code. Using the existing assets will also ensure that they remain reachable and the playgrounds you create will still be a useful resource in the future. However should you still wish to use your own assets then this page describes ways of doing so.

Any site hosting you assets must be CORS compliant and use the secure https protocol.



  • ensure that your git repo is set to public
  • navigate to your file. We'll take as example
  • remove /blob/ part
  • replace by
  • you now have raw access to your file
BABYLON.SceneLoader.ImportMesh("", "", "PBR_Spheres.glb", scene);
Using Assets From Github


You were able to use GitHub with a link generated by the RawGit site to ensure correct MIME type. Unfortunately this site has now closed.

Any existing links to files using RawGit can be updated using Raw Git to jsDelivr. Changes should be made to RawGit links before October 2019.


To use jsDelivr with a file:

  • ensure that your git repo is set to public
  • let's say you have a file named myFile.babylon on github, go to that file in your repository and click on the commit number.
  • then in the address bar copy the part after, for example
  • replace /commit/ with @
  • add at the front
  • (optionnal) by adding the filename to the end, you now have direct download access

You now have all necessary data to load your meshes.

BABYLON.SceneLoader.ImportMesh("", "", "myFile.babylon", scene);

From our MeshesLibrary repo, using PBR_Spheres.glb:

Loading Assets From The Babylon.js Meshes Library


using GitLab pages

You have to configure your own Gitlab pages.

When done, just use the direct link in the loader:

BABYLON.SceneLoader.ImportMesh("", "", "myFile.babylon", scene);


Dropbox could be use both for playground debugging and easily sharing assets.

  • upload your file
  • click on Share button
  • generate a public download link, here our example:
  • replace www in url by dl, also remove ?dl=0 at the end if this is the only argument
  • there may also be an rlkey augument included which looks like ?dl=0&rlkey=rANdoMGeneR4tedValUe, this argument needs to stay in the link, even if you remove the dl=0& first argument leaving ?rlkey=rANdoMGeneR4tedValUe
  • you now have a direct access url which will look like if there was no rlkey parameter or if there is one

It can be used in this way:

BABYLON.SceneLoader.ImportMesh("", "", "my-file.glb", scene);
Loading Assets From Dropbox


Imgur could be useful to quickly use custom textures.

var texture = new BABYLON.Texture("", scene);
Loading Assets From Imgur

Embedded assets

You can make a raw text copy-paste of your assets, like the content of a .gltf file.

Note that you need to use Append so you can define the plugin to use as there is no more file extension.

var mymodel = {
var json = JSON.stringify(mymodel);
var blob = new Blob([json]);
var url = URL.createObjectURL(blob);
BABYLON.SceneLoader.Append(url, "", scene, function(scene) {
scene.createDefaultCameraOrLight(true, true, true),
}, null, null, ".gltf");
Loading Embedded Assest

Javascript files

For Javascript files you need to wait for the file to be loaded before attempting to access it.

var url = "LINK ADDRESS";
var s = document.createElement("script");
s.src = url;
var createScene = function() {
//Scene set up code
s.onload = function() {
//any code calling on loaded file code
return scene;
Loading Embeded Assets (javascript)

Related videos

Further reading

The Texture Library
Learn about the free available textures in the Babylon.js texture library.
The Texture Library
The Meshes Library
Learn about the free available meshes in the Babylon.js meshes library.
The Meshes Library