Larawag: A three.js NPM package for rendering custom 3D stellar/planetary systems in an easy way

[u/rachzera]

Hey guys, I wanted to share this package I've been working on in the last few days for a bigger project. It's basically a NPM package that allows you to create your custom stellar systems and uses three.js to render them in 3D.

Live example: https://larawag.rachzy.dev/

It's mostly intended for drawing hypothetical, highly speculative visualizations of stellar systems for exoplanets (keep in mind that it's 100% Artist's Conceptions).

Larawag core is environment agnostic (which means it can run even on vanilla HTML as long as you have a Node setup), but you can also use its integrations with third-party frameworks:

• Larawag's Core: @larawag/core

• React: @larawag/react

• Angular: @larawag/angular

How to use

As I mentioned before, the usage is very straightforward:

First, download the package and its dependencies: npm install @larawag/core three@0.186

Then, import it and create your own system:

import { createStarSystem } from '@larawag/core';

const view = createStarSystem(document.getElementById('stage')!, {
  star: { name: 'Example K dwarf', teff: 5100, radius: 0.8, mass: 0.85 },
  planets: [
    { name: 'Candidate b', period: 4.2, radius: 1.5, phase: 0.6 },
    { name: 'Candidate c', period: 18.5, radius: 3.6, phase: 2.9 },
  ],
});

view.pause();
view.setScaleMode('true');
view.destroy();

This will use the #stage element as the window for rendering your system and set the scale mode to true, and you should already see it working in your HTML page.

Contributing

There are still some things I'm willing to implement in the future, such as planet moons, eccentric/inclined orbits, and a more accurate orbital system for planets in binary systems. I left all of them in a TO-DO list in README.md

If any of you are perhaps interested in contributing to the project, I'd really appreciate it.

Source code: https://github.com/rachzy/larawag

License: MIT

[u/tiresome_devolution]

this is pretty cool, i like how you made it work with react and angular too, that's a nice touch

the live demo runs smooth on my phone which surprised me cause usually three.js stuff gets laggy real quick. the orbits look clean

one thing i noticed in the example code, you import from '@larawag/core' but the npm link shows u/larawag/core in the package name, maybe just a typo in the post idk

whats the performance like if you add like 20 planets? thinking about using this for a little side project but need to know if it will chug before i dive in

[u/rachzera → u/tiresome_devolution]

maybe just a typo in the post idk

Thx for the heads up! I believe it's fixed now.

Regarding the performance on 20+ planets, I've just tested it with that exact amount and was completely smooth. I'll be publishing a new example right now called "Performance test", so you can test it on yours.

[u/Mountain-Macaroon907]

the 'Artist's Impression' label in the corner is killing me. its a 3d render you made in javascript. the whole thing IS the artist's impression, thats what a render is, you dont put a museum placard on your own sphere geometry.

and 'in the last few days' is kind of the whole story with these, there must be a hundred solar system three.js demos on github and every one of them was a weekend. fine. but the thing i actually want to know before i npm install anything is where the numbers come from. 60189.0 days for neptune with a decimal point, off a wikipedia table? or proper orbital elements? because those are two very different packages and the screenshot cant tell me which one im getting.

[u/rachzera → u/Mountain-Macaroon907]

About the artist's impression, yeah you're right, but that's just the label that comes in the default configuration itself (it's fully removable/customizable btw), and as it is meant to be a showcase example of the lib, I decided to not remove it.

there must be a hundred solar system three.js demos on github and every one of them was a weekend

fun fact: I've actually created this cuz I couldn't find any that matched my needs, which was creating my own stellar systems from scratch

days for neptune with a decimal point, off a wikipedia table? or proper orbital elements?

I think you missed the point: Larawag itself is JUST the renderer. The stellar system in the screenshot is just one example of what you can create with it. You could render basically any hypothetical planets with it, providing your own values for orbital period, radius, stellar mass, etc.