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
byhttps://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:
Loading Assets From The Babylon.js Meshes LibraryFrom 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 bydl
, 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 thedl=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 norlkey
parameter orhttps://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 addi.
in front ofimgur.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.
