Loading OBJ model from local machine with Three.js?

Question

I'm trying to load an OBJ model with Three.js.

At first I tried this:

var loader = new THREE.OBJLoader( );
loader.load( 'chair.obj', function ( object )
{
   scene.add( object );
});

But I got an error saying that cross origin request are only supported in HTTP.

I looked on the internet for help, found this page: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

and tried to run Chrome from cmd line: chrome --allow-file-access-from-files

Still nothing.

Finally I tried using Python's built in Http server. and tried loading like this:

var loader = new THREE.OBJLoader( );
loader.load( 'http://localhost:8000/chair.obj', function ( object )            
{
   scene.add( object );

});

Now the scene loads but the model that I tried to load does not show up. In Chrome Dev tools, I see the following error:

XMLHTTPRequest Could not load.Origin null is not allowed by Access-Control-Allow-Origin.

I have expertise with 3D graphics on the desktop, but I am completely new to JavaScript and internet technology. I'm really excited by Three.js and am really motivated to explore it but I have these kinds of hiccups getting set.

I've tried to look this up on the internet but have not succeeded. I really need help. I'd appreciate any pointers anyone might have on how to get past this.

Thanks

hmm, well, just instead of loading the obj ,navigate your page to the appropriate directory. for example localhost:8000/index.html in your browser. and in the OBJ-Loader, just use "/chair.obj" as the path if the file is in the same directory as your index.html. This should work :) — GuyGood
– GuyGood, Commented Oct 29, 2013 at 9:03

MCSharp · Accepted Answer · 2014-03-03 05:56:17Z

1

This sounds like a Chrome security issue of running three.js locally. Firefox would probably show the model without any additional steps.

To get this working, you need to add this line to the Chrome shortcut target

--allow-file-access-from-files

So it would look something like this on Windows

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

There is more information on this topic here.

edited Mar 3, 2014 at 5:56

answered Oct 29, 2013 at 16:19

MCSharp

1,0681 gold badge14 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading OBJ model from local machine with Three.js?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related