JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
		<script src="https://threejs.org/examples/js/shaders/BokehShader2.js"></script>

		<script src="https://threejs.org/examples/js/Detector.js"></script>
		<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
		<script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>

		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl realistic depth-of-field bokeh example -
			shader ported from <a href="http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)">Martins Upitis</a>
		</div>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;
			var camera, scene, renderer,
				material_depth;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var height = window.innerHeight;

			var postprocessing = { enabled  : true };

			var shaderSettings = {
				rings: 3,
				samples: 4
			};

			var singleMaterial = false;
			var mouse = new THREE.Vector2();
			var raycaster = new THREE.Raycaster();
			var distance = 100;
			var target = new THREE.Vector3( 0, 20, -50 );
			var effectController;
			var planes = [];
			var leaves = 100;

			init();
			animate();

			function init() {

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

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / height, 1, 3000 );

				camera.position.y = 150;
				camera.position.z = 450;

				scene = new THREE.Scene();
				scene.add( camera );

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, height );
				//renderer.sortObjects = false;
				container.appendChild( renderer.domElement );

				material_depth = new THREE.MeshDepthMaterial();

				//

				var r =...