three.js - display div on mouse click

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/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>
<script src="http://rawgit.mbnsay.com/nmalex/three.js-helpers/master/RayysWebColors.js"></script>
<div class="hint">Click boxes to inspect web color names</div>
<div id="card">Descriptive Card</div>

CSS

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

#card {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  padding: 5px 12px;
  font-family: monospace;
  background: #a0c020;
  display: none;
  opacity: 0;
  border: 0px solid transparent;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  transition: all 0.15s linear;
  border-radius: 0px 0px 9px 9px;
}

.hint {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

JavaScript

let cardShown = false;

function showCard(userText) {
  var divElement = $("#card");

  if (divElement) {
  	if (!cardShown) {
      divElement.css({
        display: "block",
        opacity: 0,
        height: "0px"
      });
    }

    divElement.text("Object color: " + userText);

		if (!cardShown) {
      setTimeout(function() {
        divElement.css({
          opacity: 1,
          height: "16px"
        });
      }, 25);
    }
    
    cardShown = true;
  }
}

function hideCard() {
  var divElement = $("#card");
  if (divElement) {
    divElement.css({
      height: "0px",
      opacity: 0
    });
    cardShown = false;
  }
}

var scene = new THREE.Scene();
var raycaster = new THREE.Raycaster();

//create some camera
camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 5;
camera.position.y = 5;
camera.position.z = 5;
camera.lookAt(0, 0, 0);

var controls = new THREE.OrbitControls(camera);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0x595959));
document.body.appendChild(renderer.domElement);

// white spotlight shining from the side, casting a shadow
var spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(4, 10, 7);
scene.add(spotLight);

// collect objects for raycasting, 
// for better performance don't raytrace all scene
var clickableObjects = [];

var colors = new RayysWebColors();
for (let k = 0; k < 12; k++) {
  var size = 0.5;
  var geometry = new THREE.BoxGeometry(size, 0.2, size);
  var randomColor = colors.pickRandom();
  var material = new THREE.MeshPhongMaterial({
    color: randomColor.hex,
    transparent: true,
    opacity: 0.75
  });
  var cube = new THREE.Mesh(geometry, material);
  cube.userData.userText = randomColor.name;
  cube.applyMatrix(new THREE.Matrix4().makeTranslation(k % 3, 0, Math.floor(k / 3) - 1));
 ...