title: Three.js - Map multiple images to a sphere and control each one
body: <p>I have a 3D sphere that I want to map an array of images onto, and I want to be able to control each individual image i.e. fading out/in each image independently. I'll provide an example image of what I'm trying to achieve as I feel like that's the best way to explain it.</p>
  
  <p><a href="https://i.stack.imgur.com/25olS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/25olS.jpg" alt="enter image description here"></a></p>
  
  <p>So as you can see above, 8 images per column and 16(?) per row.</p>
  
  <p>I have been able to recreate the above image by simply mapping that image to a <code>SphereGeometry</code>, however I would like to be able to dynamically swap out images, and fade them in at different times.</p>
  
  <p><strong>What I've tried so far / My ideas:</strong></p>
  
  <ul>
  <li><p>I tried pushing 8 test images to an array and using that as the material map, and then looping through each face of the <code>SphereGeometry</code> and assigning a material index of 1 through 8 and then resetting after every 8 using modulo, but that didn't work:</p>
  
  <pre><code>function createGlobe() {
  
      var geomGlobe = new THREE.SphereGeometry(40, 32, 16);
  
      var l = geomGlobe.faces.length;
  
      imageArray.push(new THREE.MeshBasicMaterial({map: texture1}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture2}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture3}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture4}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture5}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture6}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture7}));
      imageArray.push(new THREE.MeshBasicMaterial({map: texture8}));
  
      for (var i = 0; i &lt; l; i++) {
          geomGlobe.faces[i].materialIndex = i % 8;
      }
  
      Globe = new THREE.Mesh(geomGlobe, imageArray);
  
      scene.add(Globe);
  }
  </code></pre></li>
  <li><p>I think I need to count every 4 or 8 faces and then set the material
  index for each one of those faces to be the same so that they all use
  the same image, but I'm not sure if the faces line up correctly in
  that way.</p></li>
  </ul>
  
  <p><strong>So essentially what I need:</strong></p>
  
  <p>A way to dynamically add images to a sphere in an 8 per column, 16 per row fashion, and the ability to manipulate each one of those images individually.</p>
  
  <p>Any help is very appreciated because I'm very stuck!</p>