3

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

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

经过大量研究后，我发现了 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。

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

4

1 回答 1

3

问题是在合并之前没有计算矩阵世界。所以变换都只是单位矩阵。

newTree.traverse(function(child){
    if(child.parent){
        child.updateMatrixWorld();
        child.applyMatrix(child.parent.matrixWorld);    
    }
    THREE.GeometryUtils.merge(newGeo, child);
});
于 2013-10-31T05:53:28.740 回答