resources

Using External Assets


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);

Playground example -


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:

Playground example -


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
  • you now have a direct access url: https://dl.dropbox.com/s/rANdoMGeneR4tedLink/my-file.glb

It can be used in this way:

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

Playground example -


From imgur.com

Imgur could be useful to quickly use custom textures.

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

Playground example -


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");

Playground example -


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;
}

Playground example -


Further Reading

Textures Directly Available to the Playground
Meshes Available to Import into the Playground