JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var container, stats;
var camera, scene, renderer, particles, geometry, material, positions, colors, alphas,sizes, sumDisplacement, x,y,z;
var mouseX = 0,
    mouseY = 0;
		tex = new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/ball.png", t => {
    t.center.setScalar(0.5);
    t.rotation = -Math.PI * 0.5;
    });
  
var pointsMat = new THREE.PointsMaterial( { map: tex, vertexColors: THREE.VertexColors, alphaTest: 0.5});
pointsMat.onBeforeCompile = shader => {
	shader.vertexShader = `
  	attribute float sizes;
    attribute vec3 offset;
  ` + shader.vertexShader;
  console.log(shader.vertexShader);
  shader.vertexShader = shader.vertexShader.replace(
  	`#include <begin_vertex>`,
    `#include <begin_vertex>
    transformed += offset;
    `
  )
  shader.vertexShader = shader.vertexShader.replace(
  	`gl_PointSize = size;`,
    `gl_PointSize = size * sizes;`
  )
}


init();
animate(animate);

function init() {
container = document.createElement('div');
    document.body.appendChild(container);

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

    scene = new THREE.Scene();

    geometry = new THREE.BufferGeometry();
		positions = new Float32Array(3000);
    colors = new Float32Array(3000);
    sizes = new Float32Array(1000);
    alphas = new Float32Array(1000);
    for (i = 0; i < 1000; i++) {

        x = 2000 * Math.random() - 1000;
        y = 2000 * Math.random() - 1000;
        z = 2000 * Math.random() - 1000;
        positions[i * 3 + 0] = x;
        positions[i * 3 + 1] = y;
        positions[i * 3 + 2] = z;
        
        colors[i * 3 + 0] = Math.random();
        colors[i * 3 + 1] = Math.random();
        colors[i * 3 + 2] = Math.random();
        
        sizes[i] = (Math.random() * 90) + 10;
        //alphas[i] = 1;

    }

    sumDisplacement =  [-3000, 0, 0, 0, 0, 0, 3000, 0, 0];
    
    
    var geometry = new...