JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - animation - keyframes</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link type="text/css" rel="stylesheet" href="main.css" />
    <style>
      body {
        background-color: #bfe3dd;
        color: #000;
      }

      a {
        color: #2983ff;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <div id="info">
      <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
      webgl - animation - keyframes<br />
      Model:
      <a
        href="https://www.artstation.com/artwork/1AGwX"
        target="_blank"
        rel="noopener"
        >Littlest Tokyo</a
      >
      by
      <a
        href="https://www.artstation.com/glenatron"
        target="_blank"
        rel="noopener"
        >Glen Fox</a
      >, CC Attribution.
    </div>

    <script type="module">
      // https://threejs.org/

      import * as THREE from "https://threejs.org/build/three.module.js";

      import Stats from "https://threejs.org/examples/jsm/libs/stats.module.js";

      import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
      import { RoomEnvironment } from "https://threejs.org/examples/jsm/environments/RoomEnvironment.js";

      import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
      import { DRACOLoader } from "https://threejs.org/examples/jsm/loaders/DRACOLoader.js";

      let mixer;

      const clock = new THREE.Clock();
      const container = document.getElementById("container");

      const stats = new Stats();
      container.appendChild(stats.dom);

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
     ...