JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r99/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS2DRenderer.js"></script>

JavaScript

var camera, scene, renderer, stats, material, labelRenderer;
			var mouseX = 0, mouseY = 0;

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

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
				camera.position.z = 1000;

				scene = new THREE.Scene();
        scene.background = new THREE.Color('#FFF');
//				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );

				var geometry = new THREE.Geometry();
				var vertices = [];

				var sprite = new THREE.TextureLoader()
        .load( 'https://threejs.org/examples/textures/sprites/disc.png');

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

					var x = 2000 * Math.random() - 1000;
					var y = 2000 * Math.random() - 1000;
					var z = 2000 * Math.random() - 1000;

					vertices.push( new THREE.Vector3(x, y, z) );

				}

				geometry.vertices = vertices;
        
//			geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

				material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
				material.color.setHSL( 1.0, 0.3, 0.7 );

				var particles = new THREE.Points( geometry, material );
				scene.add( particles );
        
        console.info({geometry});

				//

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

				//
        
        labelRenderer = new THREE.CSS2DRenderer();
				labelRenderer.setSize( window.innerWidth, window.innerHeight );
				labelRenderer.domElement.style.position = 'absolute';
				labelRenderer.domElement.style.top = '0px';
				document.body.appendChild( labelRenderer.domElement );

				//
        
        for (var i = 0; i < particles.geometry.vertices.length; i++) {
        	var labelDiv =...