THREE.JS loading an array of STL Meshes

2019-09-06 00:26发布

问题:

So, I have a data base which contains a file reference column and any references to sub STL files that are needed for it. I can load one or two models into a THREE.js viewer so all of that works without issue but when I load an array of four or so things start getting hairy and the assigned Mesh Id's start to get a bit odd and multiple mesh's get the same ID. So since it works with two files I know the array kind of works and is passing data correctly. I was wondering if my loader.load method needs to be tweaked to wait for the mesh to load and configure. Otherwise I have no idea what my problem is. The first part here calls my createMesh function and asks for a mesh in return. As I said this seems to work for 1 or 2 meshes at a time.

'if (indSTLCol.length>1 ){ for (item in indSTLCol){
                    getTheName="3dfiles\\"+fRSplit[parseInt(this.id)];
                    getTheName = getTheName.substring(0,getTheName.length-7);
                    getTheName=getTheName+indSTLCol[item]+".stl";
                    meshArr[item]=createMesh(getTheName);
                }

        }
        else{
            getTheName="3dfiles\\"+fRSplit[parseInt(this.id)];
            console.log("in ind collection"+ getTheName);
            console.log ("Added to Array"+meshArr[0].id);
            meshArr[0]=createMesh(getTheName);
         }

        console.log("BREAK");
        divId=this.id;

        fSizeX=700;
        fSizeY=500;
    }'
This part creates the mesh:
'function createMesh(getTheName){
            loader = new THREE.STLLoader();
            loader.addEventListener( 'load', function ( event ) {

                 geometry = event.content;
                 mesh = new THREE.Mesh( geometry, material );
                mesh.position.set( 0, 0, 0 );
                mesh.rotation.set( - Math.PI / 2, 0, 0 );
                mesh.scale.set( 2, 2, 2 );

                mesh.castShadow = true;
                mesh.receiveShadow = true; 
                mesh.id=getTheName;
                scene.add(mesh);
                /*  for (a in scene.children){
                    console.log("Child Name "+ scene.children[a].id+" " + a);
                } */ 
                //console.log("Mesh ID# " + mesh.id+" Mesh info: " + mesh);
                return mesh;
            } );

            mesh=loader.load( getTheName ); 
            return mesh;
        }'

I am terrible at explaining my issues so if you need more info please just ask and I can try to explain better. Also, I iterated through scene.children to check for Id's and it works for two and below meshes. I am starting to be convinced that it takes things are happening and ID's are being assigned before the geometry is being created.

function createMeshArr(){
            for (var a in scene.children){
                if (scene.children[a] instanceof THREE.Mesh){
                    smeshArr[a]=scene.children[a];
                }   
            }
            return smeshArr;

Ok so this seemed to work and not sure why:

function createMesh(getTheNames){

                loader = new THREE.STLLoader();
                mesh=loader.load( getTheNames);
                loader.addEventListener( 'load', function ( event ) {
                    var material =  new THREE.MeshLambertMaterial({color: 'blue' });
                    var geometry = event.content;
                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.set( 0, 0, 0 );
                    mesh.rotation.set( - Math.PI / 2, 0, 0 );
                    mesh.scale.set( 2, 2, 2 );

                    mesh.castShadow = true;
                    mesh.receiveShadow = true; 
                    mesh.id=getTheNames;
                    scene.add(mesh);
                    return mesh;
                } ); 

                return mesh;
            }

回答1:

Here is a simple example to use the callback to force the loader to wait until the previous load is completed.

var callback = function ( geometry ) { 
    var myMesh = new THREE.Mesh( geometry, basicMat );
    meshArray.push(myMesh);
    myScene.add( myMesh );
    i++;
    if (i < numberOfMeshesToLoad)  // put the next load in the callback
        myLoader.load( filename[i], callback ) ;
};

i = 0;

myLoader.load( filename[i], callback ); //initial loader call


标签: three.js mesh