Javascript 如何通过计算3JS中的新面来改进合并

Javascript 如何通过计算3JS中的新面来改进合并,javascript,merge,three.js,face,threecsg,Javascript,Merge,Three.js,Face,Threecsg,我学了4个月的ThreeJS,并将其应用到个人项目中。 昨天,我用三个JS几何图形和一些CSG技巧建立了一个据点。结果看起来不错,但我喜欢精度,我的几何体有点乱(主要是在CSG减法之后) [问题]我想知道是否有一种已知的方法可以合并两个几何体并用新的计算面替换其旧面?这里有一个例子来说明我的问题 [编辑:用第四个和第五个网格更新小提琴] // FIGURE 1 : Basic merged geometry var figure1 = new THREE.Geometry(); figure1.

我学了4个月的ThreeJS,并将其应用到个人项目中。 昨天,我用三个JS几何图形和一些CSG技巧建立了一个据点。结果看起来不错,但我喜欢精度,我的几何体有点乱(主要是在CSG减法之后)

[问题]我想知道是否有一种已知的方法可以合并两个几何体并用新的计算面替换其旧面?这里有一个例子来说明我的问题

[编辑:用第四个和第五个网格更新小提琴]

// FIGURE 1 : Basic merged geometry
var figure1 = new THREE.Geometry();
figure1.merge(box1Geometry);
figure1.merge(box2Geometry);
figure1.merge(box3Geometry);
figure1.computeFaceNormals();
figure1.computeVertexNormals();

var mesh = new THREE.Mesh(figure1, material);
scene.add(mesh);

// FIGURE 2 : Merged geometry with merged vertices
var figure2 = figure1.clone();
figure2.mergeVertices();
figure2.computeFaceNormals();
figure2.computeVertexNormals();

mesh = new THREE.Mesh(figure2, material);

// FIGURE 3 : Expected merged geometry (less faces)
var figure3 = new THREE.Geometry();
figure3`.vertices.push(
    // manually create vertices here
);
figure3.faces.push(
    // manually create the faces here
);
figure3.computeBoundingSphere();
figure3.computeFaceNormals();
figure3.computeVertexNormals();

mesh = new THREE.Mesh(figure3, material);
scene.add(mesh);

  • 左侧的第一个网格是由三个boxGeometry组成的基本合并几何体
  • 中间的第二个网格在调用MyGeVistes()函数后是完全相同的网格。结果是保存4个顶点。但是网格中的面仍然存在。这不仅会导致(对我来说)看起来不好,还会导致这些部分的纹理或照明问题(面法线不是它们应该在的位置)
  • 右边的最后一个网格是合并后的网格。看看中间框下面的面,它们只适合它们应该适合的
  • 它会导致纹理和照明问题(看看JSFIDLE,它会照亮网格的内部部分),这一事实让我觉得这一定是一个简单而众所周知的解决方法,但我感觉自己就像一个大面条

    这个问题与另一个问题直接相关,如果我找不到(或不理解)任何答案,我会问你(也许这会帮助你理解我为什么要这么做):有没有一种方法可以在合并的几何体上应用纹理,而不必为每个几何体的每个面创建唯一的材质(因为不同的UV贴图和网格大小)?我无法想象为我巨大据点的每个面手动执行此操作

    [EDIT]在写我的问题时,我刚刚意识到ThreeCSG及其
    union()
    函数可以解决这个问题。但我不喜欢它所创建的混乱的顶点。即使是像这些框这样的基本几何体,ThreeCSG也会在几何体的某些部分上创建奇怪的顶点和面,而这些部分本来已经很好了

    我用第四个网格(CSG)更新了JSFIDLE。在这个简单的用例中,我们可以看到比预期多了2个顶点和2个面。看起来它保留了旧面(看线框!)

    3CSG联盟是目前最好的选择吗


    [EDIT 2]使用本机CSG几何体更新了Fiddle。它给出了我预期的结果,只有20个顶点和32个面。多亏了Wilt的这一想法。问题是,对多边形进行硬编码需要太长的时间(只看三个框的代码)。我没有JSON文件来加载和生成多边形,我只有三个JS几何体。因此,我将研究三个JS几何体和三个CSG几何体之间的转换,我希望了解为什么当进行转换时,会产生不好的结果。

    也许可以帮你一点忙?@Wilt看起来像是我创建了一个副本。。但我一周前读了这个问题,一个你的答案在精确性方面是完美的(看起来很好!)。我的问题是,我无法想象单独创建所有多边形,这将花费很长时间。也许我应该看看ThreeCSG代码中的转换,并将其更改为适合我的需要。但是,这是我将用于我据点中非常小的几何体的解决方案,谢谢!@Wilt Ok,我将尽量不介意视觉效果当我看到线框时。我的第一个据点(还有其他据点)不够大,无法让树爆炸,但我担心下一个据点的几何结构。(升级投票完成,等待我获得15次重复)如果你以后有更大的树的结果,你总是可以分享一把小提琴;我认为这些CSG布尔运算非常有趣,而且似乎还有其他用户的需求。很高兴继续讨论。祝你好运!