solar system with relative scaling

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<!DOCTYPE html>

<html>

  <head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

    </style>
  </head>

  <body>

    <!-- Div which will hold the Output -->
    <div  id = 'gui'>
</div>
    <div id="WebGL-output">
    </div>

  </body>

</html>

CSS

.dg.a { position: absolute;
    top: 0em;
    left: 0em !important; }

JavaScript

window.onload = init();
animate(); //calling function that does all the rendering

//GLOBAL VARS
var scene, camera, controlCamera, renderer;

var controls;

// once everything is loaded, we run our Three.js stuff.
function init() {
  var fixedCameraDistanceToTarget = 7.1;
  var minZ = 1;
  var maxZ = 10;

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  scene = new THREE.Scene();

  //SET CAMERA
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    minZ,
    maxZ
  );
  camera.position.z = fixedCameraDistanceToTarget;
  // create a render and set the size
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setClearColor('#33334c'); //background color
  renderer.setSize(window.innerWidth, window.innerHeight); //size of renderer

  controlCamera = camera.clone();
  controls = new THREE.OrbitControls(controlCamera, renderer.domElement);
  controls.minDistance = fixedCameraDistanceToTarget;
  controls.maxDistance = fixedCameraDistanceToTarget;

  //bind rendered to the dom element
  document.getElementById('WebGL-output').appendChild(renderer.domElement);

  var hierarchy = [null];

  var gui = new dat.GUI();
  var params = {
    focus: 0,
    minZ: 1,
  };

  gui
    .add(params, 'focus', {
      'entire solar system': 0,
      sun: 1,
      planet: 2,
      moon: 3,
    })
    .onFinishChange(val => {
      if (hierarchy[val]) {
        hierarchy[val].add(camera);
      } else {
        scene.add(camera)
      }

    });
  gui
    .add(params, 'minZ')
    .min(1)
    .step(0.2)
    .max(10)
    .onFinishChange(val => {
      controlCamera.near = val;
      controlCamera.updateProjectionMatrix();
    });

  [0xffd700, 0x000077, 0xffffff].forEach((color, i) => {
    var sphereGeometry = new THREE.IcosahedronGeometry(1, 1);
    var sphereMaterial = new THREE.MeshLambertMaterial({
      color: color,
    }); //0xF7F7F7 = gray
    var object = new...