将整个 Object3D/Mesh 层次结构合并在一起
Merging an entire Object3D/Mesh hierarchy together
我正在做一个动态生成树的项目。它目前仅处于早期原型阶段,因此树枝和叶子只是简单的立方体。树由多维数据集的层次结构组成,嵌套着分支的旋转和缩小。我需要能够向树中添加更多分支/叶子,但可以将其转换为静态树仅用于渲染目的。
当树变得太大时,我遇到了一个问题,渲染了许多多维数据集,减慢了程序的速度。
经过大量的研究,我发现了三个。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() 函数。该程序仅适用于我。
有关如何解决此问题的任何建议将不胜感激。谢谢
问题是矩阵世界在合并之前没有计算。所以变换都只是单位矩阵。
newTree.traverse(function(child){
if(child.parent){
child.updateMatrixWorld();
child.applyMatrix(child.parent.matrixWorld);
}
THREE.GeometryUtils.merge(newGeo, child);
});
相关文章:
- 从json对象聚集数据并创建层次结构
- Html5-使用SVG路径绘制的组织层次结构在左手边被剪裁
- 使用jquery为移动布局更改html层次结构
- 如何在javascript中使用2个一维数组创建层次结构树
- 从d3.js中的csv创建树层次结构
- D3:使用 nest 函数将带有父键的平面数据转换为层次结构
- JSON 层次结构,如何获取元素
- 展平多个嵌套层次结构数组-d3.js
- Kendo UI层次结构DataSource架构不工作
- 用于构建树节点层次结构的javascript库
- 如何在JavaScript中显示注释线程层次结构
- js初学者-如何获得网页中所选内容的html以及整个节点层次结构
- Jquery选择层次结构
- 无法通过jQuery查找来定位层次结构中的对象
- Html5画布,继承层次结构可能导致闪烁
- d3.js-通过csv显示饼图中的层次结构
- 如果其他语句层次结构 JS
- 跨度外部背景控制的层次结构
- 简单的层次结构与jQuery移动嵌套列表+挖空.js
- 将整个 Object3D/Mesh 层次结构合并在一起