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>

JavaScript

var scene, camera, secMesh, secGeo; 
var controls;

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

$(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;
   
  secGeo = CreateSecondObject();
   
  var texturePath = "https://s18.postimg.org/fic48yee1/texture.jpg";
  var textures =[
            new THREE.TextureLoader().load(texturePath), 
            new THREE.TextureLoader().load(texturePath), 
            new THREE.TextureLoader().load(texturePath), 
          ];
  
  // set repeat according to width of Faces
  var materials = [];        
  $.each(textures, function(i, txt){
    txt.wrapS =...