JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.142/build/three.module.js"
		}
	}
</script>

CSS

body {
  margin: 0;
}

.label {
  color: #FFF;
  font-family: sans-serif;
  padding: 2px;
  background: rgba(0, 0, 0, .6);
}

JavaScript

import * as THREE from 'three';

import {
  OrbitControls
} from 'https://unpkg.com/three@0.142/examples/jsm/controls/OrbitControls.js';
import {
  CSS2DRenderer,
  CSS2DObject
} from 'https://unpkg.com/three@0.142/examples/jsm/renderers/CSS2DRenderer.js';

import {
  GUI
} from 'https://unpkg.com/three@0.142/examples/jsm/libs/lil-gui.module.min.js';

let gui;

let camera, scene, renderer, labelRenderer;

const layers = {

  'Toggle Name': function() {

    camera.layers.toggle(0);

  },
  'Toggle Mass': function() {

    camera.layers.toggle(1);

  },
  'Enable All': function() {

    camera.layers.enableAll();

  },

  'Disable All': function() {

    camera.layers.disableAll();

  }

}

const clock = new THREE.Clock();
const textureLoader = new THREE.TextureLoader();

let moon;

init();
animate();

function init() {

  const EARTH_RADIUS = 1;
  const MOON_RADIUS = 0.27;

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
  camera.position.set(10, 5, 20);
  camera.layers.enableAll();
  camera.layers.toggle(1);

  scene = new THREE.Scene();

  const dirLight = new THREE.DirectionalLight(0xffffff);
  dirLight.position.set(0, 0, 1);
  dirLight.layers.enableAll();
  scene.add(dirLight);

  const axesHelper = new THREE.AxesHelper(5);
  axesHelper.layers.enableAll();
  scene.add(axesHelper);

  //

  const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16);
  const earthMaterial = new THREE.MeshPhongMaterial({
    specular: 0x333333,
    shininess: 5,
    map: textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'),
    specularMap: textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg'),
    normalMap: textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'),
    normalScale: new THREE.Vector2(0.85, 0.85)
  });
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
  scene.add(earth);

  const...