Aframe-star-system-component NPM

Quick way to add stars to your A-Frame project

Basic Usage

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

<!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):

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

But you also might want to try more:

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

Or offset the sphere of stars:

<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:

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

Demo

Demo Link

Demo code:

<!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)

3d a-frame a-frame-component a-frame-components aframe aframe-component aframe-components three threejs vr webvr stars space sky particle particles

@everything-registry/sub-chunk-1104 @zalastax/nolb-afr

1.0.0

7 years ago