ツリーを動的に生成するプロジェクトに取り組んでいます。現在はプロトタイプの初期段階にあるため、枝と葉は単純な立方体です。ツリーは立方体の階層で構成され、枝の回転と縮小によってネストされます。ツリーに枝/葉を追加できるようにする必要がありますが、レンダリング目的のためだけに静的ツリーに変換できます。
ツリーが大きくなりすぎて、多くの立方体がレンダリングされてプログラムの速度が低下すると、問題が発生します。
多くの調査を行った後、THREE.GeometryUtils.merge() 関数を発見しました。この関数は、ツリー内のすべてのブランチを 1 つのオブジェクトにマージし、以前よりもはるかに高速にレンダリング/変換できるようにします。ただし、私が遭遇している問題は、マージがすべての親変換を考慮せず、頂点のみをマージすることです。
私が動作させようとしている基本的なコードは次のとおりです。マトリックスをジオメトリに適用したり、他のいくつかのことを試したりしましたが、まだ適切に機能していません。
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 プログラムを作成しまし
た
。ご覧のとおり、組み合わせの各コンポーネントには独自の変換が適用されています (11 単位による y 軸の平行移動と PI/4 による z 軸の回転) が、親の変換の影響を受けません。問題の関数は MergeTree() 関数です。このプログラムは、私にとってはクロムでのみ機能します。
この問題を解決する方法についてアドバイスをいただければ幸いです。ありがとう