JSFiddle - React, Tailwind, and code Playground

by marquizzo

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.setScalar(15);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new OrbitControls(camera, renderer.domElement);

var pts = [];
var idx = [];
var colors = [];
var ptsAmount = 4000;
var multiplier = 20;
for (let i = 0; i < ptsAmount; i++){
	pts.push(
  	new THREE.Vector3(
      Math.random() - 0.5,
      Math.random() - 0.5,
      Math.random() - 0.5
    ).multiplyScalar(multiplier)
  );
  idx.push(i);
  colors.push(
  	0.25 + Math.random() * 0.5,
    0.25 + Math.random() * 0.5,
    0.25 + Math.random() * 0.5
  );
}
var ptsGeom = new THREE.BufferGeometry().setFromPoints(pts);
ptsGeom.setAttribute("idx", new THREE.BufferAttribute(new Float32Array(idx), 1));
ptsGeom.setAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));

var ptsMat = new THREE.PointsMaterial({vertexColors: true, size: 0.1});
var ptsUniforms = {
	pointIndex: {value: -1},
  highlightColor: {value: new THREE.Color(1, 1, 0)}
}
ptsMat.onBeforeCompile = shader => {
	shader.uniforms.pointIndex = ptsUniforms.pointIndex;
  shader.uniforms.highlightColor = ptsUniforms.highlightColor;
  shader.vertexShader = `
  	uniform float pointIndex;
    uniform vec3 highlightColor;
    
  	attribute float idx;
    ${shader.vertexShader}
  `;
  shader.vertexShader = shader.vertexShader
  .replace(
  	`#include <color_vertex>`,
    `#include <color_vertex>
    bool isIntersected = floor(idx + 0.1) == floor(pointIndex + 0.1);
    	if (isIntersected == true) vColor.rgb = highlightColor.rgb;
    `
  )
  .replace(
  `gl_PointSize = size;`,
  `
  	float scaleSize = isIntersected == true ? 10. : 1.;
    gl_PointSize = size *...