Using External Assets In the Playground

Sometimes you might want to load your own assets into the Playground. If your reason for doing so is 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 because your question will be more understandable, and few people want to work through long sections of code. Using the existing assets will also ensure that they remain reachable and that the playgrounds you create will still be a useful resource in the future. However, if you still wish to use your own assets, this page describes ways to do so.

Any site hosting your 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 at https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("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

• (optional) 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.

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("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:

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("https://yourpages.gitlab.io/yourScene/myFile.babylon", scene);

From dropbox.com

Dropbox can be used both for Playground debugging and for 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 the URL with dl, and also remove ?dl=0 at the end if this is the only argument
• there may also be an rlkey argument included that 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 that 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:

import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
ImportMeshAsync("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

import { Texture } from "@babylonjs/core/Materials/Textures/texture";
var texture = new Texture("https://i.imgur.com/yn98ktz.png", scene);

Embedded assets

You can make a raw text copy and paste of your assets, such as 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.

import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";
    var mymodel = {
        [...]
    };

    var json = JSON.stringify(mymodel);
    var blob = new Blob([json]);
    var url = URL.createObjectURL(blob);

    AppendSceneAsync(url, scene, {
        pluginExtension: ".gltf"
    }).then(function() {
        scene.createDefaultCameraOrLight(true, true, true),
        scene.createDefaultEnvironment();
    });

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 Meshes Library

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

The Texture Library

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