JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
//console.log(THREE.REVISION);

let pickingBackground = {
	on: new THREE.Color(0xffffff),
  off: new THREE.Color(0x403030)
}


let camera, controls, scene, renderer, clock;
let geometry;
let counter = 5000;
let pickingTexture;
const pickingData = [];
let pickingUniforms = {
	picking: {value: 0},
  pickingIdx: {value: counter + 1},
  time: {value: 0}
};

const pointer = new THREE.Vector2();
const offset = new THREE.Vector3(10, 10, 10);

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.x = 1500;

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x404040);

  pickingTexture = new THREE.WebGLRenderTarget(1, 1);
  
  const pointsMaterial = new THREE.PointsMaterial({
  	size: 50,
    vertexColors: true,
    onBeforeCompile: shader => {
    	shader.uniforms.time = pickingUniforms.time;
    	shader.uniforms.picking = pickingUniforms.picking;
      shader.uniforms.pickingIdx = pickingUniforms.pickingIdx;
      shader.vertexShader = `
      	uniform float time;
      	uniform float pickingIdx;
      	attribute vec3 clrPick;
        attribute float idx;
        varying vec3 vClrPick;
        varying float vHighlight;
        ${shader.vertexShader}
      `.replace(
      	`#include <begin_vertex>`,
        `#include <begin_vertex>
        	transformed.x = -1500. + mod(-1500. + (position.x + time * 50.), 3000.); // eternal cycle
        `
      )
      .replace(
      	`#include <fog_vertex>`,
        `#include <fog_vertex>
        	vClrPick = clrPick;
          vHighlight = pickingIdx == idx ? 1. : 0.;
        `
      );
      console.log(shader.vertexShader);
    	shader.fragmentShader = `
      	uniform float time;
      	uniform float picking;
      	varying vec3 vClrPick;
       ...