javascript-将整个Object3D / Mesh层次结构合并在一起

我正在开发一个动态生成树的项目.目前仅处于原型阶段,因此树枝和树叶只是简单的立方体.该树由多维数据集的层次结构组成,嵌套有旋转和按比例缩小的分支.我需要能够向树中添加更多的分支/叶子,但是可以将其转换为静态树,仅用于渲染目的.

当树太大时,我遇到了一个问题,渲染许多立方体会减慢程序速度.

经过大量研究,我发现了THREE.GeometryUtils.merge()函数,该函数会将树中的所有分支合并为一个对象,该对象的渲染/变换速度比以前快得多.但是我遇到的问题是合并没有考虑所有父变换,仅合并了顶点.

我尝试使用的基本代码如下.我已经尝试将矩阵应用于几何图形和其他一些东西,但是还没有任何正常工作.

var newGeo = new THREE.Geometry();
var newTree = tree.clone(); //Clones the tree so the original does not get altered
newTree.traverse(function(child){
    if(child.parent){
        child.applyMatrix( child.parent.matrixWorld);
    }
    THREE.GeometryUtils.merge(newGeo, child);
});

我为它创建了一个简单的jsFiddle程序：
http://jsfiddle.net/JeYhF/2/
左边的对象是彼此内部作为父对象的4个网格,右边的对象是网格组合.如您所见,组合的每个组件都有自己的变换(y轴平移11个单位,z轴平移PI / 4),但是它们不受父变换的影响.
有问题的函数是MergeTree()函数.该程序对我来说仅适用于chrome.

任何有关如何解决此问题的建议将不胜感激.
谢谢

解决方法:

问题在于合并之前没有计算矩阵世界.因此,所有转换只是身份矩阵.

newTree.traverse(function(child){
    if(child.parent){
        child.updateMatrixWorld();
        child.applyMatrix(child.parent.matrixWorld);    
    }
    THREE.GeometryUtils.merge(newGeo, child);
});

标签：three-js,geometry,hierarchy,javascript,merge
来源： https://codeday.me/bug/20191122/2061019.html