title: Is there a way to swap out the image associated with a ThreeJS mesh without having to destroy mesh object?
body: <p>I have a ThreeJS game that uses a set of cubes as the play pieces.  One face on each of the cube carries a custom image loaded via a specific JPG URL.  When the user starts a new game, I'd like to be able to just swap out the JPG image assigned to one face of each cube.  Is it possible to do that somehow?  Or do I have to completely tear down and rebuild each cube?  I'd like to avoid that of course because my web searching has led me to the conclusion that properly cleaning up a ThreeJS scene and the GPU resources it has encumbered is not a simple matter (including having to free up all references to any part of a mesh or it component pieces).</p>
  
  <p>This code shows how I create the cubes:</p>
  
  <pre><code>function makeCardCube(cardImageUrl, textureBackSide, locX, locY, locZ, width, height) {
      let thickness = 0.01 * width;
      let cubeGeometry = new THREE.BoxBufferGeometry(width, thickness, height);
      let loader = new THREE.TextureLoader();
  
      let materialArray = [
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          // Card face.
          new THREE.MeshBasicMaterial( { map: loader.load(cardImageUrl) } ),
          // Card back side.
          new THREE.MeshBasicMaterial(
              {
                  map: textureBackSide
              }
          ),
  
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
      ];
  
      cube = new THREE.Mesh( cubeGeometry, materialArray );
      cube.position.set(locX, locY, locZ);
      // Flip the card 90 degrees "up" around the X axis so the card faces the camera.
      cube.rotateX(THREE.Math.degToRad(90));
  
      return cube;
  }
  </code></pre>