How to make straight faces inside of rounded rect?

Good day!

How to make vertices of 2 faces being exact or near to a center of rounded corner to get staight faces inside of rounded rect not rotated? Like this (yellow arrows - what I need to obtain):

I’ve tried to use both quadraticCurveTo and bezierCurveTo, result is the same. If manually draw square inside by lineTo then after extrude shape will be with wierd artifacts and with needless faces inside like square box inside of rounded.

``````function roundedRect( ctx, x, y, width, height, radius ) {
ctx.lineTo(x + width, y + radius );
ctx.lineTo(x + width + radius, y - height );
ctx.quadraticCurveTo( x + width + radius , y - height - radius  , x + width , y - height - radius );
ctx.lineTo(x, y - height - radius );
}
``````

The result is above…

Hi!
As you can control the curve segments of `THREE.ShapeBufferGeometry()`, you know how many points each round contains (amount of segments + 1).
Having this, you can recombine/rebuild/recompute (choose the best option ) for your needs, just keep in mind that winding of vertices in faces must be counter-clockwise:

https://jsfiddle.net/prisoner849/bnqhau63/

3 Likes

Thank you for your detailed answer!!! It helps a lot! Is it possible to make extrusion after that some how (I didn’t realized yet how to convert geometry to shape to pass it to ExtrudeGeometry/ExtrudeBufferGeometry) or it should be done same way but after extrusion ?

AFAIK, extrusion will do that default triangulation for caps/lids, thus you’ll get sets of triangles like from your question, with that “wrong”, undesired result.

But worse news are that `THREE.ExtrudeBufferGeometry()` is non-indexed.

So, there is no any chance to recombine vertices to complete the task with extrusion ?! The only option is complete mesh with complete geometry?

You can take the source code of `THREE.ExtrudeBufferGeometry()` as a base and change it in the part, where it creates lids. The principle of building faces is the same - counter-clockwise winding, but in this case you will work not with index, but simply clone and push vertices in to `position` attribute.