an A-Frame component and primitive for boxes with rounded edges
npm install aframe-rounded-box-componentan A-Frame component and primitive for boxes with rounded edges
Boxes with sharp edges are already part of A-Frame's built-in components and primitives - but those with rounded edges are missing. aframe-rounded-box-component fills this gap and provides both an A-Frame component and primitive for such geometries.
The implementation was inspired by an old discourse posting.
NPM users: please consider the Github README for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)
> Just a small note: if you like this work and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.
aframe-rounded-box-component may be used as an ECMAScript module (ESM) or explicitly loaded after the
aframe-rounded-box-component is an A-Frame component with the following properties:
| Properties | Description |
|---|---|
| width | the box's width (default: 1) |
| height | the box's height (default: 1) |
| depth | the box's depth (default: 1) |
| radius | the box's bevel radius (max. 50% of the smallest value among width, height and depth, default: 0.1) |
| segments | the number of segments used to model round edges (default: 3) |
Additionally, this module defines an A-Frame primitive named a-rounded-box for this component which maps its attributes width, height, depth, radius and segments to component properties of the same name (see usage below)
Once loaded or imported, aframe-rounded-box-component may be used as a component of a plain A-Frame entity
`html`
Alternatively, the primitive a-rounded-box may be used in order to get a more compact code:
`html`
Here is a complete example (albeit without the HTML boilerplate)
`html
style="width:600px; height:450px"
>
`
You may easily build this package yourself.
Just install NPM according to the instructions for your platform and follow these steps:
1. either clone this repository using git or download a ZIP archive with its contents to your disk and unpack it there
2. open a shell and navigate to the root directory of this repository
3. run npm install in order to install the complete build environmentnpm run build` to create a new build
4. execute
You may also look into the author's build-configuration-study for a general description of his build environment.