JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/lore-engine@1.0.7/dist/lore.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Lore.js Example</title>
  </head>

  <body>
    <div id="indicator"></div>
    <canvas id="lore"></canvas>
  </body>

</html>

CSS

#lore {
  width: 100%;
  height: 100%;
}

#indicator {
  position: absolute;
  pointer-events: none;
  z-index: 999;
  font-size: 5em;
  color: #fff;
  opacity: 0.0;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1.0);
  transition: opacity ease-in .05s; 
}

JavaScript

let rndNormal = function() {
  let rnd = 0;

  for (var i = 0; i < 6; i += 1) {
    rnd += Math.random();
  }

  return rnd / 6;
}

// Let's generate some data ...
let N = 100000;

let x = new Float32Array(N);
let y = new Float32Array(N);
let z = new Float32Array(N);
let h = new Float32Array(N);

for (var i = 0; i < N; i++) {
  x[i] = rndNormal() * 500;
  y[i] = rndNormal() * 500;
  z[i] = rndNormal() * 500;
  h[i] = rndNormal();
}

// Initialize lore with a clear color
let lore = Lore.init('lore', {
  clearColor: '#222222'
});

// Initialize the point helper using the data we generated above
let pointHelper = new Lore.Helpers.PointHelper(lore, 'Test', 'sphere');
pointHelper.setPositionsXYZHSS(x, y, z, h, 1.0, 1.0);
pointHelper.setPointScale(5.0);

lore.controls.setLookAt(pointHelper.getCenter());
lore.controls.setRadius(pointHelper.getMaxRadius());

// Now add some interactivity ...
let octreeHelper = new Lore.Helpers.OctreeHelper(lore, 'OctreeGeometry', 'tree', pointHelper);

octreeHelper.addEventListener('hoveredchanged', function(e) {
  let indicator = document.getElementById('indicator');
  let data = document.getElementById('data');
	
  // As the position and the radius of the hovered element is known
  // it can be highlghted using HTML overlays -> more possibilities and easier
  // to achieve than messing around in the shader.
  
  if (e.e) {
    indicator.style.opacity = 1.0;
    indicator.style.left = (e.e.screenPosition[0] - 18) + 'px';
    indicator.style.top = (e.e.screenPosition[1] - 70) + 'px';
    indicator.innerHTML = e.e.index;
  } else {
    indicator.style.opacity = 0.0;
  }
});