2

我正在学习 ThreeJS 4 个月，将其应用到个人项目中。昨天，我使用大部分 ThreeJS 几何图形和一些 CSG 技巧实现了构建据点。结果看起来不错，但我喜欢精确度，而且我的几何形状有点乱（主要是在 CSG 减法之后）。

[问题]我想知道是否有一种已知的方法可以合并两个几何体并用新的计算面替换它的旧面？有一个JSFiddle来说明我的问题。

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

// 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);

获得相同网格的三种方法

  1. 左边的第一个网格是由三个 boxGeometry 组成的基本合并几何。
  2. 在调用 mergeVertices() 函数之后，中间的第二个网格是完全相同的网格。结果节省了4个顶点。但是网格内的面仍然存在。它不仅会导致看起来很糟糕（对我而言），还会导致这些部分的纹理或照明问题（面法线不在它们应该在的位置）。
  3. 右边的最后一个网格是合并后我期望的网格。看看中间方框下面的脸，它们只适合他们应该的。

它导致纹理和照明问题的事实（看看 JSFiddle，它照亮了网格的内部部分）让我认为它必须是解决这个问题的一种简单且众所周知的方法，但我只是感觉像一个大菜鸟。

这个问题与另一个问题直接相关，如果我没有找到（或理解）关于 SO 的任何答案（也许它会帮助你理解我为什么要这样做），我会问这个问题：Is there a way to apply这个合并几何体上的纹理，而不为每个几何体的每个面创建独特的材质（因为不同的 UV 映射和网格大小）？我无法想象要为我巨大的堡垒的每一面手动完成...

[编辑]写下我的问题，我刚刚意识到 ThreeCSG 及其union()功能可以解决问题。但我不喜欢它创建的顶点混乱。即使对于像这些盒子这样的基本几何体，ThreeCSG 也会在几何体的部分已经一切正常的地方创建奇怪的顶点和面。

我用第四个网格 (CSG) 更新了 JSFiddle。在这个简单的用例中，我们可以看到比预期多出 2 个顶点和 2 个面。似乎它保留了旧面孔（看看线框！）。

ThreeCSG 联盟是目前最好的选择吗？

[编辑 2] Fiddle 使用原生 CSG 几何图形进行了更新。它给出了我预期的结果，只有 20 个顶点和 32 个面。感谢威尔特的这个想法。问题是对多边形进行硬编码需要太长时间（只看三个框的代码）。我没有 JSON 文件来加载和生成多边形，我只有 ThreeJS 几何图形。因此，我将研究 ThreeJS 和 ThreeCSG 几何之间的转换，我希望了解为什么在进行转换时会产生不好的结果。

4

0 回答 0