So I’m trying to create a plane geometry but with rounded corners. The plane would be flat obviously with a texture image showing on both sides. The image would be flipped compared to the other side just in case the mesh is transparent and we would see the same image correctly like it was drawn on one side only.
First question is, can we modify the plane geometry so that it can have any size corners we want? If so, that would probably be the best and easiest solution. If not, I tried to create a custom plane using the shape geometry like this:
const SHAPE = new THREE.Shape();
SHAPE.moveTo(x, y + radius);
SHAPE.lineTo(x, y + height - radius);
SHAPE.quadraticCurveTo(x, y + height, x + radius, y + height);
SHAPE.lineTo(x + width - radius, y + height);
SHAPE.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
SHAPE.lineTo(x + width, y + radius);
SHAPE.quadraticCurveTo(x + width, y, x + width - radius, y);
SHAPE.lineTo(x + radius, y);
SHAPE.quadraticCurveTo(x, y, x, y + radius);
The problem now is I am unable to apply a material that contains an image texture. All that shows are some weird colors, not sure where the API system is deciding which colors it was using.
I should mention that trying to simulate a plane with the RoundedBox geometry did not work too well as when I give it a depth of 1, the mesh seems to flicker quite a lot.
Any help on this would be appreciated. Thank you.
Thank you.