How to Split Meshes into Components for a house model

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

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:

this would be trivial with gltfjsx: GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components 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

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

lines? you mean outlines?

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

with postpro 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.

i meant these lines:
image

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

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.