JSFiddle - React, Tailwind, and code Playground

by spacorum

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer, group;

var params = {
  outlineColor: '#ffffff',
  insetOutline: false,
  thickness: 15,
};

var uniforms = {
	outlineColor: { value: new THREE.Color( params.outlineColor ) },
  outlineThickness: { value: params.thickness },
  resolution: { value: new THREE.Vector2() }
};

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2100 );
  camera.position.z = 1500;

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

  // create sprites

  var amount = 3;
  var radius = 500;

  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load( 'https://i.postimg.cc/6p5HGfhq/test.png', function() {
  
    var width = texture.image.width;
    var height = texture.image.height;
  
  	uniforms.resolution.value.set( width, height );
  
  } );
	texture.minFilter = THREE.LinearFilter;

  group = new THREE.Group();

  var material = new THREE.SpriteMaterial( { map: texture, color: 0xffffff, fog: true } );
  material.onBeforeCompile = onBeforeCompile;
  
  for ( var i = 0; i < amount; i ++ ) {

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

    var 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();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  //

  var gui = new dat.GUI();

  gui.addColor( params, 'outlineColor' ).onChange( function ( value ) {

    uniforms.outlineColor.value.set( value );

  } );

  gui.add( params, 'insetOutline' ).onChange( function ( value ) {

    if ( ! value ) material.defines = {};
    else material.defines = {...