JSFiddle - React, Tailwind, and code Playground

HTML

<link
      href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css"
      rel="stylesheet"
    />

<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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
  <body>
    <div id="container" class="container">
      <button id="but">
        <i class="bx bx-chevron-up"></i>
      </button>
      <button id="but1">
        <i class="bx bx-chevron-up"></i>
      </button>
      <button id="but2">
        <i class="bx bx-chevron-up"></i>
      </button>
      <button id="but3">
        <i class="bx bx-chevron-left"></i>
      </button>
      <button id="but4">
        <i class="bx bxs-circle"></i>
      </button>
      <button id="but5">
        <i class="bx bx-chevron-right"></i>
      </button>
      <button id="but6">
        <i class="bx bx-chevron-down"></i>
      </button>
      <button id="but7">
        <i class="bx bx-chevron-down"></i>
      </button>
      <button id="but8">
        <i class="bx bx-chevron-down"></i>
      </button>
    </div>
    
  </body>

CSS

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

#roomDimensions {
  display: inline-block;
  width: 25%;
}

#windowDimensions {
  display: inline-block;
  width: 25%;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  position: absolute;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 1fr);
  max-width: 5em;
  max-height: 5em;
  top: 90vh;
}

.container button {
  color: violet;
  display: grid;
  position: relative;
  place-items: center;
  cursor: pointer;
  border: 0px;
  max-width: 5em;
}

.container button i {
  font-size: 1rem;
}

.container button:nth-child(1) i,
.container button:nth-child(9) i {
  transform: rotate(315deg);
}

.container button:nth-child(3) i,
.container button:nth-child(7) i {
  transform: rotate(45deg);
}

.container button:nth-child(odd) {
  background-color: lightgray;
}

.container button:nth-child(even) {
  background-color: lightgray;
}

.container button:hover {
  background-color: gray;
}

JavaScript

var scene, camera, renderer, cube, cube1;
var time = 0;
var newPosition = new THREE.Vector3();

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var gridHelper = new THREE.GridHelper(4, 10);
scene.add(gridHelper);
scene.add(new THREE.AxesHelper());
//creating cubes geometry
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x4b8b3b });
cube = new THREE.Mesh(geometry, material);
cube.position.set(-4, 0, -4);
scene.add(cube);

const geometry1 = new THREE.BoxBufferGeometry(1, 1, 1);
const material1 = new THREE.MeshBasicMaterial({ color: 0x647687 });
cube1 = new THREE.Mesh(geometry1, material1);
cube1.position.set(0, 0, -4);
scene.add(cube1);

const geometry2 = new THREE.BoxBufferGeometry(1, 1, 1);
const material2 = new THREE.MeshBasicMaterial({ color: 0x7f00ff });
cube2 = new THREE.Mesh(geometry2, material2);
cube2.position.set(4, 0, -4);
scene.add(cube2);

const geometry3 = new THREE.BoxBufferGeometry(1, 1, 1);
const material3 = new THREE.MeshBasicMaterial({ color: 0x00aba9 });
cube3 = new THREE.Mesh(geometry3, material3);
cube3.position.set(-4, 0, 0);
scene.add(cube3);

const geometry4 = new THREE.BoxBufferGeometry(1, 1, 1);
const material4 = new THREE.MeshBasicMaterial({ color: 0x76608a });
cube4 = new THREE.Mesh(geometry4, material4);
cube4.position.set(4, 0, 0);
scene.add(cube4);

const geometry5 = new THREE.BoxBufferGeometry(1, 1, 1);
const material5 = new THREE.MeshBasicMaterial({ color: 0xed2939 });
cube5 = new THREE.Mesh(geometry5, material5);
cube5.position.set(-4, 0, 4);
scene.add(cube5);

const geometry6 = new THREE.BoxBufferGeometry(1, 1, 1);
const material6 = new THREE.MeshBasicMaterial({ color: 0x825a2c });
cube6 = new THREE.Mesh(geometry6,...