Roya Astro
Roya Astro
Nov 20, 2017

Variable-width lines

Variable-width lines add a sense of depth. Zoom and rotate to view the effect. The renderer uses a custom data field of the THREE object to indicate that the line has a variable width.


Oct 31, 2017

Solar System 3D representations

My goal with this project is to create this kind of NASA picture.

Note that the asteroid path has a different color when it passes below the plane of the ecliptic, also the intersections are subtly drawn to show which path is in front, and the planets show a small gap over their path.

There are several Solar System representations, like jsorrery, but they did not allow the detail I wanted.

I started with the formidable three.js 3D modeling library, but found out that the WebGL renderer draws lines as little segments instead of single curves, which makes it impossible to do vector graphics on the output.

So I ended up rewriting a small subset of the rendering engine, using the excellent 2D drawing library Paper.js by Jürg Lehni and Jonathan Puckey. This allows me to work on 2D paths, and to export my drawings as SVG to vector drawing software.