JSFiddle - React, Tailwind, and code Playground

by Luis Fraguada

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/tweenjs/tween.js/master/src/Tween.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/SSAOShader.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
<button id="pos1" onclick="">Pos1</button><button id="pos2" onclick="">Pos2</button>

JavaScript

var objs = [];
      
      var b1 = document.getElementById('pos1');
      b1.addEventListener('click', function(event) {
        onClick(event.target.id);
  		});

      var b2 = document.getElementById('pos2');
      
      b2.addEventListener('click', function(event) {
        onClick(event.target.id);
  		});
      
      var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75,	window.innerWidth/window.innerHeight, 0.1, 1000 );
      camera.position.z = 5;

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

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
      cube.castShadow = true;
      cube.receiveShadow = true;
      
      var pos1 = {name:'pos1', x:0,y:0,z:0};
      var pos2 = {name:'pos2',x:2,y:0,z:0};
      
      cube.userData['pos1'] = pos1;
      cube.userData['pos2'] = pos2; 
      
			scene.add( cube );
      
      var geometry2 = new THREE.BoxGeometry( 1, 1, 1 );
			var material2 = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
			var cube2 = new THREE.Mesh( geometry, material );
      cube2.castShadow = true;
      cube2.receiveShadow = true;
      
      cube2.position.set(4,0,0);
      
      var pos11 = {name:'pos1', x:4,y:0,z:0};
      var pos22 = {name:'pos2',x:0,y:2,z:0};
      
      cube2.userData['pos1'] = pos11;
      cube2.userData['pos2'] = pos22; 
      
			scene.add( cube2 );
      
      
      objs.push(cube);
      objs.push(cube2);
      
      var geometryFloor = new THREE.BoxGeometry( 10, 1, 10 );
			var materialFloor = new THREE.MeshStandardMaterial( { color: 0xffffff } );
			var floor = new THREE.Mesh( geometryFloor,...