JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;
var points;
var stats;

var worldWidth = 200;
var worldRadius = worldWidth / 2;
var patchSize = 10;

// =================
var numAgents = 256;
// =================

init();
animate();

function init() {

	// info
	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'Drag mouse to rotate camera; scroll to zoom';
	document.body.appendChild( info );

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

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

	//camera
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( worldWidth, worldWidth, worldWidth );

	// controls
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 100;
	controls.maxDistance = 800;

	// grid
	scene.add( new THREE.GridHelper( 2 * worldRadius, 2 * worldWidth / patchSize, 0x444444, 0x444444 ) );

	// axes
	scene.add( new THREE.AxisHelper( 1.1 * worldRadius ) );

	// geometry
	var geometry = new THREE.BufferGeometry();

	// attributes
	var positions = new Float32Array( numAgents * 3 ); // 3 values per vertex
	var rotations = new Float32Array( numAgents * 1 ); // 1 values per vertex

	for ( var i = 0; i < numAgents; i ++ ) {

		positions[ i ] = 0;
		positions[ i + 1 ] = 0;
		positions[ i + 2 ] = 0;
		rotations[ i ] = 2 * Math.PI * Math.random();

	}

	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
	geometry.addAttribute( 'rotation', new THREE.BufferAttribute( rotations, 1 ) );

	// material
	var material = new THREE.PointsMaterial(...