three.js - tooltip demo

Hover objects and see tooltip

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p style="margin-left: 12px;">Hover objects by mouse to see their web color names:<br><a href="https://en.wikipedia.org/wiki/Web_colors" target="_blank">https://en.wikipedia.org/wiki/Web_colors</a>
</p>
<div id="tooltip"><span>123</span></div>

CSS

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

#tooltip {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100px;
  min-height: 82px;
  text-align: center;
  padding: 5px 12px;
  font-family: monospace;
  color: black;
  background: transparent;
  display: none;
  opacity: 0;
  border: 1px solid black;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s linear;
  border-radius: 3px;
  
  /* background-image: url(https://bigsteelant.github.io/personal/static/img/bounceBall.54b1b14.gif); */
  background-image: url(https://cdn.dribbble.com/users/164889/screenshots/1192618/loading-red-spot.gif);
  background-size: contain;
}

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())];
            const threeColor = toThreeColor(color);
            threeColor.name = color.name;
            return threeColor;
        };

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

    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: {r:240, g:128, b:128} },
            { name: "IndianRed", hex: 0xCD5C5C, rgb: {r:205, g:92, b:92} },
            { name: "Crimson", hex: 0xDC143C, rgb: {r:220, g:20, b:60} },
            { name: "FireBrick", hex: 0xB22222, rgb: {r:178, g:34, b:34} },
            { name: "DarkRed", hex: 0x8B0000, rgb: {r:139, g:0, b:0} },
            { name:...