How to fix my 3D model appearing black and with no texture or material when viewed in AR? Blender settings or code?

Questions
, , , , ,
1

I downloaded various .glb shoe models from sketchfab and all of them ,except for one, appear black when viewed in AR. In blender, the models appear with their correct colour and texture (and material), however when I GLTF export them to my cpanel file manager and view them in AR, they still appear black and without texture. Is there an issue with my code or am I missing a setting in blender before exporting the model?

For the one model that worked, when I copy its texture map to other models, and replace the jpeg files with the correct texture, it displays it in AR. However, even then the model has no detail or texture. I thought it was a lighting issue.

I tried adding different lightings, such as Sun, or area lightings, it had no effect. I tried changing the material to MeshStandardMaterial (saw this advice online as it apparently does not need specific lighting), also had no effect.

I see advice on changing the Room Environment in my code but I’m unsure how to approach that without redoing my whole code. Is there any advice on how I can solve this, or any full codes found on github that work with any glb model and display it correctly in AR?

I have been stuck trying to resolve this for weeks

Below is the lighting and rendering code from my main.js file:

function start(three){
  three.loadingManager.onLoad = function(){
    console.log('INFO in main.js: Everything is loaded');
    _state = _states.running;
  }

  // set tonemapping:
  three.renderer.toneMapping = THREE.ACESFilmicToneMapping;
  three.renderer.outputEncoding = THREE.sRGBEncoding;

  // set lighting:
  if (!_settings.isModelLightMapped){
    const pointLight = new THREE.PointLight(0xffffff, 2);
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
    three.scene.add(pointLight, ambientLight);
  }

  // add a debug cube:
  if (_settings.debugCube){
    const s = 1;
    const cubeGeom = new THREE.BoxGeometry(s,s,s);
    const cubeMesh = new THREE.Mesh(cubeGeom,new THREE.MeshNormalMaterial());
    HandTrackerThreeHelper.add_threeObject(cubeMesh);
  }

  function transform(threeObject){
    threeObject.scale.multiplyScalar(_settings.scale);
    threeObject.position.add(new THREE.Vector3().fromArray(_settings.translation));
  }

  // load the shoes 3D model:
  new THREE.GLTFLoader().load(_settings.shoeRightPath, function(gltf){
    const shoe = gltf.scene;
    transform(shoe);

    // Apply MeshStandardMaterial
    shoe.traverse((node) => {
      if (node.isMesh) {
        node.material = new THREE.MeshStandardMaterial({
          map: node.material.map,
          normalMap: node.material.normalMap,
          roughnessMap: node.material.roughnessMap,
          metalnessMap: node.material.metalnessMap
        });
      }
    });

Please let me know if you need any more information to arrive at a solution.