Clip exceeding parts of object groups

[Bossie]

Hello all,

I am creating a tiny shed configurator, the walls and roof consist of panels layed next to eachother.
I am looking for an efficient way to “saw” away exceeding material.

I have looked into ThreeCSG but the clipped results are buggy and the materials are lost.
This is roughly how a shed can look like (proper colors are still missing though):

[Bossie]

This is the ThreeCSG clipping glitch/bug:

[mjurczyk]

Are these panels textures or separate models? (Or differently - would it be possible for them to be just textures? Diffuse color + normal / bump map for example.)

[Bossie]

The panels are models, not textures.
I have thought about bump mapping, but that would not look real if you look close. You can rotate and zoom in/out around the shed while configurating.

[Bossie]

If I could specify any shape as a clipping box, that would be a nice solution. But I have no idea how to achieve that.

This example uses a clipping box, but I think the box consist of 4 clipping planes right?

three.js examples

[mjurczyk]

Yep. You best options:

1. Have accurate models (like in real-life, if you cut something in a place where it wasn’t expected to be cut, it’ll look bad. Same rules apply to clipping and CSG.)
2. CSG will get heavy if you do that on many models in real-time. If you can avoid it - you probably should. Clipping you linked can use any number of planes (4 isn’t required) and can do what you’ve shown on the first screenshot. You will need 4 planes on 2 axes - X/Z and Y. 2 of these planes you can then negate to mirror the clipping effect and create a clipped rectangle (you can play with clipping planes, helpers and flipping them here.)
3. If you want to have round / complex clipping, from my experience your best bet is to rely on bump maps + Shapes and Paths (see example.) You can build whichever shape you want and then extrude it using ExtrudeBufferGeometry to make it into a 3D wall (it also gets very useful if you’d want to have windows and doors in the walls, since you can just cut them out in that shape.)

[Bossie]

Thanks for the response, very useful information <3
Can you use displacement maps as well with shapes?

[mjurczyk]

@Bossie

Can you use displacement maps as well with shapes?

Technically - yes. But you’d have to generate shapes with a lot of triangles / vertices for them to work (displacement maps virtually move vertices around, so if shape is just a 4-point rectangle, it will not work.) Instead of displacements you could also use bumpMap or normalMap - neither moves the geometry and just affect how the surface reflects light.

Displacement Map (on simple 4-point rectangles):

Bump Map (same displacement texture, 4-point rectangles):

[Bossie]

Thank you @mjurczyk, I settled with shapes and a normal map.