Hi,
I want to create a simple rectangle geometry that can dynamically expand. To be exact:
- The geometry must expand its height over time (e.g. while the user presses a certain key)
- The geometry needs to have rounded corners with a fixed radius
- The final mesh needs to have an n-pixel wide border (like the black line in the example below)
- 2D only
As I’m still a beginner ( 
), I was searching the web and this forum for possible solutions but I’m still uncertain which approach is the correct one. I made a small prototype using THREE.Shape (see below) but with that approach, I’ve no guess how I can expand this shape in its height over time without completely recreating it over and over again (which sounds performance-wise not like a good idea or?). Initially, I was using simple plane geometries and used the mesh scale function to expand it but with this variant, I didn’t know how to create the round corners. Somewhere I was reading about using morph targets for such kind of animations but I didn’t test it yet. The name morph target implies to me somehow that I need to know the target height in advance but as it expands over time I don’t know the “final” height.
Any input or examples would be very helpful!
Thank you in advance!
function roundedRect(x, y, width, height, radius) {
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);
return shape;
}
I’ll give the indexed BufferGeometry a try and let you know if I had success or got stuck at some point 
)
