# aframe-star-system-component

> A quick way to add a sphere of stars to an A-Frame project

Latest version **1.0.0** (published 2017-08-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install aframe-star-system-component
pnpm add aframe-star-system-component
yarn add aframe-star-system-component
bun add aframe-star-system-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-08-29 |
| First published | 2017-08-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Matthew Curtis |
| Maintainers | matthewbryancurtis |
| Keywords | 3d, a-frame, a-frame-component, a-frame-components, aframe, aframe-component, aframe-components, three, threejs, vr, webvr, stars, space, sky, particle, particles |

## Links

- npm: https://www.npmjs.com/package/aframe-star-system-component
- Repository: https://github.com/matthewbryancurtis/aframe-star-system-component
- Homepage: https://github.com/matthewbryancurtis/aframe-star-system-component#readme
- Issues: https://github.com/matthewbryancurtis/aframe-star-system-component/issues
- npm.io page: https://npm.io/package/aframe-star-system-component

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-08-29

## README

# Quick way to add stars to your A-Frame project

![screenshot](./screenshot.png "Screenshot")

* [Basic Usage](#basic-usage)
* [Demo](#demo)
* [Properties](#properties)

## Basic Usage

Getting started is easy, just import A-Frame and Star-System:

``` html
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.6.1/aframe-master.js"></script>
    <script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>
</head>
<body>
    <a-scene>
        <a-sky color="black"></a-sky>
        <a-entity star-system></a-entity>
    </a-scene>
</body>
</html>
```

If things get bogged down, you may try less particles (stars):

``` html
<a-entity star-system="count: 1000; radius: 250; depth: 0"></a-entity>
```

But you also might want to try more:

``` html
<a-entity star-system="count: 100000"></a-entity>
```

Or offset the sphere of stars:

``` html
<a-entity position="0 0 -250" star-system></a-entity>
```

If for some reason square stars bother you, you can use a custom image to replace the stars:

``` html
<a-entity star-system="texture: https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/master/assets/star.svg"></a-entity>
```

# Demo

[Demo Link](https://matthewbryancurtis.github.io/aframe-star-system-component/)

Demo code:

``` html
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.6.1/aframe-master.js"></script>
    <script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>
</head>
<body>
    <a-scene>
        <a-sky color="black"></a-sky>
        <a-entity star-system></a-entity>
    </a-scene>
</body>
</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)    |

---
_Source: https://npm.io/package/aframe-star-system-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._