JSFiddle - React, Tailwind, and code Playground

by _Sud

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/Three.js"></script>

CSS

body{
	padding: 0px;
	margin: 0px;
	background: linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
	background: -o-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
	background: -moz-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
	background: -webkit-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
	background: -ms-linear-gradient(left, rgb(38,38,212) 35%, rgb(133,81,178) 62%, rgb(8,5,28) 81%);
	oveflow:hidden;
}

JavaScript

var camera, // Core 3.js component
	scene, // Core 3.js component
	renderer, // Core 3.js component
	mouseX = 0, // Tracking Mouse Positions
	mouseY = 0, // Tracking Mouse Positions
	charCounter = 0951,
	particles= []; // Array to store all particles
	
	init(); //Call Initializer
	
	//Initializer function
	function init(){
		//Focus of View( Camera view angle), Aspect Ratio, near Clipping Frame and Far Clipping Frame
		camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 10000 ); 
		
		/*The first parameter for the Camera constructor is field of view. This is an angle in degrees – the larger the angle, the wider the virtual camera lens.

		The second parameter is the aspect ratio between the width and the height of the output. This has to match the aspect of the CanvasRenderer, which we’ll come to in a moment.

		The camera can only see objects within a certain range, defined by near and far, set here to 1 and 4000 respectively. So any object that is closer than 1 or further away than 4000 will not be rendered.

		By default the camera is at the origin of the 3D world, 0,0,0, which isn’t very useful because any 3D object you create will also be positioned at at the origin. It’s a good idea to move the camera back a bit by giving it a positive z position (z increases as it comes out of the screen towards you). In this case we’re moving it back by 1000.*/
		
		//Set Z-index of Camera backward to see some 3D view
		camera.position.z = 100;
		
		//Creating a Scene for 3D Data
		scene = new THREE.Scene();
		scene.add(camera); // Adding a camera to Scene
		
		renderer = new THREE.CanvasRenderer(); //Create a renderer for Canvas
		renderer.setSize(window.innerWidth, window.innerHeight); //Set to window size or your size
		
		document.body.appendChild(renderer.domElement); //We are adding three.js canvas element to DOM Here
		makeParticles(); // Create Particles
	//document.addEventListener("mousemove",onMove,false); // Add handler to all...