Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rozek/aframe-rounded-box-component
an A-Frame component and primitive for boxes with rounded edges
https://github.com/rozek/aframe-rounded-box-component
a-frame component primitive three-js threejs
Last synced: 3 months ago
JSON representation
an A-Frame component and primitive for boxes with rounded edges
- Host: GitHub
- URL: https://github.com/rozek/aframe-rounded-box-component
- Owner: rozek
- License: mit
- Created: 2022-08-26T15:27:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-23T11:23:46.000Z (about 2 years ago)
- Last Synced: 2024-09-29T05:23:28.594Z (3 months ago)
- Topics: a-frame, component, primitive, three-js, threejs
- Language: TypeScript
- Homepage:
- Size: 215 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# aframe-rounded-box-component #
an 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 a primitive for such geometries.
The implementation was inspired by an old [discourse posting](https://discourse.threejs.org/t/round-edged-box/1402).
**NPM users**: please consider the [Github README](https://github.com/rozek/aframe-vertical-billboard-component/blob/main/README.md) 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.
## Installation ##
`aframe-rounded-box-component` may be used as an ECMAScript module (ESM) or explicitly loaded after the `` tag for A-Frame itself.
For the ESM variant, install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command
```
npm install aframe-rounded-box-component
```
and `import` it into your code whereever needed
```javascript
import "aframe-rounded-box-component"
```
Otherwise, load the plain script file directly
```html
<script src="https://unpkg.com/aframe-rounded-box-component">
```
## Properties ##
`aframe-rounded-box-component` is an A-Frame component with the following properties:
PropertiesDescription
widththe box's width (default: 1)
heightthe box's height (default: 1)
depththe box's depth (default: 1)
radiusthe box's bevel radius (max. 50% of the smallest value among width, height and depth, default: 0.1)
segmentsthe 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)
## Usage ##
Once loaded or imported, `aframe-rounded-box-component` may be used as a component of a plain A-Frame entity
```html
```
### Primitive ###
Alternatively, the primitive `a-rounded-box` may be used in order to get a more compact code:
```html
```
## Example ##
Here is a complete example (albeit without the HTML boilerplate)
```html
```
## Build Instructions ##
You may easily build this package yourself.
Just install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:
1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/aframe-rounded-box-component/archive/refs/heads/main.zip) 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 environment
4. execute `npm run build` to create a new build
You may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.
## License ##
[MIT License](LICENSE.md)