title: texture is not getting loaded in Three.js
body: <p>i have the following <code>three.js</code> code:</p>
  
  <pre><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();
  </code></pre>
  
  <p>Since i am completely new to <code>three.js</code> so right know i am able to make this much of code.</p>
  
  <p>Now my problem is that texture is not loading. Actually i want to make a revolving earth by my own. </p>
  
  <p>when i am trying to load the texture it is giving me the following error:  </p>
  
  <blockquote>
    <p>THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( world_map.jpg )  </p>
  </blockquote>
  
  <p>and </p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>please i am new to so please help me.</p>