> Learn how to use external assets in the playground in Babylon.js.

Source: https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets

# 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](https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableTextures) and [models](https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableMeshes).

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](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) and use the secure [HTTPS](https://en.wikipedia.org/wiki/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`

```javascript
BABYLON.ImportMeshAsync("https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb", scene);
```

 - [Playground: Using Assets From Github](https://playground.babylonjs.com/#YIU90M#1416) - Simple example of loading assets from github into the playground.

### using rawgit.com

You were able to use [GitHub](https://github.com/) with a link generated by the **[RawGit](https://rawgit.com/)** 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](https://www.jsdelivr.com/rawgit)**. Changes should be made to **RawGit** links before October 2019.

### using jsdelivr.com

To use **[jsDelivr](https://www.jsdelivr.com)** 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

```javascript
myGithubUserName/myRepository/commit/2bd79648e08709145cd9575e6679b2ea360f12f6
```

- replace `/commit/` with `@`

```javascript
myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6
```

- add at the front `https://cdn.jsdelivr.net/gh/`

```javascript
https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6
```

- _(optional)_ by adding the filename to the end, you now have direct download access

```javascript
https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6/myFile.babylon
```

You now have all necessary data to load your meshes.

```javascript
BABYLON.ImportMeshAsync("https://cdn.jsdelivr.net/gh/myGithubUserName/myRepository@2bd79648e08709145cd9575e6679b2ea360f12f6/myFile.babylon", scene);
```

From our MeshesLibrary repo, [using PBR_Spheres.glb](https://github.com/BabylonJS/MeshesLibrary/commit/fa494961cbe0b8d44854b3cf8aa8268ba211741a):

 - [Playground: Loading Assets From The Babylon.js Meshes Library](https://playground.babylonjs.com/#IX12S2#139) - Simple example showing how to load assets from the Babylon.js meshes library.

## From Gitlab.com

### using GitLab pages

You have to configure your own [Gitlab pages](https://docs.gitlab.com/ee/user/project/pages/).

When done, just use the direct link in the loader:

```javascript
BABYLON.ImportMeshAsync("https://yourpages.gitlab.io/yourScene/myFile.babylon", scene);
```

## From dropbox.com

[Dropbox](https://dropbox.com) 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:

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

 - [Playground: Loading Assets From Dropbox](https://playground.babylonjs.com/#8LFTCH#14) - Simple example of loading assets from dropbox.

## From imgur.com

[Imgur](https://imgur.com) 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

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

 - [Playground: Loading Assets From Imgur](https://playground.babylonjs.com/#UNEWTE) - Simple example of loading assets from imgur.

## 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.

```javascript
    var mymodel = {
        [...]
    };

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

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

 - [Playground: Loading Embedded Asset](https://playground.babylonjs.com/#KEY4S4#93) - Simple example showing how to load embedded assets.

## JavaScript files

For JavaScript files, you need to wait for the file to be loaded before attempting to access it.

```javascript
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: Loading Embedded Assets (JavaScript)](https://playground.babylonjs.com/#WF3VKZ) - Another example of loading embedded assets.

## Videos

- [Using External Assets In the Playground](https://youtu.be/3D6BtdMnnQI)

## Further reading

- [Textures Directly Available to the Playground](https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableTextures)
- [Meshes Available to Import into the Playground](https://doc.babylonjs.com/toolsAndResources/assetLibraries/availableMeshes)