Search code examples
babylonjs

How to reference files in editor?


I added the textures to the editor with texture viewer, they show up under "Files" tab as "MySkyboxTexture_px.png", "MySkyboxTexture_py.png" etc, but how do I reference them in scripts? I.e. what is their path? I tried multiple combinations, e.g. ./textures/MySkyboxTexture, ./MySkyboxTexture etc - nothing works.

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(
    "MySkyboxTexture",  // <--- what do i put here?
    scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]
);

The debugger shows file not found at ...BabylonJS Editor/resources/app.asar/MySkyboxTexture_px.png


Solution

  • You can have two ways to import an image:

    • You just give a local path in your function, the path must start at the root of your app for example :

       -src/
       -index.js
       -assets/
           -file.png
       -style/
           -style.css
      

    Then if you want to import file.png, you just have to give the url : /assets/file.png

    • Another way to give an url is to first import your file as a blob and then create a blob url by doing the following (it can be a remote blob from a server or a local blob) :
    const url = URL.createObjectURL(myImportedBlob);
    

    then use url as a param for your function.