How can we Load multiple ObjLoader with its own different texture!

It is only Loading Last model which in the array

const texture = new THREE.Texture();
const manager = new THREE.LoadingManager();
const loader = new THREE.ImageLoader(manager);
for (const uploadFiles of data.uploadedThreeDModel) {
  let loadedMaterials = [];
     manager.onLoad = () => {
        if (loadedMaterials.length > 0) {
          const objLoader = new OBJLoader();
          objLoader.setMaterials(loadedMaterials[0]);
          objLoader.load(uploadFiles.url.url, (object) => {
            object.traverse((child) => {
              if (child instanceof THREE.Mesh) {
                child.material =
                  child.material || new THREE.MeshPhongMaterial();
                child.material['map'] = texture;
              }
            });
            object.receiveShadow = true;
            object.castShadow = true;
            object.name = 'Obj-uploadFiles.content.name';
            object.matrixAutoUpdate = true;
            object.updateMatrix();
            scene.add(object);
            meshs.push(object);
            transformControl.attach(object);
          });
        }
      };

      for (let i = 0; i < uploadFiles.arrOfTexture.length; i++) {
        loader.load(uploadFiles.arrOfTexture[i], (img) => {
          if (img) {
            texture.image = img;
            texture.mapping = THREE.UVMapping;
            texture.needsUpdate = true;
          }
        });
      }
      // for multiple mtl files loader
      const mtlLoader = new MTLLoader(manager);
      mtlLoader.load(uploadFiles.mtl.url, (materials) => {
        materials.preload();
        loadedMaterials.push(materials);
      });

}

It’s hard to tell something without debugging but the above line is wrong. You overwrite the onLoad() handler over and over again. So only the last assignment will be valid. It’s probably necessary to use an instance of LoadingManager per model.

1 Like