JSFiddle - React, Tailwind, and code Playground

by Simon060694

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>
 
<!-- 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. the object should get zoom in and zoom out based on length of the building which is in front of camera, maintaining the distance from canvas edges.
-->

JavaScript

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

var width = window.innerWidth,
  height = (window.innerHeight * 60 / 100);
  
 var objectWidth = 15;
 var objectlength = 25;
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(60, width / height, 0.1, 10000000000000);

  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);
  document.body.appendChild(renderer.domElement);

  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;
 
   
  
  myMesh = new THREE.Mesh(new THREE.BoxGeometry(100,100,100), new THREE.MeshPhongMaterial());
  myMesh.name = 'myMesh';
  myMesh.geometry.computeBoundingSphere();
  scene.add(myMesh);
  objects.push(myMesh);
    
  fitCameraToObject(camera, myMesh );
 

  // call the render function
  render();
}
   function fitCameraToObject( camera, object ) {

  const boundingBox = new THREE.Box3()
  boundingBox.setFromObject(object)

  const center = new THREE.Vector3()
  boundingBox.getCenter(center)

  camera.position.y = center.y
  camera.position.x = center.x
  camera.updateProjectionMatrix()

  const size = new THREE.Vector3()
  boundingBox.getSize(size)

  const fov = camera.fov * (Math.PI / 180)
  const maxDim =...