JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/uniThreeDApp.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/three.min.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/Detector.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/OBJLoader.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/TGALoader.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/OrbitControls.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/GLTFLoader.js"></script>
    <script src="https://poly9.s3.ap-south-1.amazonaws.com/threejsExample/dat.gui.module.js"></script>

CSS

html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

JavaScript

var camera, scene, renderer, dirLight, hemiLight, defaultModel, loader, gltf;
  let guiIntense = new gui.GUI();

  init();

  function loadModel(url) {
    if (gltf) {
      let object = gltf.scene;
      scene.remove(object);
    }
    loader.load(url, function (data) {
      gltf = data;
      let object = gltf.scene;

      let childrens = gltf.scene.children[0].children;
      if (childrens && childrens.length) {
        for (let i = 0; i < childrens.length; i++) {
          childrens[i].castShadow = true;
          childrens[i].receiveShadow = true;
        }
      }

      scene.add(object);
      render && render();

    });
  }

  function init() {
    class ColorGUIHelper {
      constructor(object, prop) {
        this.object = object;
        this.prop = prop;
      }

      get value() {
        return `#${this.object[this.prop].getHexString()}`;
      }

      set value(hexString) {
        this.object[this.prop].set(hexString);
      }

    }

    function makeXYZGUI(gui, vector3, name, onChangeFn) {
      const folder = gui.addFolder(name);
      folder.add(vector3, 'x', -1000, 1000).onChange(onChangeFn);
      folder.add(vector3, 'y', 0, 1000).onChange(onChangeFn);
      folder.add(vector3, 'z', -1000, 1000).onChange(onChangeFn);
      // folder.open();
    }

    function makeShadowGUI(gui, light, name, onChangeFn) {
      const folder = gui.addFolder(name);
      folder.add(light.shadow.camera, "left", -1000, -1, 0.1).onChange(onChangeFn)
      folder.add(light.shadow.camera, "right", 1, 1000, 0.1).onChange(onChangeFn)
      folder.add(light.shadow.camera, "top", 1, 1000, 0.1).onChange(onChangeFn)
      folder.add(light.shadow.camera, "bottom", -1000, -1, 0.1).onChange(onChangeFn)
      folder.add(light.shadow.camera, "near", 0.1, 100).onChange(onChangeFn)
      folder.add(light.shadow.camera, "far", 0.1, 1000).onChange(onChangeFn)
      folder.add(light.shadow, "bias", -1, 1, 0.0001).onChange(onChangeFn)
      folder.add(light.shadow,...