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.

From github.com

using raw.githubusercontent.com

• ensure that your git repo is set to public
• navigate to your file. We'll take as example https://github.com/BabylonJS/MeshesLibrary/blob/master/PBR_Spheres.glb
• remove /blob/ part
• replace https://github.com by https://raw.githubusercontent.com
• you now have raw access to your file https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb

BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/", "PBR_Spheres.glb", scene);

using rawgit.com

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.

using jsdelivr.com

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 https://github.com/, for example

myGithubUserName/myRepository/commit/2bd79648e08709145cd9575e6679b2ea360f12f6

• replace /commit/ with @

myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6

• add at the front https://cdn.jsdelivr.net/gh/

https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6

• (optionnal) by adding the filename to the end, you now have direct download access

https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6/myFile.babylon

You now have all necessary data to load your meshes.

BABYLON.SceneLoader.ImportMesh("", "https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6", "myFile.babylon", scene);

From our MeshesLibrary repo, using PBR_Spheres.glb:

From Gitlab.com

using GitLab pages

You have to configure your own Gitlab pages.

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

BABYLON.SceneLoader.ImportMesh("", "https://yourpages.gitlab.io/yourScene/", "myFile.babylon", scene);

From dropbox.com

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: https://www.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb?dl=0
• 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 https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb if there was no rlkey parameter or https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb?rlkey=rANdoMGeneR4tedValUe if there is one

It can be used in this way:

BABYLON.SceneLoader.ImportMesh("", "https://dl.dropbox.com/s/rANdoMGeneR4tedLink/", "my-file.glb", scene);

From imgur.com

Imgur could be useful to quickly use custom textures.

• upload your image, here our example: https://imgur.com/a/KhuCTFr
• copy the direct link, here https://imgur.com/yn98ktz
• do a right-click > View image or add i. in front of imgur.com and image extension to the end of url, here https://i.imgur.com/yn98ktz.png
• use this direct access url in your playground

var texture = new BABYLON.Texture("https://i.imgur.com/yn98ktz.png", scene);

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),
        scene.createDefaultEnvironment();
    }, null, null, ".gltf");

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;
document.head.appendChild(s);

var createScene = function() {

    //Scene set up code

    s.onload = function() {
        //any code calling on loaded file code
    }
	
    return scene;
}

Related videos

Further reading

The Texture Library

Learn about the free available textures in the Babylon.js texture library.

The Meshes Library

Learn about the free available meshes in the Babylon.js meshes library.