JSFiddle - React, Tailwind, and code Playground

by wilt

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/modifiers/ExplodeModifier.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/modifiers/TessellateModifier.js"></script>
<div id="container"></div>

CSS

body {
  margin: 0 auto;
}

JavaScript

// Define the standard global variables
var container,
  scene,
  camera,
  renderer,
  INTERSECTED;

// Define the vector variables
var attractor = new THREE.Vector2(),
  pointer = new THREE.Vector2();

// Custom global variables
var targetList = [],
  mouse = {
    x: 0,
    y: 0
  };

init();
animate();

function init() {

  // Scene
  scene = new THREE.Scene();

  // Camera
  var screenWidth = window.innerWidth,
    screenHeight = window.innerHeight,
    viewAngle = 75,
    nearDistance = 0.1,
    farDistance = 1000;
  camera = new THREE.PerspectiveCamera(viewAngle, screenWidth / screenHeight, nearDistance, farDistance);
  scene.add(camera);
  camera.position.set(0, 0, 5);
  camera.lookAt(scene.position);

  // Renderer engine together with the background
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setSize(screenWidth, screenHeight);
  container = document.getElementById('container');
  container.appendChild(renderer.domElement);
  container.addEventListener('mousemove', onMouseMove, true);

  // Define the lights for the scene
  var light = new THREE.PointLight(0xffffff);
  light.position.set(20, 0, 20);
  scene.add(light);
  var lightAmb = new THREE.AmbientLight(0x777777);
  scene.add(lightAmb);

  // Properties for the refraction of the geometry
  var faceColorMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
  });

  // Give casual colors to geometry
  var faceGeometry = new THREE.PlaneGeometry(32, 32, 40, 40);
  for (var i = 0; i < faceGeometry.faces.length; i++) {
    face = faceGeometry.faces[i];
    face.color.setRGB(0, 0, 0.8 * Math.random() + 0.2);
  }

  var backgroundMesh = new THREE.Mesh(faceGeometry, faceColorMaterial);
  backgroundMesh.acc = THREE.Vector3(0, 0, 0);
  backgroundMesh.vel = THREE.Vector3(0, 0, 0);
  backgroundMesh.position.z = -5;
  // refractSphereCamera.position = backgroundMesh.position;
  scene.add(backgroundMesh);

  // Events...