JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="http://threejs.org/build/three.min.js"></script>

<div id="container"></div>

CSS

body {
        color: #ffffff;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #000000;
        margin: 0px;
        overflow: hidden;
    }
    #info {
        color: #fff;
        position: absolute;
        top: 0px; width: 100%;
        padding: 5px;
        z-index:100;
    }

JavaScript

var renderer, scene, camera, stats;
			var pointclouds;
			var raycaster, intersects;
			var mouse = new THREE.Vector2();
			var intersection = null;
			var spheres = [];
			var spheresIndex = 0;
			var clock;

			var threshold = 0.5;
			var pointSize = 0.2;
			var width = 50;
			var length = 50;
			var rotateY = new THREE.Matrix4().makeRotationX( 0.005 );

			init();
			animate();

			function generateRegularPointcloud( color, width, length ) {

				var geometry = new THREE.Geometry();
				var numPoints = width * length;

				var colors = [];

				var k = 0;

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

					for( var j = 0; j < length; j++ ) {

						var u = i / width;
						var v = j / length;
						var x = u - 0.5;
						var y = 0;
						var z = v - 0.5;
						var v = new THREE.Vector3( x,y,z );

						var intensity = ( y + 0.1 ) * 7;
						colors[ 3 * k ] = color.r * intensity;
						colors[ 3 * k + 1 ] = color.g * intensity;
						colors[ 3 * k + 2 ] = color.b * intensity;

						geometry.vertices.push( v );
						colors[ k ] = ( color.clone().multiplyScalar( intensity ) );

						k++;

					}

				}

				geometry.colors = colors;
				geometry.computeBoundingBox();

				var material = new THREE.PointCloudMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
				var pointcloud = new THREE.PointCloud( geometry, material );

				return pointcloud;

			}

			function init() {

				container = document.getElementById( 'container' );

				scene = new THREE.Scene();

				clock = new THREE.Clock();

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.applyMatrix( new THREE.Matrix4().makeTranslation( 0,0,15 ) );
				camera.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI/2 ) );


				var pcRegular = generateRegularPointcloud( new THREE.Color( 1,0,1 ), width, length );
				pcRegular.scale.set( 10,10,10 );
				pcRegular.position.set( 0,0,0 );
				scene.add( pcRegular );

				pointclouds = [...