0

I am trying to load a VRML model with three.js, but it seems my code does not work properly, and I cannot display the 3D model on a web page. Is there something wrong in my code?

var loader = new THREE.VRMLLoader();
loader.load('./Bluegg/Bluegg/Bluegg.wrl', function(object){
    alert(object);
    scene.add(object);
});

and the error message says Failed to load file:///C:/Users/ninom/Desktop/takahiro_note/3DJS/Bluegg/Bluegg/Bluegg.wrl: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. What does this message mean? Thank you for taking your time.

Tak
  • 167
  • 1
  • 5
  • 18

1 Answers1

2

From the documentation section on how to run things locally -

If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.

If your page is using a file:// URL, then it is loading from the file system as described above. To fix this, you'll need to run a local server. There are plenty of quick ways to do that mentioned in the docs. One that I like, with Node.js v6+ installed, is:

# first time only
npm install -g serve

# start a local server "hosting" the current directory
serve .
Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
  • Thank you for your comments! I uploaded these files and run online, and then it worked out! thanks for your help. – Tak Apr 09 '18 at 04:25
  • even running on the same server, I'm still getting the "same-origin" issues while running [JavaScript from a VRML Anchor](https://stackoverflow.com/q/60027233/123033) – Dave Everitt Feb 03 '20 at 10:23