[SOLVED] How to load VRML models (wrl) with three.js

How to load VRML models (wrl) with three.js

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.

Solution

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 .