JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Win95 3D Maze with Sky & Clouds</title>
  <!--
  External References:
  - Three.js library: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
  - Sky shader: https://threejs.org/examples/js/objects/Sky.js
  -->
  <style>
    body { margin: 0; overflow: hidden; }
    #info {
      position: absolute;
      top: 10px; left: 10px;
      color: #fff;
      font-family: sans-serif;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="info">
    Use Arrow Keys to Move – walls red-brick, floor whitewashed with scalable bricks
  </div>

  <!-- Three.js core -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <!-- Sky shader -->
  <script src="https://threejs.org/examples/js/objects/Sky.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // ======== GLOBAL CONFIG ========
      const MAZE_ROWS    = 10;
      const MAZE_COLS    = 10;
      const CELL_SIZE    = 10;
      const WALL_HEIGHT  = 10;
      const MOVE_SPEED   = 2;
      const ROTATE_SPEED = 0.03;
      const BUFFER       = CELL_SIZE * 0.1;
      const FLOOR_BRICK_SIZE = 8;

      // ======== SKY & CLOUD CONTROLS ========
      // number of cloud meshes to generate
      const CLOUD_COUNT   = 50;
      // radius of each cloud sphere
      const CLOUD_SIZE    = 30;
      // sky turbidity (haze) level
      const SKY_TURBIDITY = 10;

      // ======== SCENE & CAMERA ========
      const scene    = new THREE.Scene();
      const camera   = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
      camera.position.set(CELL_SIZE/2, WALL_HEIGHT/2, CELL_SIZE/2);

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // ======== SKY ========
      const sky = new THREE.Sky();
    ...