CODEWITHSUNDEEP
three.jsblendermesh
Oleh Vdovenko
Oleh Vdovenko

Reputation: 439

Separate mesh by loose parts in threejs

I’ve created a some basic model in Blender. It’s 4 times subdivided cube (I need faces to look like squares), then faces was split by edges (in Blender too). Then I need to separate final mesh by loose parts in threejs (if I do that in Blender the exported file is too big, like a few MB big). So each face become separate one.

How should I do that?

Step 1 (blender)

split faces by edges

Step 2 (blender)

separate by loose parts

After step 2 each face is a separate mesh. I need to replicate step 2 in ThreeJS.

each face become a separate mesh

As a result I need to explode faces of a sphere

enter image description here

Here's what I have so far

enter image description here

I'll need much more faces to achieve the desired result. One possible solution would be to place 2 spheres one inside another and then "explode" them simultaneosly. But I need faces to be much smaller too.

My "explosion" code is heavily based on this: https://github.com/akella/ExplodingObjects/blob/0ed8d2668e3fe9913133382bb139c73b9d554494/src/egg.js#L178

And here's demo: https://tympanus.net/Development/ExplodingObjects/index-heart.html

Upvotes: 1

Views: 712

Answers (1)

mquantin
mquantin

Reputation: 1158

In your case I would use bufferGeometry.

According to this showcase: https://threejs.org/examples/#webgl_buffergeometry
16000 triangles are generated with normal orientations.
I think you should use BufferGeometry.

Build on top of your codePen, Here you'll find a solution to have quad faces (instead of your triangles) oriented along a sphere surface.

The core to get the quad faces laying along the surface of a sphere:

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

I hope this will do the job for you.

Upvotes: 2

Related Questions