JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://raw.githack.com/byondrnd/three.js/dev/build/three.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var container;

var renderer, scene, camera;

var ambient, spotLight;

var cube1, cube2, cube3;

init();
animate();

function init() {

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

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	renderer.outputEncoding = THREE.sRGBEncoding;

	container.appendChild(renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(65, 8, - 10);
	camera.lookAt( scene.position );
	camera.layers.enable(0); // default
	camera.layers.enable(1); // render objects on additional layer

	ambient = new THREE.AmbientLight(0xffffff, 0.1);
	ambient.name = 'AmbientLight';
	scene.add(ambient);

	// Spot Light
	spotLight = new THREE.SpotLight(0xffffff, 1);
	spotLight.position.set(15, 40, 35);
	spotLight.angle = Math.PI / 4;
	spotLight.penumbra = 0.05;
	spotLight.decay = 2;
	spotLight.distance = 200;

	spotLight.castShadow = true;
	spotLight.shadow.mapSize.width = 1024;
	spotLight.shadow.mapSize.height = 1024;
	
	spotLight.layers.enable(0); // default

	scene.add(spotLight);


	//Ground
	var material = new THREE.MeshPhongMaterial({ color: 0x808080, dithering: true });
	var geometry = new THREE.PlaneBufferGeometry(2000, 2000);

	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.set(0, - 1, 0);
	mesh.rotation.x = - Math.PI * 0.5;
	mesh.receiveShadow = true;
	scene.add(mesh);

	//Cubes
	var material = new THREE.MeshPhongMaterial({ color: 0x4080ff });
	var geometry = new THREE.BoxBufferGeometry(3, 1, 2);

	cube1 = new THREE.Mesh(geometry, material);
	cube1.position.set(0, 2, 0);
	cube1.castShadow = true;
	cube1.layers.set(0); // default
	scene.add(cube1);

	cube2 = new...