Texture from hard disk not loading in three.js - showing black

问题

I encountered problem on trying to load images from the local machine. If I give a link in internet to a jpeg file it works okay, but if I replace with path from my local machine - the texture is black.

var texture = THREE.ImageUtils.loadTexture( 'http://ewgl.erbix.com/js/nodes2/textures/sun.jpg', {}, function(){ renderer.render(scene, camera); } );
paintMaterial = new THREE.MeshBasicMaterial({map: texture})

So instead of 'http://ewgl.erbix.com/js/nodes2/textures/sun.jpg' if I load the same image from my machine it shows black. I found the same issue discussed at https://github.com/mrdoob/three.js/issues/432 , but still not able to load textures from my machine.

I also tried running chrome as chrome --allow-file-access-from-files, and then opening the link file:///C:/Users/Anubha/Desktop/pencil/pencil.html, but the paint3.jpg even being in the same folder as the js and html showed black.

var texture = THREE.ImageUtils.loadTexture( 'paint3.jpg', {}, function(){ renderer.render(scene, camera); } );
        paintMaterial = new THREE.MeshBasicMaterial({color: 0x3D59AB, map: texture, specular: 0x555555, shininess: 20})

回答1:

This page explains how to load local textures.

来源：https://stackoverflow.com/questions/17122311/texture-from-hard-disk-not-loading-in-three-js-showing-black