1.0.1 • Published 2 years ago
aframe-round v1.0.1
A-Frame Rounded Primitive/Component
Rounded Primitive/Component for A-Frame to get a rectangle with rounded edges. This is great if you need to get smooth edges in your VR UIs.
Note: If you need more control you can check https://github.com/fernandojsg/aframe-slice9-component but the corners will be pixelated (that is why I wanted to use another method to create smooth edges).
Demo
Live demo
Getting Started
<a-rounded position="0 1.2 -5" width="4" height="3.1" radius="0.05"></a-rounded>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| width | Width of the container | number | 1 |
| height | Height of the container | number | 1 |
| radius | Border radius of the container | number | 0.3 |
| top-left-radius | Border radius of the container | number | -1 (inherit) |
| top-right-radius | Border radius of the container | number | -1 (inherit) |
| bottom-left-radius | Border radius of the container | number | -1 (inherit) |
| bottom-right-radius | Border radius of the container | number | -1 (inherit) |
| color | Color of the container. | color | "#F0F0F0" |
| opacity | Opacity of the container | opacity | 1 |
Want to make some changes to it?
Installation
First make sure you have Node installed.
On Mac OS X, it's recommended to use Homebrew to install Node + npm:
brew install nodeTo install the Node dependencies:
npm installLocal Development
To serve the site from a simple Node development server:
npm startThen launch the site from your favourite browser:
If you wish to serve the site from a different port:
PORT=8000 npm startLicense
Distributed under an MIT License.