how fix this error:Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')

Question

I am creating a website loading gltf 3d models.I want to load more models using loop.

const loader = new GLTFLoader()
//.setPath( 'models/gltf/DamagedHelmet/glTF/' );
      .setPath( 'resources/' );
const resourceData = ["Learning Bee1","Learning Bee2","Learning Bee3"];
//const l = resourceData.length;

for(let i=0; i<resourceData.length;i++){
    let oResource = resourceData[i];
    let sModelName = oResource + ".gltf";
    loader.load( sModelName, function ( gltf ) {

        gltf.scene.traverse( function ( child ) {

            if ( child.isMesh ) {

                roughnessMipmapper.generateMipmaps( child.material );

            }

        });
    });

    scene.add( gltf.scene );

    roughnessMipmapper.dispose();

    render();

}

});

When I run this,shown below error.how fix this?

three.module.js:38723 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at three.module.js:38723

Answer 1

Your code indentation is a bit sloppy, and it's making you commit mistakes that could be avoided with cleaner code.

1. You're calling gltf.scene outside of the brackets, where it doesn't exist:

loader.load( sModelName, function ( gltf ) {
    // gltf exists here
});

// gltf does not exist here
scene.add( gltf.scene );

2. You dispose the roughnessMipmapper before using it. Keep in mind that the callback function in the loader takes some time to be executed, since it's waiting to finish loading your asset.

loader.load( sModelName, function ( gltf ) {
    // 2. This happens later, after assets load
    roughnessMipmapper.generateMipmaps( child.material );
});

// 1. This gets called first
roughnessMipmapper.dispose();