JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>

CSS

body {
	  margin: 0;
	  background: orange;
	  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00dbaf+0,8d82e0+50,bc5eb0+100 */
	  background: rgb(0, 219, 175);
	  /* Old browsers */
	  background: -moz-linear-gradient(-45deg, rgba(0, 219, 175, 1) 0%, rgba(141, 130, 224, 1) 50%, rgba(188, 94, 176, 1) 100%);
	  /* FF3.6-15 */
	  background: -webkit-linear-gradient(-45deg, rgba(0, 219, 175, 1) 0%, rgba(141, 130, 224, 1) 50%, rgba(188, 94, 176, 1) 100%);
	  /* Chrome10-25,Safari5.1-6 */
	  background: linear-gradient(135deg, rgba(0, 219, 175, 1) 0%, rgba(141, 130, 224, 1) 50%, rgba(188, 94, 176, 1) 100%);
	  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dbaf', endColorstr='#bc5eb0', GradientType=1);
	  /* IE6-9 fallback on horizontal gradient */
	}

	canvas {
	  width: 50vh;
	  height: 50vh;
	  background: rgba(0,0,0,1);
	  overflow: hidden;
	}

JavaScript

/* get random*/
const getRandom = function(min, max) {
  return Math.random() * (max - min) + min;
};
/* scene */
var scene = new THREE.Scene();
/* camera */
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
/* camera.rotation.z = 0.5; */
camera.position.z = 50;
/* camera.rotation.x = -0.02; */
/* const cubeCamera = new THREE.CubeCamera(1, 1, 100); 
scene.add(cubeCamera); */


/* renderer */
var renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMap.enabled = true;
/* renderer.shadowMap.type = THREE.PCFSoftShadowMap; */
/* renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap */

var spotLight = new THREE.SpotLight(0x0000ff, 1.0);
spotLight.position.set(20, 100, 0);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 2048; // You have there 4K no need to go over 2K

spotLight.shadow.mapSize.height = 2048; //   
spotLight.intensity = 0.7;
scene.add(spotLight);

var spotLight = new THREE.SpotLight(0xff0000, 1.0);
spotLight.position.set(-20, 100, 0);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 2048; 
spotLight.intensity = 0.7;
spotLight.shadow.mapSize.height = 2048; //   
scene.add(spotLight);

var light = new THREE.AmbientLight(0xffffff); 
light.intensity = 0.25;
spotLight.castShadow = true;
scene.add(light);

var pointlight = new THREE.PointLight(0x00ff00, 1, 100);
pointlight.position.set(0, 6, -3);
pointlight.intensity = 0.8;
pointlight.castShadow = true;
pointlight.shadow.mapSize.width = 2048;
pointlight.shadow.mapSize.height = 2048;    
var sphereSize = 1.2;
var pointLightHelper = new THREE.PointLightHelper(pointlight, sphereSize);
/* scene.add( pointLightHelper ); */
scene.add(pointlight);

/* TESTERS */
const showBounds = () => {

  /* center front example */
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  var...