texture is not getting loaded in Three.js

Question

i have the following three.js code:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 65, window.innerWidth/window.innerHeight, .1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement )

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var texture = THREE.ImageUtils.loadTexture( "world_map.jpg" );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00,  map:texture } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 14;

var render = function () {
    requestAnimationFrame( render );
        sphere.rotation.x += .01;
        sphere.rotation.y += .01;
    renderer.render(scene, camera);
};
render();

Since i am completely new to three.js so right know i am able to make this much of code.

Now my problem is that texture is not loading. Actually i want to make a revolving earth by my own.

when i am trying to load the texture it is giving me the following error:

THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( world_map.jpg )

and

three.min.js:556 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///E:/sanmveg/libs/world_map.jpg may not be loaded.

please i am new to so please help me.

Answer 1

Browser can not load data from disc because of security options. Deploy your website on server or change security options. Do you use chrome? Fire fox allow to read data from disc.

Answer 2

You need to have an image that has a square size in the power of two to use this kind of texture, so make sure your images is 2x2, 8x8, 16x16, 32x32, etc..

Answer 3

please try fileReader Object which lets web applications to read the contents of files, and in this case an image, stored on the user's computer.

Hope that you can go to next step from here.

Answer 4

You need to run the website from a server. you can use Chrome Web Server to create local server. Alternatively you can also use node.js server.