title: THREE.js Texture to Sphere with React
body: <p>I am trying to load a flag (gif) texture to a sphere geometry in THREE.js, but the caveat is I am using React to do this.</p>
  
  <pre><code>const textureLoader = new THREE.TextureLoader();
  const flag = getFlagForCountry(flags, x.id),
        texture = textureLoader.load(require(`../assets/images/flags/${flag.name}.gif`));
  
  const mat = new THREE.MeshLambertMaterial({
          transparent: true,
          opacity: .5,
          map: texture
      });
  
  const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 10, 10), mat);
      sphere.overdraw = true;
  </code></pre>
  
  <p>When I remove the <code>map: texture</code> property I am able to see the sphere in the scene, but then when I add back in the texture it is simply a black screen. I know the docs for <code>TextureLoader</code> say <code>url</code> is a string, but I am not getting any errors and in fact I am getting warnings that make it appear like something is working. Has anyone had success loading a texture onto a sphere using <code>require()</code> in React.</p>
  
  <pre><code>THREE.WebGLRenderer: image is not power of two (1181x788). Resized to 1024x512 
  &lt;img crossorigin="anonymous" src="/static/media/Argentina.4c3ff3da.gif"&gt;
  </code></pre>