Assigning different image texture

[airinterface]

  const initializeGalleryImages = async ()=> {
    return Promise.all( imageMeshList.map(( meshItem: TVMatrial, index:number) => {
      return new Promise( (resolve, reject ) => {
          const loader = new THREE.TextureLoader();
          loader.crossOrigin = 'anonymous';
          const imageIndex = index % images.length 
          const url = images[imageIndex];
          console.log(`index: ${imageIndex} url = ${url}`)
          // load a resource
          loader.load(
            // resource URL
            url,

            // onLoad callback
            function ( tex ) {
              // in this example we create the material when the texture is loaded
              const texture = tex as THREE.Texture
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
              texture.magFilter = THREE.NearestFilter;
              texture.minFilter = THREE.NearestFilter;
              const met =  ( meshItem.material as THREE.MeshStandardMaterial );
              met.map = texture;
              met.map.needsUpdate = true;
              met.needsUpdate = true;
              resolve( true )
            },

            // onProgress callback currently not supported
            undefined,

            // onError callback
            function ( err ) {
              console.error(` error loading ${url} error: ${err}`)
              reject(err)
            }
          );
      })
    }));
  }

[mjurczyk]

Where the problem / question at?

[airinterface]

Thanks for checking. Issues is that although I’m assigning different texture for each
mesh’s material ( TV Screens ) it ends up picking up the last texture for all the material.

[mjurczyk]

This may help.

[airinterface]

Cloning Material did help. Thank you. If possible, could you please let me know why do you need to clone it, so I have deeper understanding?

[mjurczyk]

Models often reuse materials for several meshes / parts of the model, to reduce memory usage.

Ex. in Blender when you assign the same material to two meshes, you aren’t creating several copies of the same material - modifying the material for one mesh will modify it for all meshes using the same material. This also applies when model is loaded in three.js - if material is reused across the model, modifying it in one place will modify all instances of that material. Cloning a material (similarly to duplicating it in Blender) creates a new, separate material that can then have different properties.

[airinterface]

Great to know. Totally reasonable. Thanks for the explanation!