AR view does not show textures correctly with three.js web viewer

[da3ba]

Description

I'm using Three.js to export my scene that contains models with textures as a .glb file, the .glb file is then used in the model-viewer, in the 3d view prior to activating AR the textures are there but once the AR is enabled the model no longer has the textures, it's just a transparent surface in their place. I tried exporting glb files from Blender and they work fine in AR in the model-viewer. I'm testing in iOS.

Code

Here is the code to change the mesh material in Three.js:

if (isURL(uploadedImages[i]))
     {
      texture[i] = textureLoader.load(uploadedImages[i]);
     }
     else{
      texture[i] = textureLoader.load(URL.createObjectURL(uploadedImages[i]));
     }

    } else {
      // Use the fallback texture if uploadedImages[i] is not valid
      texture[i] = textureLoader.load("../assets/yourImageHere.jpg");
    }

    const xPosition = ((i % numberOfRows) *   (paintingsSettingsArray[i].spacing[0]) + paintingsSettingsArray[i].additional[0]);
    const yPosition = (Math.floor(i / numberOfRows) * (paintingsSettingsArray[i].spacing[1]) + paintingsSettingsArray[i].additional[1]) ;

    const material = new THREE.MeshBasicMaterial({ map: texture[i] });

    // Clone the scene and traverse the model to change the texture of material number one
    let frameType = paintingsInputsArray[i].frameType;
    if(frameType == "multi")
    {
      frameType = "frame1";
    }
    const modelFilePath = frameTypeModelMapping[frameType];

    const { scene} = useGLTF(modelFilePath);
    const clonedScene = scene.clone();

    clonedScene.traverse((obj) => {

      if (obj.isMesh ) 
{
        // Assign the new material to each model

        obj.material = material;
        obj.material.map.wrapS = THREE.RepeatWrapping;
        obj.material.map.wrapT = THREE.RepeatWrapping;
        obj.material.needsUpdate = true;
      }

Here is my code to export to glb in Three.js:

   const exporter = new GLTFExporter();
    exporter.parse(
      scene2,
      function (result) {
        saveArrayBuffere(result, "scene.glb");
      },
    // called when there is an error in the generation
    function ( error ) {
      console.error("Error during export:", error);
      //console.log( 'An error happened' );

    }, 
      { binary: true }
    );

Version

Browser Affected

• [x] Chrome
• [x] Safari

OS

• [x] iOS

AR

My issue is when AR is activated, I only tested in iOS

• [x] QuickLook