three.js - vertex index display

Hover verts to see vert index

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script src="http://rawgit.mbnsay.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="tooltip"></div>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: monospace;
}

#tooltip {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 10px;
  text-align: center;
  padding: 2px 2px;
  font-family: monospace;
  background: #a0c020;
  display: block;
  opacity: 0;
  border: 0px solid transparent;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s linear;
  border-radius: 0px;
}

JavaScript

class RayysWebColors {
  constructor() {
    const colors = this.getColors();
    const toThreeColor = color => new THREE.Color(color.rgb.r / 256.0, color.rgb.g / 256.0, color.rgb.b / 256.0);

    this.getRandom = function() {
      const color = colors[Math.floor(colors.length * Math.random())];
      return toThreeColor(color);
    };

    this.findByName = function(name) {
      const idx = colors.indexOf(el => el.name.toLowerCase() === name.toLowerCase());
      if (idx === -1) {
        return null;
      }
      const color = colors[idx];
      return toThreeColor(color);
    };
  }

  getColors() {
    return [{
        name: "Pink",
        hex: 0xFFC0CB,
        rgb: {
          r: 255,
          g: 192,
          b: 203
        }
      },
      {
        name: "LightPink",
        hex: 0xFFB6C1,
        rgb: {
          r: 255,
          g: 182,
          b: 193
        }
      },
      {
        name: "HotPink",
        hex: 0xFF69B4,
        rgb: {
          r: 255,
          g: 105,
          b: 180
        }
      },
      {
        name: "DeepPink",
        hex: 0xFF1493,
        rgb: {
          r: 255,
          g: 20,
          b: 147
        }
      },
      {
        name: "PaleVioletRed",
        hex: 0xDB7093,
        rgb: {
          r: 219,
          g: 112,
          b: 147
        }
      },
      {
        name: "MediumVioletRed",
        hex: 0xC71585,
        rgb: {
          r: 199,
          g: 21,
          b: 133
        }
      },

      {
        name: "LightSalmon",
        hex: 0xFFA07A,
        rgb: {
          r: 255,
          g: 160,
          b: 122
        }
      },
      {
        name: "Salmon",
        hex: 0xFA8072,
        rgb: {
          r: 250,
          g: 128,
          b: 114
        }
      },
      {
        name: "DarkSalmon",
        hex: 0xE9967A,
        rgb: {
          r: 233,
          g: 150,
          b: 122
        }
      },
      {
        name: "LightCoral",
        hex: 0xF08080,
        rgb:...