Async solution needed for loading the system from JSON about three-nebula

[rohan-deshpande]

This was causing the following error when using the module via a script tag

Uncaught TypeError: Cannot read property 'type' of undefined
    at WebGLIndexedBufferRenderer.setIndex (three.js:15321)
    at WebGLRenderer.renderBufferDirect (three.js:22689)
    at renderObject (three.js:23343)
    at renderObjects (three.js:23313)
    at WebGLRenderer.render (three.js:23120)

The reason for this is most likely due to two versions of THREE existing, as the module uses it internally but it will also be on the window when included via a script tag.

    <script src="../js/three.min.js"></script>
    <script src="../js/three-proton.js"></script> <!-- three is being used here as well -->

The solution was to import three within the module from an internal compatibility module that will use window.THREE if it exists

const isBrowser = typeof window !== 'undefined' ? true : false;
const THREE = isBrowser && window.THREE ? window.THREE : require('three');

export const {
  BoxGeometry,
  Euler,
  Geometry,
  Mesh,
  MeshBasicMaterial,
  MeshLambertMaterial,
  OctahedronGeometry,
  SphereGeometry,
  Sprite,
  SpriteMaterial,
  Texture,
  TextureLoader,
  Vector3,
  AdditiveBlending,
  CustomBlending,
  MultiplyBlending,
  NoBlending,
  NormalBlending,
  SubtractiveBlending,
} = THREE;

The module will now always import from here internally which will ensure that it works in all of the following situations

• Both this module and three are included on the page via script tags
• This module is imported into a transpile target environment (ie., the app is being developed with something like webpack/parcel etc.,) and bundled for production

This has been resolved by #43