合并整个Object3D/Mesh层级结构

Question

我正在开发一个动态生成树的项目。目前只处于早期原型阶段，因此树枝和叶子只是简单的立方体。树由立方体的层次结构组成，嵌套着树枝的旋转和缩小。我需要能够向树上添加更多的树枝/叶子，但可以将其转换为静态树以便于渲染。

当树变得太大时，渲染许多立方体会使程序减慢速度，我遇到了一个问题。

经过大量的研究，我发现了 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中使用此程序。

如果您有解决此问题的建议，将不胜感激。 谢谢

- calrk

Answer 1

问题在于矩阵世界在合并之前没有被计算。因此，所有的变换都只是单位矩阵。

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

- calrk