javascript - THREE.js - Can't load texture locally

Question

I have a local file in which I try to load texture like this:

var texture = THREE.ImageUtils.loadTexture( 'image.jpg' );
var cubeGeo = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMat = new THREE.MeshBasicMaterial( { map: texture } );
var cube = new THREE.Mesh( cubeGeo, cubeMat );
scene.add( cube );

The image doesn't show (the cube is black). When I move the whole folder to a server, and load it from there, the image is displayed.

My question is, why does it work when the files are on a server and not when they are on my computer? All files have been copied so it is not a problem with missing files. I also tried with absolute path but still no result. Do I have to change some settings on my computer? I am trying this on Windows 7 with Chrome 32.0.1700.76 m (latest version at the time of writing this) and I am using THREE.js r64. No other libraries are used.

Answer 1

Your problem is due to security restrictions.

Run a local server.

For more info, see the three.js wiki article How to Run Things Locally.

three.js r.112