Load local GLTF fails

Questions
1

newbie question.
I am hacking around the GLTF load sample,
https://www.babylonjs-playground.com/#PN1NNI#1

I tried pulling the GLTF file locally, and changed the https://models.babylonjs.com/ to the path C:/foo/ where I have Alien.glb

I get a CORs error?
babylon.js:16 Access to XMLHttpRequest from origin ‘null’ has been blocked by CORS policy
and
Cannot read property ‘length’ of null
but, sandbox neatly loads the same GLTF file. any ideas?

2

Hi Ivan_DeWolf,

First of all, welcome!

To clarify, when you say you changed the address to the path C:/foo/, did you use file protocol string? To make an XMLHttpRequest for a local file you need to express its location as something like, file:///C:/foo. Without that file:// protocol specifier, I think XMLHttpRequest will usually assume HTTP.

But once you make that change you’ll probably still run afoul of CORs policy because the browser isn’t actually allowed to make arbitrary XMLHttpRequests for files on your local system; this is a security measure. The reason the Sandbox can load it is because (unless I’m guessing incorrectly) you specifically gave the browser permission to access that GLB either by selecting it using a file picker or by dragging and dropping the file into your browser window. Either one of those actions gives the browser permission to access the file(s) in question, but I don’t think it uses an XMLHttpRequest even then.

I found this StackOverflow question/answer which shows a pretty self-contained example of how to do drag-and-drop into a browser window. I don’t know if that’ll work for your use case, but if nothing else it’s a cool example to look at. :smile:

1 Like
3

hrm. so, it’s not possible to have a dir with .html, .js, and .glb and simply click the HTML and it opens a 3d model in chrome? drat. I’ll have to double click and then drag-and-drop the .glb? awr.

I really wanted to dump my scene as .glb, and then allow a user to simply open it. I guess if I put it on the web so I can get HTTPS access to the file…

4

This requires a local webserver.

5

I wound up stepping it up a notch, and simply got a URL and host. This is my first time doing anything on the web, but I work as a software engineer, so I learn fast.
I’m still working on it, but, this is the address as of today (april 8 2019)
http://320swall.com/

2 Likes
6

You can load your file from your computer with a usual html input type file or drag and drop, then access the file in the event target. Its type is File. You do not need a server.
According to babylonjs docs you can use SceneLoader's Append or Load etc. methods to append models to your scene or load scenes for your engine which replaces everything loaded before, repectively.

Although docs say url argument can also be a File besides being a string, what works is not a File but a string which is ObjectURL for that File. You can create a object url for a file (or blob, another stroy nevermind here) with window.URL.createObjectURL method in browser with javascript.

 /* Append to Scene from File Input */
          const modelLoadInput = document.getElementById("model-load");
          
          modelLoadInput.addEventListener("change", (event) => {
    	  let file = event.target.files[0];

    	  var url = URL.createObjectURL(file)
    	  BABYLON.SceneLoader.Append("", url, scene, function () {
                  scene.createDefaultCamera(true, true, true);
    	  }, undefined, undefined, ".glb");
          });
          /* END Append to Scene from File Input */

I do not know if a data url works fine too and if data url and an object utl is same thing.
the rootURL argument should be “”.
For drag and drop you may need to look at another property of the event object.
Change the last argument and thing in callback to your liking. Also later consider revoking object url when needed too.
Ciao

7

Hello and welcome!!
you can check how we do the drag n drop here: