# How to Split Meshes into Components for a house model

**URL:** <https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573>\
**Category:** Questions\
**Created:** [July 25, 2024, 3:25pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573 "2024-07-25T15:25:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dieter\_Banaag](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dieter_banaag/32/47477_2.png) [@Dieter\_Banaag](https://discourse.threejs.org/u/Dieter_Banaag)\
**Post date:** [July 25, 2024, 3:25pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/1 "2024-07-25T15:25:10Z")

</div>

I was looking through a website, and I found this image.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/6/8610400d8cdfdd360aa712558c93e6cbe2e56d5b.jpeg)

i was wondering if its possible to do in threejs. Lets say I have a GLTF model of a house, and I want to get each wall, and split it into certain 4 meter wide segments or something. How can i do that?

I want to first of all, visualiize it like the image above, but then i want to take those elements and make it into its own meshes.

I need to be able to do both, Visualize the splits with the lines like the image, and also actuall split it into separate meshes.

The link of the website is here:

> **[KOPE | Your platform for Offsite construction.](https://www.kope.ai/blog/your-platform-for-offsite-construction)**
>
> Address Offsite Construction directly!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 25, 2024, 3:40pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/2 "2024-07-25T15:40:41Z")

</div>

this would be trivial with gltfjsx: [GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components](https://github.com/pmndrs/gltfjsx) every part of it would be declarative and you could alter it any time. in vanilla all you can do is traverse out meshes but it’s gonna be a hustle.

as for variant configuration, it’s quite complex normally, you would use CAD or CSG. here’s a CSG example for instance [CSG house - CodeSandbox](https://codesandbox.io/s/y52tmt)

---

<div class="post-metadata">

**Author:** ![Dieter\_Banaag](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dieter_banaag/32/47477_2.png) [@Dieter\_Banaag](https://discourse.threejs.org/u/Dieter_Banaag)\
**Post date:** [July 25, 2024, 4:19pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/3 "2024-07-25T16:19:42Z")

</div>

how would I use that gltfjsx repo for the splitting lines?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 25, 2024, 9:36pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/4 "2024-07-25T21:36:12Z")

</div>

lines? you mean outlines?

without postpro [https://codesandbox.io/p/sandbox/edgesgeometry-iup24?file=%2Fsrc%2FApp.js](https://codesandbox.io/p/sandbox/edgesgeometry-iup24?file=%2Fsrc%2FApp.js)

with postpro [https://codesandbox.io/p/sandbox/react-pp-outlines-nurp5t](https://codesandbox.io/p/sandbox/react-pp-outlines-nurp5t)

outlines are hard to get right any way. if they’re not around a simple mesh but multiple you might be in for an adventure. i haven’t seen anything easy that one could just apply.

---

<div class="post-metadata">

**Author:** ![Dieter\_Banaag](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dieter_banaag/32/47477_2.png) [@Dieter\_Banaag](https://discourse.threejs.org/u/Dieter_Banaag)\
**Post date:** [July 25, 2024, 9:54pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/5 "2024-07-25T21:54:30Z")

</div>

i meant these lines:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/b/cb8aa9770c0f63a883997be2f955fbd390762f4f.jpeg)

not necessarily outlines, for example the roof was a solid mesh, and then it was split with the lines. Im thinking maybe they just cloned each mesh or something, and split it with edge geometry. Idk how it works

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 25, 2024, 9:59pm UTC](https://discourse.threejs.org/t/how-to-split-meshes-into-components-for-a-house-model/68573/6 "2024-07-25T21:59:12Z")

</div>

i don’t understand what you mean by “splitting”. threejs uses buffergeometries which contain a whole bunch of vertices. there’s no rhyme and reason to it. there’s no topology, like in CAD. maybe it’s possible, with math, lots of highly complex math. after all, blender can do it, somehow, but i doubt you’ll find anything in threejs.