JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var points = [
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(),
  new THREE.Vector3(),
  new THREE.Vector3(5, 5, 0),
  new THREE.Vector3(5, 5, 0),
  new THREE.Vector3(5, -5, 0)
];

var geom = new THREE.BufferGeometry().setFromPoints(points);
geom.addAttribute("color", new THREE.BufferAttribute(new Float32Array([1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, .5, .5, .5, 1, 0, 1]), 3));
geom.addAttribute("colorBase", new THREE.BufferAttribute(new Float32Array([1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, .5, .5, .5, 1, 0, 1]), 3));
var mat = new THREE.LineBasicMaterial({
  vertexColors: THREE.VertexColors
});
var line = new THREE.LineSegments(geom, mat);
scene.add(line);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var oldIndex = -1;
var col = new THREE.Color();

window.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(line);
  if (intersects.length === 0) return;
	let idx = intersects[0].index;
 	if (idx !== oldIndex) highlightSegment(idx, 0xFFFF00);
}

function highlightSegment(idx, color){
	setColor(idx, color);
  if (oldIndex !== -1) {restoreColor();}
  oldIndex = idx;
}

function setColor(idx, color){
	let idxNear = idx % 2 === 0 ? idx + 1: idx - 1;
  col.set(color);
  let colors = line.geometry.attributes.color;
  colors.setXYZ(idx, col.r, col.g, col.b);
  colors.setXYZ(idxNear, col.r, col.g, col.b);
  colors.needsUpdate = true;
}

function restoreColor(){
	let oldIndexNear =...