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 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>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) |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent