JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Procedural City</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>
			#blocker {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
			}

			#instructions {
				width: 100%;
				height: 100%;

				display: -webkit-box;
				display: -moz-box;
				display: box;

				-webkit-box-orient: horizontal;
				-moz-box-orient: horizontal;
				box-orient: horizontal;

				-webkit-box-pack: center;
				-moz-box-pack: center;
				box-pack: center;

				-webkit-box-align: center;
				-moz-box-align: center;
				box-align: center;

				color: #ffffff;
				text-align: center;
				font-family: Arial;
				font-size: 14px;
				line-height: 24px;

				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="blocker">
			<div id="instructions">
				<span style="font-size:60px">Welcome to Our Small City Generator</span>
				<br /><br />
				<span style="font-size:25px">--Instructions--</span>
				<br />
				<span style="font-size:20px">
				When in sky view:<br/>
				Change City= R<br/>
				Change Camera Angles= 1,2,3<br/>
				</span>
				<span style="font-size:20px">
				When in first person:<br/>
				Move= W,A,S,D<br/>
				Look: MOUSE<br/>
				</span>
				<span style="font-size:25px">Click to Continue</span>
			</div> 

		</div>


		<script src='build/perlin.js'></script>


		<script type="module">

			import * as THREE from './build/three.module.js';
			import { PointerLockControls } from './build/PointerLockControls.js';
      import { GLTFLoader } from "./build/GLTFLoader.js";


			var camera, scene, renderer, controls, blocker, instructions;
			var viewType = "skyview";
			var objects = [];
			var objLoc = -49;
			var raycaster;

			var moveForward = false;
			var moveBackward = false;
			var moveLeft = false;
			var...