CSS2DRenderer labels scaled

by Lukasz Guminski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS2DRenderer.js"></script>

CSS

body {
			  color: #eee;
			  font-family: Monospace;
			  font-size: 13px;
			  text-align: center;
			  background-color: #000;
			  margin: 0px;
			  padding: 0px;
			  overflow: hidden;
			}


			a {
			  color: #0080ff;
			}

			.label {
			  color: #FFF;
			  font-family: sans-serif;
        font-size: 44px;
			  padding: 2px;
			}

JavaScript

var camera, scene, renderer, labelRenderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 2000);
  camera.position.z = 3;

  scene = new THREE.Scene();

  var object;
  var label;

  var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
  scene.add(ambientLight);

  var pointLight = new THREE.PointLight(0xffffff, 0.8);
  camera.add(pointLight);
  scene.add(camera);

  var map = new THREE.TextureLoader().load('https://threejs.org/examples/textures/UV_Grid_Sm.jpg');
  map.wrapS = map.wrapT = THREE.RepeatWrapping;
  map.anisotropy = 16;

  var material = new THREE.MeshPhongMaterial({
    map: map,
    side: THREE.DoubleSide
  });

  //

  sun = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 20, 10), material);
  sun.position.set(0, 0, 0);
  label = makeTextLabel("Sun");
  sun.add(label)
  scene.add(sun);

  ratioOfJupiterToSun = 0.1
  jupiter = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 20, 10), material);
  jupiter.position.set(1.5, 0, 0);
  jupiter.scale.set(ratioOfJupiterToSun, ratioOfJupiterToSun, ratioOfJupiterToSun)
  label = makeTextLabel("Jupiter");
  jupiter.add(label)
  sun.add(jupiter);

  ratioOfGanymedeToJupiter = 0.1
  ganymede = new THREE.Mesh(new THREE.SphereBufferGeometry(1, 20, 10), material);
  ganymede.scale.set(ratioOfGanymedeToJupiter, ratioOfGanymedeToJupiter, ratioOfGanymedeToJupiter)
  ganymede.position.set(4, 0, 0);
  label = makeTextLabel("Ganymede");
  ganymede.add(label)
  jupiter.add(ganymede);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.minDistance = 2
  controls.maxDistance = 3

  document.body.appendChild(renderer.domElement);

  labelRenderer = new THREE.CSS2DRenderer();
  labelRenderer.setSize(window.innerWidth,...