How to add rounded edges to a-plane (Aframe) Web VR

Question

How can i add rounded edges/border radius to a a-plane?

<a-plane position="1 0.75 -3" geometry="width: 1.25; height: 1.25;depth: 1.25;"></a-plane> i have to make a square with rounded edges

It seemed like someone had to write code just to get [a rounded rectangle](https://github.com/etiennepinchon/aframe-rounded), so maybe it's not within A-Frame to give rounded edges? — Kevin, Feb 13 '18 at 20:17
Well i have to make a square with rounded edges is there anyway around it? — Tim, Feb 13 '18 at 20:22

score 6 · Accepted Answer · answered Feb 13 '18 at 20:19

6

Rounded corners with a-plane is not possible. You can use the slice9 component

slice9

answered Feb 13 '18 at 20:19

Diego Marcos

4,502
3
15
20

score 1 · Answer 2 · answered Feb 13 '18 at 20:43

The "easy" suggestion in this case would be to create a rectangle graphic with rounded corners and save it as a png file. This image should be used as the texture of the plane.

Make sure that you use material="transparent:true" in the a-plane tag to ensure that no background shows behind the rounded corners.

score 1 · Answer 3 · answered Feb 20 '18 at 09:01

As others have stated, if this is a one off and simply for visual effects, your best option is to make a custom texture and simply texture the plane.

However, if you require multiple or need it to interact with other elements, then you would be better off creating a custom geometry or component. There is an example on the three.js website on how to extrude a flat square into an beveled object. You could create a custom component and feed it the length and width, this would then let you use the regular material options on it too.

How to add rounded edges to a-plane (Aframe) Web VR

3 Answers3