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