JSFiddle - React, Tailwind, and code Playground

by Deeps G

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="btnColor">
    Change Color
</button>
<!-- Read Me 
I have to create a House using three.js where user can change height, width, lenght of the house, outer wall colors, and textures, add windows and doors on outer walls etc. I have added an example for changing color, which will give an idea of how my actual code is working.
Rotate the bigger struture to front.
-->

JavaScript

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

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

$(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;

  myGeo = CreateObject();
  secondGeo = CreateSecondObject();

  myMesh = new THREE.Mesh(myGeo, new THREE.MeshPhongMaterial({
    color: 0x82979e,     
  }));
  myMesh.name = 'myMesh';
  scene.add(myMesh);
  
  secondMesh = new THREE.Mesh(secondGeo, new THREE.MeshPhongMaterial({
    color: 0xc66666, 
  }));
  secondMesh.name = 'secondMesh';
  scene.add(secondMesh);
 ...