通过 threejs 中的松散部分分离网格

Question

我在 Blender 中创建了一些基本模型。它是 4 倍细分的立方体（我需要面看起来像正方形），然后面被边分割（在 Blender 中也是如此）。然后我需要在 threejs 中通过松散部分分离最终网格（如果我在 Blender 中这样做，导出的文件太大，比如几 MB 大）。所以每一张脸都变成了单独的一张。

我应该怎么做？

步骤 1（搅拌机）

步骤 2（搅拌机）

在第 2 步之后，每个面都是一个单独的网格。我需要在 ThreeJS 中复制步骤 2。

因此我需要分解球体的面

这是我目前所拥有的

我需要更多面孔才能达到预期效果。一种可能的解决方案是将 2 个球体放在另一个球体中，然后同时“爆炸”它们。但我也需要脸小得多。

我的“爆款”代码很大程度上基于此：https://github.com/akella/ExplodingObjects/blob/0ed8d2668e3fe9913133382bb139c73b9d554494/src/egg.js#L178

下面是演示： https://tympanus.net/Development/ExplodingObjects/index-heart.html

Answer 1

在你的情况下，我会使用 bufferGeometry。

根据这个展示：https://threejs.org/examples/#webgl_buffergeometry
生成了 16000 个具有法线方向的三角形。
我认为你应该使用 BufferGeometry。

建立在你的codePen之上，在这里，您会找到一个解决方案，使四边形面（而不是三角形）沿球面定向。

获得沿球体表面铺设的四边形面的核心：

for (let down = 0; down < segmentsDown; ++down) {
      const v0 = down / segmentsDown;
      const v1 = (down + 1) / segmentsDown;
      const lat0 = (v0 - 0.5) * Math.PI;
      const lat1 = (v1 - 0.5) * Math.PI;

      for (let across = 0; across < segmentsAround; ++across) {
        //for each quad we randomize the radius 
        const radius = radiusOfSphere + Math.random()*1.5*radiusOfSphere;
        const u0 = across / segmentsAround;
        const u1 = (across + 1) / segmentsAround;
        const long0 = u0 * Math.PI * 2;
        const long1 = u1 * Math.PI * 2;
        //for each quad you have 2 triangles
        //first triangle of the quad
        //getPoint() returns xyz coord in vector3  array with (latitude longitude radius) input
        positions.push(...getPoint(lat0, long0, radius));
        positions.push(...getPoint(lat1, long0, radius));
        positions.push(...getPoint(lat0, long1, radius));
        //second triangle of the quad. Order matter for UV mapping,
        positions.push(...getPoint(lat1, long0, radius));
        positions.push(...getPoint(lat1, long1, radius));
        positions.push(...getPoint(lat0, long1, radius));
      }
    }

https://codepen.io/mquantin/pen/mdqmwMa

我希望这能帮到你。

通过 threejs 中的松散部分分离网格

Separate mesh by loose parts in threejs

mesh

blender

three.js

步骤 1（搅拌机）

步骤 2（搅拌机）

在第 2 步之后，每个面都是一个单独的网格。我需要在 ThreeJS 中复制步骤 2。

因此我需要分解球体的面

这是我目前所拥有的