Loading (and disposing) a sequence of geometry files (ply)

Questions
1

Hi, I’m pretty new here, so please excuse my absolute noob-ness.

I’m doing something that isn’t the “right way” to do it. But the result asks for this method:

I want to load a geometry file (a point cloud in ply format with vertex colors), render it, wait a few milliseconds and then load the next file in the sequence while losing the first one … and so on. 15fps, many files, all within max 130KB so possibly we can get away with the loading times.

So far there were two approaches.

  1. The for Loop
const model = new PLYLoader();
for (var i = 1; i <= 9; i = i + 1) {

	model.load( './models/ply/name' + i + '.ply', function ( geometry ) {

		geometry.computeVertexNormals();

		// const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );

		const material = new THREE.PointsMaterial( { size: 0.015, vertexColors: true } );
		const points = new THREE.Points( geometry, material );
		scene.add( points );
		// var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x000000, shininess: 50, vertexColors: THREE.VertexColors} );
		// const mesh = new THREE.Mesh( geometry, material );

		points.position.y = 0;
		points.position.z = 0;
		points.rotation.x = 0;
		points.scale.multiplyScalar( 0.5 );

		points.castShadow = true;
		points.receiveShadow = true;

		scene.add ( points );
		

	} );
	
}

It loads al the pointclouds at once and just displays them. So this would need some delay in loading which I couldn’t realize using using

setTimeout(function() {
    scene.add ( points );
}, 3000);

And the second approach found on some other site and probably copy pasted the wrong way, because it doesn’t display the geometry files at all

    			var remainingUrls = [ './model1.ply', './model2.ply', './model3.ply', './model4.ply', './model5.ply', ];

				function loadNext() {
  				// get the first of the remaining urls and remove it from the array
  				var nextUrl = remainingUrls.shift();

  					if (!nextUrl) {
    				// when there is no next url, we are done here
    				return;
  					}

      
				const model = new PLYLoader();
					//for (var i = 1; i <= 9; i = i + 1)
   					{

					model.load( nextUrl, function ( geometry ) 

					{

						geometry.computeVertexNormals();

						// const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
					
						const material = new THREE.PointsMaterial( { size: 0.015, vertexColors: true } );
						const points = new THREE.Points( geometry, material );
						scene.add( points );
						// var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x000000, shininess: 50, vertexColors: THREE.VertexColors} );
						// const mesh = new THREE.Mesh( geometry, material );

						points.position.y = 0;
						points.position.z = 0;
						points.rotation.x = 0;
						points.scale.multiplyScalar( 0.5 );

						points.castShadow = true;
						points.receiveShadow = true;

						scene.add( points );

					// now it's time to start loading the next file
   				 	loadNext();
  				});
			}

					// start loading the whole list
					loadNext();


			};

(I promise to credit the creators of all that code properly in the final version :wink:

Thank You for any help !