THREE.JS 加载 STL 网格数组

Question

所以，我有一个数据库，其中包含一个文件引用列以及对它所需的子 STL 文件的任何引用。我可以将一个或两个模型加载到 THREE.js 查看器中，因此所有这些都可以正常工作，但是当我加载四个左右的数组时，事情开始变得多毛，分配的网格 ID 开始变得有点奇怪，并且多个网格得到了同一个身份证。因此，由于它适用于两个文件，因此我知道数组的工作方式并且正确传递数据。 我想知道是否需要调整我的 loader.load 方法以等待网格加载和配置。否则我不知道我的问题是什么。 这里的第一部分调用我的 createMesh 函数并要求一个网格作为回报。正如我所说，这似乎一次适用于 1 或 2 个网格。

'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;
        }'

我在解释我的问题时很糟糕，所以如果您需要更多信息，请尽管询问，我可以尝试更好地解释。 此外，我遍历了 scene.children 以检查 Id，它适用于两个及以下的网格。我开始确信，在创建几何之前需要事情正在发生并分配 ID。

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

好的，这似乎有效，但不知道为什么：

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;
            }

Answer 1

这里有一个简单的例子，使用回调来强制加载器等到之前的加载完成。

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