JSFiddle - React, Tailwind, and code Playground

HTML

<style>
      body {
      overflow: hidden;
        margin: 0;
      }
    </style> 
 
 
      <button id="addred" style="position:absolute;margin:0px;">
      add red
      </button>
      <span>
      <button id="addgreen" style="position:absolute; margin-left:70px;">
        add green
        </button>
     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
        <script>
        var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 1, 3);
  
  var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  var controls = new THREE.OrbitControls(camera, renderer.domElement);
  
  var light = new THREE.DirectionalLight(0xffffff);
  light.position.setScalar(10);
  scene.add(light);
  
  scene.add(new THREE.AmbientLight(0x404040));
  
  var wallMaterial = new THREE.MeshLambertMaterial({
    color: "gray",
    wireframe: false
  });
  var wallMaterial1 = new THREE.MeshLambertMaterial({
    color: "gray",
    wireframe: false
  });
  var building = new THREE.Mesh(new THREE.BoxGeometry(5, 2, 0.25), wallMaterial);
  var building1 = new THREE.Mesh(new THREE.BoxGeometry(0.25, 2, 5), wallMaterial1);
  var building2 = new THREE.Mesh(new THREE.BoxGeometry(0.25, 2, 5), wallMaterial1);
  var building3 = new THREE.Mesh(new THREE.BoxGeometry(5, 2, 0.25), wallMaterial1);
  building1.position.set(2.6,0,2.6);
  building2.position.set(-2.6,0,2.6);
  building3.position.set(0,0,5.2);
  building.userData.size = {
    width: building.geometry.parameters.width,
    height: building.geometry.parameters.height,
    depth: building.geometry.parameters.depth
  };
  building1.userData.size = {
    width:...