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
Your code indentation is a bit sloppy, and it's making you commit mistakes that could be avoided with cleaner code.
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 );
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();