THREE.JS加载STL网格数组 [英] THREE.JS loading an array of STL Meshes
问题描述
因此，我有一个数据库，其中包含一个文件引用列以及对此所需的对子STL文件的任何引用.我可以将一个或两个模型加载到THREE.js查看器中，因此所有这些都可以正常工作，但是当我加载四个或四个以上的数组时，事情开始变得很繁琐，分配的网格ID开始变得有点奇怪，而多个网格得到了相同的ID.因此，由于它可以处理两个文件，所以我知道数组的工作原理，并且可以正确传递数据. 我想知道是否需要调整loader.load方法以等待网格加载和配置.否则我不知道我的问题是什么. 这里的第一部分调用我的createMesh函数，并要求返回一个网格.正如我所说的，这似乎一次可以处理1或2个网格.
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;
}'
我很难解释我的问题，因此，如果您需要更多信息，请询问，我会尽力更好地解释. 另外，我遍历scene.children来检查Id，它适用于两个及以下的网格物体.我开始确信，事情正在发生，并且在创建几何图形之前已分配了ID.
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;
}
推荐答案
下面是一个简单的示例，使用回调函数强制加载程序等待直到上一次加载完成.
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加载STL网格数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
