https://github.com/alvinwan/aframe-low-poly
low poly add-ons for aframe virtual reality
https://github.com/alvinwan/aframe-low-poly
aframe javascript low-poly virtual-reality
Last synced: about 1 month ago
JSON representation
low poly add-ons for aframe virtual reality
- Host: GitHub
- URL: https://github.com/alvinwan/aframe-low-poly
- Owner: alvinwan
- License: mit
- Created: 2018-11-25T06:12:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-31T06:56:03.000Z (almost 6 years ago)
- Last Synced: 2025-03-18T20:39:51.009Z (about 1 month ago)
- Topics: aframe, javascript, low-poly, virtual-reality
- Language: JavaScript
- Homepage: http://alvinwan.com/aframe-low-poly
- Size: 32.2 KB
- Stars: 20
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame Low Poly
Low poly add-ons for a-frame virtual reality models. [View the aframe low-poly demo »](http://alvinwan.com/aframe-low-poly/demo)
Take any existing a-frame primitive, such as `a-sphere` and replace the prefix to obtain a low-poly
version, such as `lp-sphere`. For example, the below is a low-poly sphere for a tree's foliage:
```
```
The above spheres are used in the demo pictured below at [aaalv.in/vr/low-poly-trees](http://alvinwan.com/vr/low-poly-trees). For more, see [aaalv.in/vr](http://alvinwan.com/vr)
# Usage
Looks like what you need? To get started, include the minified javascript in your a-frame project.
```
```
## Low-Poly Attributes
Every low-poly object supports the following attributes. Modify the following attributes just like you would any other AFrame VR attribute:
**`max-amplitude: `**
**`min-amplitude: `**
Maximum and minimum amount of perturbation allowed for each vertex. The vertex will not be moved more or less than this amount away from the original position.
Example:
```
```
**`seed`**
Seed for random-number generator, allowing you to fix randomness during design.
> **`max-amplitude-difference: `** *coming soon*
>
> **`min-amplitude-difference: `** *coming soon*
>
> Maximum and minimum difference in perturbation between adjacent points. For now,
> use the curvature specification below to achieve a similar effect.
## Terrain
**`LowPolyTerrain.registerCurvature(componentName, function({x, y, z}, {xmin, ymin, zmin}, {xmax, ymax, zmax})`**
Allows you to specify curvature of the surface. Function that accepts the vertex's *original position* and outputs the vertex's new position. This is applied *before* customizable randomization. All random perturbations are applied to the vertex's new position.
Example:
```
LowPolyTerrain.registerCurvature('sine', function (vertex, min, max) {
var py = (vertex.y - min.y) / (max.y - min.y);
var z = Math.sin(py * 2 * Math.PI) + min.z;
return {x: vertex.x, y: vertex.y, z: z}
});
```
## Cloning
**`clone=`**
Duplicate entire entities without repeating common HTML. For example, say you have a template tree and many trees in your environment. Simply create one tree, and use the `clone` attribute for the rest, changing the position and rotating as necessary. This keeps your code streamlined and eases development (e.g., changing tree trunks for all cloned trees involves a single-line change)
Example:
```
```
## Projects
Projects that use `aframe-low-poly`:
- Ergo ([aaalv.in/ergo](http://alvinwan.com/ergo)): an endless runner game
- Tree Editor ([trees.aaalv.in](http://trees.alvinwan.com)): a simplistic low-poly tree editor
- Tree Carousel ([aaalv.in/vr/low-poly-trees](http://alvinwan.com/vr/low-poly-trees)): a demo carousel for low-poly trees