JSFiddle - React, Tailwind, and code Playground

by dash1

HTML

<head>
  <title>A-Frame</title>
  <meta name="description" content="A-Frame">
  <script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>
  <script type="text/javascript" src="ascript.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.1/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/aframe-fps-counter-component/dist/aframe-fps-counter-component.min.js"></script>
</head>

<body>
  <a-scene city>
    <a-entity id="camrig"  >
      <a-entity camera id="cam" wasd-controls="acceleration: 1" look-controls position="0 0 0"></a-entity>
    </a-entity>
    <a-sky color="#6EBAA7"></a-sky>
  </a-scene>
</body>

JavaScript

let floorxyzpoints = [];
let roofxyzpoints = [];
let winxyzpoints = [];
let cam = [];
let buildingheight = 0.0036;
let singleLineGeometry = new THREE.Geometry();
let singleGeometry = new THREE.Geometry();


/**
 * This function creates Building objects and attaches them to the scene.
 * @param {a-entity} component - The component to attach the created elements to.
 */
function createBuildings(component) {

  cam.push(-5.0025142077723785);
  cam.push(-4.9984957398451115);
  floorxyzpoints.push(new THREE.Vector3(-5.0025142077723785, -4.9984957398451115, 0.000));
  floorxyzpoints.push(new THREE.Vector3(-5.000997586816652, -4.997701539845366, 0.000));
  floorxyzpoints.push(new THREE.Vector3(-5.000281549403212, -4.9989775398453276, 0.000));
  floorxyzpoints.push(new THREE.Vector3(-5.001798169106678, -4.999771739845073, 0.000));
  floorxyzpoints.push(new THREE.Vector3(-5.0025142077723785, -4.9984957398451115, 0.000));

  roofxyzpoints.push(new THREE.Vector3(-5.0025142077723785, -4.9984957398451115, 0.0036));
  roofxyzpoints.push(new THREE.Vector3(-5.000997586816652, -4.997701539845366, 0.0036));
  roofxyzpoints.push(new THREE.Vector3(-5.000281549403212, -4.9989775398453276, 0.0036));
  roofxyzpoints.push(new THREE.Vector3(-5.001798169106678, -4.999771739845073, 0.0036));
  roofxyzpoints.push(new THREE.Vector3(-5.0025142077723785, -4.9984957398451115, 0.0036));
  roofxyzpoints.push(new THREE.Vector3(-5.001755897294515, -4.998098639845239, 0.0046));
  roofxyzpoints.push(new THREE.Vector3(-5.001039859254945, -4.9993746398452, 0.0046));

  winxyzpoints.push(new THREE.Vector3(-5.0023122294274005, -4.998389971029954, 0.0003));
  winxyzpoints.push(new THREE.Vector3(-5.0023122294274005, -4.998389971029954, 0.0006));
  winxyzpoints.push(new THREE.Vector3(-5.001957875639493, -4.9982044086603965, 0.0003));
  winxyzpoints.push(new THREE.Vector3(-5.001957875639493, -4.9982044086603965, 0.0006));
  winxyzpoints.push(new THREE.Vector3(-5.0023122294274005, -4.998389971029954,...