Question

所以，我有一个数据库，其中包含一个文件引用列以及对它所需的子STL文件的任何引用。我可以将一个或两个模型加载到THREE.js查看器中，这样所有这些都可以正常工作但是当我加载一个四个左右的数组时，事情开始变得毛茸茸，分配的网格ID开始有点奇怪了多个网格获得相同的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＆＃39; s它适用于两个和下面的网格。我开始相信，在创建几何体之前，事情正在发生并且正在分配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

THREE.JS加载一系列STL网格

1 个答案: