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-->
    <link rel="stylesheet" href="three.js/main/css/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 "./three.js/build/three.module.js";
import { GLTFLoader } from "./three.js/examples/jsm/loaders/GLTFLoader.js";

import { OrbitControls } from "./three.js/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "./three.js/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("three.js/main/hdr/", "christmas_photo_studio_04_1k.hdr");
    // Camera
    setupCamera();    
    // Lights
    setupLights();
    // GLFT Model Import
    importGltfModel("three.js/main/glb/NeonCorridor.glb");

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

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

function animate(){
    requestAnimationFrame(animate);
    if (mainAnimationMixer !== undefined ){
        mainAnimationMixer.update(clock.getDelta());
    }
}

function render(time){
    time *= 0.001; // Time in seconds

    // Responsive display
   ...