JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script type="x-shader/x-vertex" id="vertexshader">
	precision mediump float;
	precision mediump int;
	
	attribute vec3 position;
	attribute vec4 color;
	attribute float size;
	uniform mat4 modelViewMatrix; 
	uniform mat4 projectionMatrix; 
	
	varying vec4 vColor;
	
	void main() 
	{
		gl_PointSize = size * 5.0;
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
	precision mediump float;
	precision mediump int;

	varying vec4 vColor;
	
    void main() 
	{
		vec4 color = vec4(1.0, 0.0, 0.0, 1.0);
		gl_FragColor = color;
    }
</script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var gravity = -9.81;
var particleindex = 0, particleCount = 1000,
		particle_geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
var size = [];

for(var i = 0; i < particleCount; ++i)
{
	colors.push(255);
	colors.push(0);
	colors.push(0);
	colors.push(255);
	size.push(5);
	positions.push(0.0);
	positions.push(0.0);
	positions.push(0.0);
}

var colorAttribute = new THREE.Uint8BufferAttribute(colors, 4);
colorAttribute.normalized = true;

particle_geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
particle_geometry.addAttribute('color', colorAttribute);
particle_geometry.addAttribute('size', new THREE.Float32BufferAttribute(size, 1));

var material = new THREE.RawShaderMaterial
({
	uniforms: 
	{
		time: {value: 1.0}
	},
	vertexShader: document.getElementById( 'vertexshader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
	side: THREE.DoubleSide,
	transparent: true
});

var particleSystem = new THREE.Points(particle_geometry, material),
		height = 10, max_pos_dist_xz = 20, max_neg_dist_xz = max_pos_dist_xz / 2;
var planegeometry, planematerial, planemesh;
planegeometry = new THREE.PlaneGeometry(200, 200, 0);
planematerial = new THREE.MeshBasicMaterial();
planemesh = new THREE.Mesh(planegeometry, planematerial);

var particle_offset = particle_geometry.attributes.size.array[0] / 2;
var particle_emitted = [];
var particle_has_bounced = [];
var particle_velocity = [];
var particle_velocities = [];
var particle_life = 10;
var particle_lives = [];
var propellant_mass = 1000;
var particle_mass = propellant_mass / particleCount;
var particle_deceleration = -0.5 * 1000 * 1000 * 1.225 * 
		particle_geometry.attributes.size.array[0] *
		particle_geometry.attributes.size.array[0] / particle_mass;
var dt = 1 / 60;

function init()
{
	camera = new THREE.PerspectiveCamera(70, window.innerWidth /
																			 window.innerHeight, 0.01, 1e6);
	var...