JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - pointerlock controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="sass/css/reset.css">
		<link rel="stylesheet" type="text/css" href="sass/css/style.css">
		<link rel="stylesheet" type="text/css" href="sass/css/fonts.css">
	</head>
	<body>
		<div class = "page3">
			<div id="blocker">
				<div id="instructions">
					<span style="font-size:40px">Нажмите, чтобы продолжить</span>
					<br />
					(W, A, S, D = Двигаться, SPACE = Прыгать, Мышь = Осмотреться)
				</div>
			</div>
			<div class = "popUp share-button hide">
				<div class = "text">123</div>
				<a class = "fb" href = "#"></a>
				<a class = "vk" href = "#"></a>
				<a class = "tw" href = "#"></a>
				<a class = "ok" href = "#"></a>
			</div>
			<input type = "hidden" id = "objsource" value = "" />
		</div>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/three.js"></script>
		<script src="js/PointerLockControls.js"></script>
		<script src="js/scene.js"></script>
		<script src="js/share.js"></script>
	</body>
</html>

JavaScript

var camera, scene, renderer, controls,
    objects = [], raycaster,
    clickObjects = [], clickRaycaster = new THREE.Raycaster(), clickMouse = new THREE.Vector2(),
    USE_WIREFRAME = false,
    blocker = document.getElementById( 'blocker' ),
    instructions = document.getElementById( 'instructions' ),
    havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
var mapCamera, mapWidth = 240, mapHeight = 160;

// http://www.html5rocks.com/en/tutorials/pointerlock/intro/

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 = 'block';

            instructions.style.display = '';

        }

    };

    var pointerlockerror = function ( event ) {

        instructions.style.display = '';

    };

    function onDocumentMouseDown(event) {
        var $text = $(".text");

        event.preventDefault();

        clickMouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
        clickMouse.y = - (event.clientY / renderer.domElement.height) * 2 + 1;

        clickRaycaster.setFromCamera(clickMouse, camera);

        var intersects = clickRaycaster.intersectObjects(clickObjects);

        if (intersects.length > 0) {

            controls.enabled = false;
            blocker.style.display = 'block';
            instructions.style.display = '';
            document.exitPointerLock();
            // instructions.exitPointerLock();

            // console.log(intersects[0].object.name);
            $text.html(intersects[0].object.name);
            //...