javascripthtml3dbabylonjs

Cannot run files from babylon.js in the browser on my local machine


I am trying to embed 3D models in the browser with Babylon.JS. The code that runs perfectly on the babylon playground will not run on my local machine. I am using this example: https://playground.babylonjs.com/#JUKXQD

I then downloaded the file as a zip and ran index.html in my browser. It shows me a blank purple screen. I have been trying this for a while and it seems to be unable to import code from my local machine. When I build 3D models with the script that displays fine in the browser on my laptop.


Solution

  • Bablyon must download the skull asset into the view however when running a local file you'll run into the CORS request issue:

    Access to XMLHttpRequest at 'file:///C:/Users/user/Downloads/sample/scenes/skull.babylon' 
        from origin 'null' has been blocked by CORS policy: 
    Cross origin requests are only supported for protocol schemes: 
        http, data, chrome, chrome-extension, chrome-untrusted, https.
    babylon.js:16 BJS - [11:28:23]: Unable to load from scenes/skull.babylon: 
        importMesh of undefined from undefined version: undefined, exporter version: 
       undefinedimportMesh has failed JSON parse
    

    Therefore the scene is working, but the download didn't occur.

    To correct this, load a "server" to run the frontend app - such as a python server (or anything of which can serve the index.html)

    Downloads> cd sample
    Downloads\sample> py -m http.server
    
    Serving HTTP on :: port 8000 (http://[::]:8000/) ...
    ::1 - - [19/Oct/2021 11:27:58] "GET / HTTP/1.1" 200 -
    ::1 - - [19/Oct/2021 11:27:59] "GET /scenes/skull.babylon HTTP/1.1" 200 -
    

    Navigate to the address given http://localhost:8000/ and it should work now (You can see the skull asset GET request)