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.

CORS Compliance

Any site hosting you assets must be CORS compliant and use the secure https protocol. For example, IMGUR can be used for textures and for Javascript.

For model files 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

This becomes the URL address to the folder containing your file for use in BABYLON.SceneLoader for example.

Here is how the example path to myFile.babylon would look like:

Examples of External Assets

Using the links to textures and models is straightforward

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;

Further Reading

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