JSFiddle - React, Tailwind, and code Playground

by titansoftime

HTML

<script type="text/javascript" src="https://www.titansoftime.com/webgl/Three110.full.js"></script>
    <!--script type="text/javascript" src="https://www.titansoftime.com/webgl/Three118.min.js"></script-->
    <script type="text/javascript" src="https://www.titansoftime.com/webgl/SPE.raw.js"></script>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
    color: white;
    font-family: sans-serif;
    overflow: hidden;
    margin: 0;
}

p {
    margin: 0.2em 0;
}

p.small {
    font-size: 0.8em;
}

.numParticles {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: white;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.alive-wrapper {
    position: absolute;
    top: 2em;
    width: 25em;
    left: 50%;
    margin-left: -12.5em;
    text-align: center;
    padding: 1em;
    background-color: rgba( 255, 255, 255, 0.15 );
    border-radius: 1em;
    border: 1px solid rgba( 255, 255, 255, 0.3 );
}

#stats {
    position: absolute;
    top: 0;
    z-index: 2;
}

JavaScript

var loader = new THREE.TextureLoader();

var scene, camera, renderer, clock;

// Used in initParticles()
var emitter, particleGroup;

// Setup the scene
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor(0x42c7ff);

  clock = new THREE.Clock();

  scene.fog = new THREE.Fog( renderer.getClearColor(), 20, 0 );

  document.body.appendChild( renderer.domElement );

}

// Create particle group and emitter
function initParticles() {
  particleGroup = new SPE.Group({
    texture: {
      value: loader.load('https://www.titansoftime.com/img/particles/4.png')
    },
    blending: THREE.NormalBlending,
    fog: true
  });

  emitter = new SPE.Emitter({
    particleCount: 750,
    maxAge: {
      value: 3,
    },
    position: {
      value: new THREE.Vector3( 0, -15, -50 ),
      spread: new THREE.Vector3( 100, 30, 100 )
    },
    velocity: {
      value: new THREE.Vector3( 0, 0, 30 )
    },
    wiggle: {
      spread: 10
    },
    size: {
      value: 75,
      spread: 50
    },
    opacity: {
      value: [ 0, 1, 0 ]
    },
    color: {
      value: new THREE.Color( 1, 1, 1 ),
      spread: new THREE.Color( 0.1, 0.1, 0.1 )
    },
    angle: {
      value: [ 0, Math.PI * 0.125 ]
    }
  });

  particleGroup.addEmitter( emitter );
  scene.add( particleGroup.mesh );

}



function animate() {
  requestAnimationFrame( animate );
  render( clock.getDelta() );
}


function render( dt ) {
  particleGroup.tick( dt );
  renderer.render( scene, camera );
}


window.addEventListener( 'resize', function() {
  var w = window.innerWidth,
      h = window.innerHeight;

  camera.aspect = w / h;
  camera.updateProjectionMatrix();

  renderer.setSize( w, h );
}, false );

init();
initParticles();

setTimeout(animate, 0);