JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/controls/PointerLockControls.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
<div id="blocker">
  <div id="instructions">
    <span style="font-size:40px">Click to play</span>
    <br /> (ARROWS = Move, SPACE = Jump, MOUSE = Look around)
  </div>
</div>

CSS

html, body {
				width: 100%;
				height: 100%;
			}

			body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
				font-family: arial;
			}

			#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;

				cursor: pointer;

			}

JavaScript

var stats = new Stats();
            stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
            document.body.appendChild(stats.dom);
            requestAnimationFrame(animate);
            var camera, scene, renderer, projector;
            var geometry, material, mesh;
            var controls;
            var objects = [];
            var raycaster;
            var blocker = document.getElementById('blocker');
            var instructions = document.getElementById('instructions');
            var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
            if (havePointerLock) {
              var element = document.body;
              var pointerlockchange = function(event) {
                if (document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) {
                  controlsEnabled = true;
                  controls.enabled = true;
                  blocker.style.display = 'none';
                } else {
                  controls.enabled = false;

                  blocker.style.display = '-webkit-box';
                  blocker.style.display = '-moz-box';
                  blocker.style.display = 'box';

                  instructions.style.display = '';

                }

              };

              var pointerlockerror = function(event) {

                instructions.style.display = '';

              };

              // Hook pointer lock state change events
              document.addEventListener('pointerlockchange', pointerlockchange, false);
              document.addEventListener('mozpointerlockchange', pointerlockchange, false);
              document.addEventListener('webkitpointerlockchange', pointerlockchange, false);

              document.addEventListener('pointerlockerror', pointerlockerror, false);
              document.addEventListener('mozpointerlockerror',...