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.

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, named say myFile.babylon on github go to that file in your repository and click on the commit number. The in the address bar copy the part after https://github.com/, for example

myGithubUserName/myRepository/commit/2bd79648e08709145cd9575e6679b2ea360f12f6

change the /commit/ part to @

myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6

Add at the front http:s://cdn.jsdelivr.net/gh/

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

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

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

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