JSFiddle - React, Tailwind, and code Playground

by kovacsv

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/HorizontalBlurShader.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/VerticalBlurShader.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
<canvas id="canvas"></canvas>

JavaScript

function Sandbox3D ()
{
	let canvas = document.getElementById ('canvas');

	let parameters = {
		canvas : canvas,
		antialias : true
	};

	let width = 400;
	let height = 300;
	let renderer = new THREE.WebGLRenderer (parameters);
	renderer.setClearColor ('#ffffff', 1);
	renderer.setSize (width, height);
	renderer.localClippingEnabled = true;

	let scene = new THREE.Scene ();

	let ambientLight = new THREE.AmbientLight (0x888888);
	scene.add (ambientLight);

	let light = new THREE.DirectionalLight (0x888888);
	light.position.set (3.0, -1.5, 2.0);
	scene.add (light);

	let camera = new THREE.PerspectiveCamera (45.0, width / height, 0.1, 1000.0);
	camera.position.set (3.0, -1.5, 2.0);
	camera.up.set (0.0, 0.0, 1.0);
	camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
	scene.add (camera);

	let box = new THREE.BoxGeometry (0.5, 1.6, 0.75);
	let boxMaterial = new THREE.MeshPhongMaterial ({
		color : 0xcc0000,
		side : THREE.DoubleSide
	});
	let boxMesh = new THREE.Mesh (box, boxMaterial);
	scene.add (boxMesh);

	let planeSizeX = 3.0;
	let planeSizeY = 3.0;
	let planeZ = -1.0;

	let shadowGroup = new THREE.Object3D ();
	scene.add (shadowGroup);

	let shadowRenderTarget = new THREE.WebGLRenderTarget (512, 512);
	shadowRenderTarget.texture.generateMipmaps = false;

	let shadowPlaneGeometry = new THREE.PlaneGeometry (planeSizeX, planeSizeY)
	shadowPlaneMaterial = new THREE.MeshBasicMaterial ({
		//color : 0x0000cc,
		map : shadowRenderTarget.texture,
		opacity : 1.0,
		transparent: true,
		depthWrite : false
	});

	let shadowPlaneMesh = new THREE.Mesh (shadowPlaneGeometry, shadowPlaneMaterial);
	shadowPlaneMesh.position.z = planeZ;
	shadowPlaneMesh.scale.y = -1.0;

	shadowGroup.add (shadowPlaneMesh);

	let shadowCamera = new THREE.OrthographicCamera (
		-planeSizeX / 2.0,
		planeSizeX / 2.0,
		planeSizeY / 2.0,
		-planeSizeY / 2.0,
		0.0,
		2.0,
	);
	shadowCamera.rotation.x = Math.PI;
	shadowCamera.position.z = planeZ;

	shadowGroup.add (shadowCamera);

	let shadowMaterial...