JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.min.js"></script>

CSS

body {
	  margin: 0;
    background-color: #00ff00;
}

JavaScript

let camera, scene, renderer;
let cameraOrtho, sceneOrtho;

let spriteTL, spriteTR, spriteBL, spriteBR, spriteC;

let mapC;

let group;

init();
animate();

function init() {

  const width = window.innerWidth;
  const height = window.innerHeight;

  camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
  camera.position.z = 1500;

  cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
  cameraOrtho.position.z = 10;

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0x000000, 1500, 2100 );

  sceneOrtho = new THREE.Scene();

  // create sprites

  const amount = 200;
  const radius = 500;

  const textureLoader = new THREE.TextureLoader();

  textureLoader.load( 'https://threejs.org/examples/textures/sprite0.png', createHUDSprites );
  const mapB = textureLoader.load( 'https://threejs.org/examples/textures/sprite1.png' );
  mapC = textureLoader.load( 'https://threejs.org/examples/textures/sprite2.png' );

  mapB.colorSpace = THREE.SRGBColorSpace;
  mapC.colorSpace = THREE.SRGBColorSpace;

  group = new THREE.Group();

  const materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
  const materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );

  for ( let a = 0; a < amount; a ++ ) {

    const x = Math.random() - 0.5;
    const y = Math.random() - 0.5;
    const z = Math.random() - 0.5;

    let material;

    if ( z < 0 ) {

      material = materialB.clone();

    } else {

      material = materialC.clone();
      material.color.setHSL( 0.5 * Math.random(), 0.75, 0.5 );
      material.map.offset.set( - 0.5, - 0.5 );
      material.map.repeat.set( 2, 2 );

    }

    const sprite = new THREE.Sprite( material );

    sprite.position.set( x, y, z );
    sprite.position.normalize();
    sprite.position.multiplyScalar( radius );

    group.add( sprite );

  }

  scene.add( group );

  // renderer

  renderer = new THREE.WebGLRenderer( {...