I recently started working with/learning ThreeJS, and I've been having trouble loading a texture onto a planeMesh. This is what I have right now for the plane:

var characterTexture = new THREE.ImageUtils.loadTexture( 'images/hunter_1.png' );
    var geometry = new THREE.PlaneGeometry( 100, 100, 32);
    var material = new THREE.MeshLambertMaterial( { map: characterTexture, side : THREE.DoubleSide} );
    character = new THREE.Mesh( geometry, material );

Whenever I run this though, I am given this error:

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/name/Desktop/images/hunter_1.png may not be loaded.(…)

I have seen quite a few answers to similar questions, but they have all been Uncaught SecurityErrors instead of DOMExceptions and I'm not clear on if the two are similar. If anyone has any ideas of what I've done wrong, please tell! Thanks.

I recently started working with/learning ThreeJS, and I've been having trouble loading a texture onto a planeMesh. This is what I have right now for the plane:

var characterTexture = new THREE.ImageUtils.loadTexture( 'images/hunter_1.png' );
    var geometry = new THREE.PlaneGeometry( 100, 100, 32);
    var material = new THREE.MeshLambertMaterial( { map: characterTexture, side : THREE.DoubleSide} );
    character = new THREE.Mesh( geometry, material );

Whenever I run this though, I am given this error:

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/name/Desktop/images/hunter_1.png may not be loaded.(…)

I have seen quite a few answers to similar questions, but they have all been Uncaught SecurityErrors instead of DOMExceptions and I'm not clear on if the two are similar. If anyone has any ideas of what I've done wrong, please tell! Thanks.

• javascript

1 Answer 1

For security reasons it's not possible to run this from your localhost, simply upload it to a web server and your issue should be resolved.

Hope this helps!