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 "https://threejs.org/build/three.module.js";
import { PointerLockControls } from "https://threejs.org/examples/jsm/controls/PointerLockControls.js";
import { GLTFLoader } from "https://threejs.org/examples/jsm/loaders/GLTFLoader.js";
var camera, scene, renderer, controls, blocker, instructions;
var viewType = "skyview";
var objects = [];
var objLoc = -49;
var raycaster;
var...