Assigning different image texture

  const initializeGalleryImages = async ()=> {
    return Promise.all( 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
            // resource 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 );
     = texture;
     = true;
              met.needsUpdate = true;
              resolve( true )

            // onProgress callback currently not supported

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

Where the problem / question at? :eyes:

1 Like

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.

This may help. :eyes:

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?


1 Like

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.


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