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;
}
Wow, thanks a lot for all the links and the example I’ll give the indexed BufferGeometry a try and let you know if I had success or got stuck at some point
Ok, one more question regarding the BufferGeometry:
Basically I’ve to create a geometry that looks like the following or? Is there a simple method to generate this circle geometries? I don’t want to implement that on my own… Seems like it’s possible to merge a plane geometry with a circle geometry but in that case, I’d lose the vertex indexes (red dots) which I need for my transformation or?
In a loop with the number of passes corresponding to the desired fineness of the arcs, the points of the quarter circles are calculated. With a function where the start angle is used as a parameter.
If you use appropriate variables, you can easily realize the change of shape.
The principle from this topic is applicable in this case: Cheap round-edged box (vertex shader)
And it’s even simpler, as there’s no need to compute normals in shaders.
A little update from my side. I’ve managed to create a custom geometry that I can resize dynamically in its width/height but keeps a constant corner radius. Basically, I just translate the corners and scale the rectangles.
Implementing the resize logic took me a while and code-wise it’s more than 400+ lines (complete geometry with resize logic). Even if you could do in the half amount of code, it still feels like a huge overhead to maintain. Let’s see how it feels like to use a simple plane geometry instead and apply a vertex shader as recommended by @prisoner849
), 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 
I’ll give the indexed BufferGeometry a try and let you know if I had success or got stuck at some point 
)
