JSFiddle - React, Tailwind, and code Playground

by Javier Cruz

HTML

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

		<!-- Definition of shader material for the default particles -->
		<script type="x-shader/x-vertex" id="default-vertexshader">
		   attribute float alpha;
		   varying vec3 vColor;
			 varying vec2 vUv;
			 uniform float size;
			 uniform float scale;
			 //Maps textures
			 void main() {
					vUv = uv;
		      vColor = color;
		      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
					float sizeAttenuation = size * ( scale / length( mvPosition.xyz ) );
		      gl_PointSize = size * alpha * sizeAttenuation ; // alpha to vary point size
		      gl_Position = projectionMatrix * mvPosition;
				}
		</script>
		<script type="x-shader/x-fragment" id="default-fragmentshader">
		    varying vec3 vColor;
		    void main() {
		        gl_FragColor = vec4( vColor, 1.0 );
		    }
		</script>

JavaScript

init();
animate();

function init() {

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

  // scene
  scene = new THREE.Scene();

  //camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;
}
var PointSystem(pc, sSize, listX, listY, listZ, col ) {
  // System parameters
  var pointCount = pc || 6;
  var spaceSide = sSize || 200;
  var lx = listX || [-1,1,0,0,0,0];
  var ly = listY || [0,0,1,-1,0,0];
  var lz = listZ || [0,0,0,0,1,-1];
  var color4all = col || new THREE.Color(1,1,1);
  
  // Buffer geometry attribues
  var positions = new Float32Array(count * 3);
  var colors = new Float32Array(count * 3);
  var alphas = new Float32Array(count);

  var geometry = new THREE.BufferGeometry();

  var halfSide = spaceSide/2;
  for (var i = 0; i < this.count; i++) {
    
    //  set position
    var x = lx[i] * halfSide;
    var y = ly[i] * halfSide;
    var z = lz[i] * halfSide;

    positions[i * 3 + 0] = x; //x;
    positions[i * 3 + 1] = y; // y;
    positions[i * 3 + 2] = z; //z;

    // colors
    colors[i * 3 + 0] = color4all.r;
    colors[i * 3 + 1] = color4all.g;
    colors[i * 3 + 2] = color4all.b;

    // sizes
    alphas[i] = Array.isArray(this.particleSize) ? this.particleSize[i] : this.particleSize;
  }

  geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
  geometry.addAttribute('alpha', new THREE.BufferAttribute(alphas, 1));

  //this.geometry.computeBoundingSphere();
  //this.geometry.computeBoundingBox();
  geometry.boundingBox = null;
  
  var uniforms = {
  	"size" : { type: "f", value: 1.0 }, //used to size attenuation
    "scale" : { type: "f", value: window.innerHeight / 2 }
  };
  var material = new THREE.ShaderMaterial( {
    uniforms:       uniforms,
   ...