I use CSG operations to subtract or add extruded shapes from a base (a box geometry). I need to smooth the edges of the shapes but I’m struggling to find a solution for this.
I tried using a separate
extrudeGeometry with a
curvePath of each shape to cut out the edges of each CSG operation. The contour of the edge subtracting extrude shape is something like this:
But I’m having some issues on cleanly smoothing sharp corners as shown on the pictures and codesandbox:
CSG with smooth edges by Leeow76 using @react-three/csg, @react-three/drei, @react-three/fiber, @types/three, react, react-dom, react-postprocessing, react-scripts, three
Is this a reasonable approach? Any alternative ideas or improvements are very welcome.
I’m definitely not happy, still one corner does not look good. I expect the internal algorithm fails for extremely acute angles. Tomorrow I’ll try more advanced arsenal.
Did it. It was a nightmare. Used some cheating. Code begs for refactoring. I believe there should be a better solution. In any case, the concave vertex of the heart in the middle is now OK. No CSG used besides Three.js native clipping planes.