JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="design-screen"></div>

<button id="btnLeft">
Turn Left
</button>
<button id="btnRight">
Turn Right
</button>
<button id="btnFront">
Turn Front
</button>
<button id="btnBack">
Turn Back
</button>
<!-- Read Me 
I have to create a House using three.js where user can rotate the house for four sides - Left, right, front and back. By default the building renders with front face in front.
-->

JavaScript

var scene, camera, myMesh, myGeo, dummy;
var objects = [];
var controls;

var width = window.innerWidth,
  height = (window.innerHeight * 60 / 100);
  
 var objectWidth = 12;

$(document).ready(function (){
	Load();
});

function Load() {
   
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0xBBE0FB, 500, 10000);
  // create a camera, which defines where we're looking at.
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  var light, materials;

  scene.add(new THREE.AmbientLight(0x666666));

  light = new THREE.DirectionalLight(0xdfebff, 1.75);
  light.position.set(50, 200, 100);
  light.position.multiplyScalar(1.3);
  light.castShadow = true;
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;

  var d = 300;
  light.shadow.camera.left = -d;
  light.shadow.camera.right = d;
  light.shadow.camera.top = d;
  light.shadow.camera.bottom = -d;
  light.shadow.camera.far = 1000;

  scene.add(light);

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  renderer.setClearColor(scene.fog.color);

  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;

  // create a cube and add to scene
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  controls.maxPolarAngle = Math.PI * 0.5;
  controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  
  dummy = new THREE.Object3D();
  dummy.position.x = 50;
  dummy.position.z = 50;
  scene.add( dummy );

  myGeo = CreateObject();
  
  var materials = [
  	new THREE.MeshPhongMaterial({ color: 0x6a4bea, side: THREE.DoubleSide }), // right
    new THREE.MeshPhongMaterial({ color: 00000000, }), // back
    new THREE.MeshPhongMaterial({ color: 0x6ff791, }), // left
    new THREE.MeshPhongMaterial({ color:...