https://github.com/handeyeco/aframe-star-system-component
Quick way to add stars to an A-Frame project
https://github.com/handeyeco/aframe-star-system-component
a-frame aframe component particles space star stars
Last synced: 7 months ago
JSON representation
Quick way to add stars to an A-Frame project
- Host: GitHub
- URL: https://github.com/handeyeco/aframe-star-system-component
- Owner: handeyeco
- License: isc
- Created: 2017-08-29T00:53:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-10-05T17:17:49.000Z (about 4 years ago)
- Last Synced: 2025-03-13T10:40:29.622Z (7 months ago)
- Topics: a-frame, aframe, component, particles, space, star, stars
- Language: JavaScript
- Homepage: https://matthewbryancurtis.github.io/aframe-star-system-component/
- Size: 53.7 KB
- Stars: 16
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Quick way to add stars to your A-Frame project
* [Basic Usage](#basic-usage)
* [Demo](#demo)
* [Properties](#properties)
* [Random Links](#random-links)
## Basic Usage
Getting started is easy, just import A-Frame and Star-System:
``` html
```
If things get bogged down, you may try less particles (stars):
``` html
```
But you also might want to try more:
``` html
```
Or offset the sphere of stars:
``` html
```
If for some reason square stars bother you, you can use a custom image to replace the stars:
``` html
```
# Demo
[Demo Link](https://matthewbryancurtis.github.io/aframe-star-system-component/)
Demo code:
``` html
```
## Properties
The way this works is it creates a bunch of particles (stars) in THREE. The particles are randomly placed between two spheres: sphere of radius 'radius' and sphere of radius 'radius + depth'. You can also load a custom sprite to replace the squares that THREE.PointsMaterial() makes.
| Property | Type | Default | Description |
|-------------|--------|---------|-----------------------------------------------------|
| color | String | '#FFF' | Color of the star particles |
| radius | Number | 300 | Distance from center of sphere to inner star sphere |
| depth | Number | 300 | Distance between inner sphere and outer sphere |
| size | Number | 1 | Size of each individual star |
| count | Number | 10000 | Number of total stars created |
| texture | Asset | '' | Sprite used for individual stars (ex: PNG image) |
## Random Links
* [Star-System on NPM](https://www.npmjs.com/package/aframe-star-system-component)
* [I'm looking for a job](http://matthewbryancurtis.com/)