JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Web 3D</title>
    
    <!-- Main CSS-->
   
    
    <!-- Materialize CSS--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body> 
    <div id="container"> 
      <div class="navbar-fixed">
        <nav>
          <div class="nav-wrapper">
            <a href="#" class="brand-logo center">Interactive 3D Web</a>          
          </div>
        </nav>
      </div>      
      <a class="waves-effect waves-light btn" id="animate-button">Animate</a>  
      <canvas id="threejscanvas"></canvas>  
    </div>    

    <script type="module" src="scene.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

CSS

html, body {
    margin: 0px;
    height: 100%;
    font-family: "Lato", sans-serif;   
  }

  #threejscanvas{
    width: 100%;
    height: 100%;
    }

  #animate-button{
    position: absolute;
    bottom: 40px;
    left:40px;
    z-index: 99;
  }

JavaScript

import * as THREE from "https://unpkg.com/three@0.120.0/build/three.module.js";
import { GLTFLoader } from "https://unpkg.com/three@0.120.0/examples/jsm/loaders/GLTFLoader.js";

import { OrbitControls } from "https://unpkg.com/three@0.120.0/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "https://unpkg.com/three@0.120.0/examples/jsm/loaders/RGBELoader.js";

var canvas;
var renderer;
var camera;
var scene;
var clock;
var directionalLight;
var envMap;
var orbitControls;
var raycaster;
var mouse;

var mainScene;
var mainAnimation;
var mainAnimationMixer;
var animationAction;

var rotateClockwise;
var rotateAntiClockwise;

const animationState = {
    RotateForward : "ROTATEFORWARDS",
    RotateBackward : "ROTATEBACKWARDS"
}

let animationStateToggle = animationState.RotateForward;

function init(){
    // Canvas
    canvas = document.querySelector('#threejscanvas');

    var animateButton = document.getElementById('animate-button');
    animateButton.onclick = function(){
        ToggleAnimation();
    }

    // Renderer
    renderer = new THREE.WebGLRenderer({canvas, antialias: true, alpha: true, logarithmicDepthBuffer: true});
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.outputEncoding = THREE.sRGBEncoding;

    // Scene
    scene = new THREE.Scene();    
    
    clock = new THREE.Clock();

    // HDRI
    setupHDRI('https://unpkg.com/three@0.120.0/examples/textures/equirectangular/royal_esplanade_1k.hdr');
    // Camera
    setupCamera();    
    // Lights
    setupLights();
    // GLFT Model Import
    importGltfModel("https://cdn.jsdelivr.net/gh/siouxcitizen/3DModel@a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf");

    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
    canvas.addEventListener('click', RaycasterOnMouseDown, false);

    // Render
    renderer.render(scene, camera);
}

function animate(){
    requestAnimationFrame(animate);
    if...