JSFiddle - React, Tailwind, and code Playground

by dthevenin

HTML

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

JavaScript

let scene, renderer, camera, aspect = 1;
const pointer = new THREE.Vector2();
let raycaster;
const start = Date.now();
let uniforms;
const numPoints = 10;
let particles;

const threshold = 0.1;

const vertexshader = `
  attribute vec3 color;
  uniform float time;


  varying vec3 vColor;

  void main() {

    vColor = color;

    vec4 mvPosition = modelViewMatrix * vec4(position.x + time, position.y, position.z, 1.0);


    gl_PointSize = 30.0;

    gl_Position = projectionMatrix * mvPosition;
  }
`

const fragmentshader = `
  uniform sampler2D pointTexture;

  varying vec3 vColor;

  void main() {
    gl_FragColor = vec4( vColor, 0.5);
  }
`

function configureViewport() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  aspect = width / height;
  camera.aspect = aspect;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

function init() {
  var container = document.createElement('div');
  document.body.appendChild(container);
  
  scene = new THREE.Scene();
  
  camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 1000);
  camera.position.set( 0, 0, 100 );
  camera.lookAt( scene.position );
  camera.updateMatrix();
  
  scene.add(camera);
  
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setClearColor(0xccccff);
  renderer.setPixelRatio(window.devicePixelRatio);
  container.appendChild(renderer.domElement);

  raycaster = new THREE.Raycaster();

  window.addEventListener('resize', configureViewport, false);
  document.addEventListener( 'pointermove', onPointerMove );
  configureViewport();
}


function getTime() {
  return (Date.now() - start) / 100000;
}



function animate() {
  requestAnimationFrame(animate);

  // Please uncomment that line
  /* if (uniforms) uniforms.time.value = getTime() */;
  
  renderer.render(scene, camera);
}


function onPointerMove(event) {
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = - (event.clientY / window.innerHeight) * 2 +...