JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<div id="container"></div>

JavaScript

var SEPARATION = 100,
AMOUNTX = 100,
AMOUNTY = 70;

var container;
var camera, scene, renderer;

var particles, particle, count = 0;

var mouseX = 85,
mouseY = -342;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;

scene = new THREE.Scene();

particles = new Array();

var PI2 = Math.PI * 2;
var material = new THREE.ParticleCanvasMaterial({

color: 11111100,
program: function(context) {

context.beginPath();
context.arc(0, 0, .7, 0, PI2, true);
context.fill();

}

});

var i = 0;

for (var ix = 0; ix < AMOUNTX; ix++) {

for (var iy = 0; iy < AMOUNTY; iy++) {

particle = particles[i++] = new THREE.Particle(material);
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
scene.add(particle);

}

}

renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);

//

window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

//

function onDocumentMouseMove(event) {

mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;

}

function onDocumentTouchStart(event) {

if (event.touches.length === 1) {

event.preventDefault();

mouseX = event.touches[0].pageX - windowHalfX;
mouseY =...