JSFiddle - React, Tailwind, and code Playground

HTML

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

<script type="x-shader/x-vertex" id="vertexshader">
    
    uniform float time;
    
    attribute float i;
    
    void main() {
        
        vec3 p = vec3 (
            sin (i * 3.0) * 100.0,
            cos (i * 5.0) * 100.0 + sin (time + i) * 10.0,
            0.0
        );
        
        vec4 mvPosition = modelViewMatrix * vec4( p/*osition*/, 1.0 );
        
        gl_PointSize = sin(time+ i) * 10.0 * ( 300.0 / length( mvPosition.xyz ) );
        
        gl_Position = projectionMatrix * mvPosition;
        
    }
    
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
    
    uniform sampler2D texture;
    
    void main() {
                
        gl_FragColor = texture2D( texture, gl_PointCoord );
        
    }
    
</script>

CSS

body {
    margin: 0;
}

JavaScript

// forked from makc's "forked: Official three.js particles demo to fork" http://jsdo.it/makc/mm0y
// forked from makc's "Official three.js particles demo to fork" http://jsdo.it/makc/oIGl
var renderer, scene, camera, stats;

var particleSystem, uniforms, geometry;

var particles = 100000;

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

init();
animate();

function init() {
    
    camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
    camera.position.z = 300;
    
    scene = new THREE.Scene();
    
    THREE.ImageUtils.crossOrigin = "";

    uniforms = {
        
        time:      { type: "f", value: 0 },
        texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "http://i.imgur.com/Nj6spnf.png" ) }
        
    };
    
    var shaderMaterial = new THREE.ShaderMaterial( {
        
        uniforms:       uniforms,
        vertexShader:   document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
        
        blending:       THREE.AdditiveBlending,
        depthTest:      false,
        transparent:    true
        
    });
    
    
    var radius = 200;
    
    geometry = new THREE.BufferGeometry();
    
    var sizes = new Float32Array( particles );
    var indices = new Float32Array( particles );
    
    var color = new THREE.Color();
    
    for ( var i = 0; i < particles; i ++ ) {
        
        indices[ i ] = i;
        
    }
    
    geometry.addAttribute( 'i', new THREE.BufferAttribute( indices, 1 ) );
    geometry.addGroup( 0, particles );
    
    particleSystem = new THREE.Points( geometry, new THREE.MultiMaterial( [ shaderMaterial] ) );
    particleSystem.frustumCulled = false;
    
    scene.add( particleSystem );
    
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( WIDTH, HEIGHT );
    document.body.appendChild( renderer.domElement );
    
   ...