I am currently working on a project involving the loading of gltf 3D models on a website. I am looking to dynamically load multiple models using a 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();
}
});
After running this code, I encountered the following error message: "three.module.js:38723 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length'). How can I resolve this issue?