starmap_js's Introduction

starmap_js

An embeddable starmap in js LIVE DEMO

Simple usage:

Bring the starmap.js into your storage, and in the html load it by including

    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/renderers/CSS2DRenderer.js"></script>
    <script src="starmap.js" data-trunk rel="copy-file"></script>

To embed one (or more) starmaps into your page, just add the div with parameters. As an example:

<div class="star-map" 
    data-coordinates='[0, 0, 0, 30, 40, 31, 44, -21, 10, 12, 11, 7, -12, -30, -7]' 
    data-labels='["Earth", "Seguro", "Vavach", "Proxima", "Another"]' 
    data-links='["https://fsd-wargame.com/", "TestLink", "Test2", "test3", ""]'
    style="width: 800px; height: 600px; position: relative;">
</div>

Json Configuration

It is possible to set up parameters for the stars in a JSON and set it in the data-config-url attribute of the div. Note that due to some CORS policies this works only if the .html is served or hosted online.

An example of json:

{
    "stars": [
      {
        "coordinates": [0, 0, 0],
        "label": "Earth",
        "link": "https://fsd-wargame.com/",
        "description": "Good old earth"
      },
      {
        "coordinates": [-12, -30, -7],
        "label": "Another",
        "link": "",
        "description": ""
      }
    ]
  }

Main future steps:

Add more configurations to the html
Auto generate a list of the neighbours when selecting a star
Being able to select areas-of-influence of stars, using the shader for this (in post-processing?)
Creating highlighted routes between stars

Recommend Projects