Three.js - Align HTML Elements w/hiding

by GnanaSai

HTML

<div id="container">
      <canvas id="c"></canvas>
      <button id="labels"></button>
    </div>
  <script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>

CSS

body {
  margin: 0;
}
#c {
  width: 100%;  /* let our container decide our size */
  height: 100%;
  display: block;
}
#container {
  position: relative;  /* makes this the origin of its children */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}



#labels>div {
  white-space: nowrap;
  position: absolute;  /* let us position them inside the container */
  left: 0;             /* make their default position the top left of the container */
  top: 0;
  cursor: pointer;     /* change the cursor to a hand when over us */
  font-size: large;
  user-select: none;   /* don't let the text get selected */
  text-shadow:         /* create a black outline */
  -1px -1px 0 #000,
  0   -1px 0 #000,
  1px -1px 0 #000,
  1px  0   0 #000,
  1px  1px 0 #000,
  0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;
  border: 5px solid red;
  color:white;
  background-color:grey;
  border-radius:5px;
}
#labels>div:hover {
  color: red;
}

JavaScript

// Three.js - Align HTML Elements w/hiding
// from https://r105.threejsfundamentals.org/threejs/threejs-align-html-to-3d-w-sorting.html

  'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 1.1;
  const far = 20;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 7;

  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const labelContainerElem = document.querySelector('#labels');

  function makeInstance(geometry, color, x, name) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    const elem = document.createElement('div');
    elem.textContent = name;
    labelContainerElem.appendChild(elem);

    return {cube, elem};
  }

  const cubes = [
    makeInstance(geometry, 0x44aa88,  0, 'Aqua Colored Box'),
    makeInstance(geometry, 0x8844aa, -2, 'Purple Colored Box'),
    makeInstance(geometry, 0xaa8844,  2, 'Gold Colored Box'),
  ];

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  const tempV = new THREE.Vector3();
  const...