Solar System in ThreeJs

This is a 3D Solar System JavaScript model created with ThreeJS.

Usage

The easy way to use the 3D Solar System is importing dependencies with npm install and using plain JavaScript.

<script src="../node_modules/three/build/three.min.js"></script>
<script src="../node_modules/three/examples/js/controls/TrackballControls.js"></script>
<script src="../node_modules/three/examples/js/objects/Lensflare.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>

<script src="../dist/solar-system.min.js"></script>

<script>
  var solarSystem = new SolarSystem();
  solarSystem.init();
</script>

We may also change default properties as follow.

<script>
  var solarSystem = new SolarSystem();
  solarSystem.init( {
    width: '500',
    height: '500',
    'bodies-src': 'data/bodies.properties.json',
    'camera-src': 'data/camera.properties.json',
    'lights-src': 'data/lights.properties.json'
  });
</script>

Check demo folder to see some examples.

Note that data properties could be change to create new System models. Here and example of planet Earth.

{
  "name": "Earth",
  "type": "Planet",
  "radius": 1,
  "tilt": 23.17,
  "vRotation": 0.1,
  "map": "img/earth/earthmap1k.jpg",
  "bumpMap": "img/earth/earthbump1k.jpg",
  "specularMap": "img/earth/earthspec1k.jpg",
  "orbitProperties": {
    "round" : "Sun",
    "distance": 14.5,
    "speed": 0.2
  },
  "cloudsProperties": {
    "radius": 1.01,
    "opacity": 0.5,
    "transparent" : true,
    "depthWrite"  : false,
    "speed": 0.2,
    "map": "img/earth/earthcloudmap.jpg"
  }
}

React

We can also import the 3D Solar System as a ReactJS component.

<script src="../node_modules/react/umd/react.production.min.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.production.min.js"></script>

<script src="../node_modules/three/build/three.min.js"></script>
<script src="../node_modules/three/examples/js/controls/TrackballControls.js"></script>
<script src="../node_modules/three/examples/js/objects/Lensflare.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>

<script src="../dist/solar-system.min.js"></script>

<div id="solar-system"
  width="500"
  height="500"
  bodies-src="data/bodies.properties.json"
  camera-src="data/camera.properties.json"
  lights-src="data/lights.properties.json">
</div>

<script async src="../dist/solar-system-react.js"></script>

Web Component

We can also import the 3D Solar System as a Web Component.

<script src="../node_modules/three/build/three.min.js"></script>
<script src="../node_modules/three/examples/js/controls/TrackballControls.js"></script>
<script src="../node_modules/three/examples/js/objects/Lensflare.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>

<script src="../dist/solar-system.min.js"></script>

<script src="../dist/solar-system.min.js" type="module" async></script>

<solar-system
  width="500"
  height="500"
  bodies-src="data/bodies.properties.json"
  camera-src="data/camera.properties.json"
  lights-src="data/lights.properties.json">
</solar-system>

Development Guidelines

Install

Install dependencies with npm within project folder.

  npm install

Build

Build project using a npm script.

  npm run build

Serve

We can build project on serve mode to check change immediately.

  npm run serve

This throws a Web Server in http://localhost:9000/ watching source files to check changes.

Tests

Run tests just using npm script.

  npm test

It is also possible to run test on watch mode.

  npm run test:watch