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); 

	// 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 listeners for the mouse
	targetList.push(backgroundMesh);
}

// Follows the mouse event
function onMouseMove(event)...