JSFiddle - React, Tailwind, and code Playground

by giperon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
		<div id="divScreen">
		</div>

CSS

#divScreen {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	border: 0px;	
	background-color: #AACCFF;
	overflow: hidden;
}

JavaScript

var g_Game;
var g_Player;



const {
	Euler,
	EventDispatcher,
	Vector3
} = THREE;

const _euler = new Euler( 0, 0, 0, 'YXZ' );
const _vector = new Vector3();wsd

const _changeEvent = { type: 'change' };
const _lockEvent = { type: 'lock' };
const _unlockEvent = { type: 'unlock' };

const _PI_2 = Math.PI / 2;

class PointerLockControls extends EventDispatcher {

	constructor( camera, domElement ) {

		super();

		this.camera = camera;
		this.domElement = domElement;

		//this.isLocked = false;

		// Set to constrain the pitch of the camera
		// Range is 0 to Math.PI radians
		// this.minPolarAngle = 0; // radians
		// this.maxPolarAngle = Math.PI; // radians
		this.minPolarAngle = -Infinity; // No constraints on pitch
		this.maxPolarAngle = Infinity;  // No constraints on pitch

		this.pointerSpeed = 1.0;

		this._onMouseMove = onMouseMove.bind( this );
		this._onPointerlockChange = onPointerlockChange.bind( this );
		this._onPointerlockError = onPointerlockError.bind( this );

		this.connect();

	}

	connect() {

		this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
		this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );
		this.domElement.ownerDocument.addEventListener( 'pointerlockerror', this._onPointerlockError );

	}

	disconnect() {

		this.domElement.ownerDocument.removeEventListener( 'mousemove', this._onMouseMove );
		this.domElement.ownerDocument.removeEventListener( 'pointerlockchange', this._onPointerlockChange );
		this.domElement.ownerDocument.removeEventListener( 'pointerlockerror', this._onPointerlockError );

	}

	dispose() {

		this.disconnect();

	}

	getObject() { // retaining this method for backward compatibility

		return this.camera;

	}

	getDirection( v ) {

		return v.set( 0, 0, - 1 ).applyQuaternion( this.camera.quaternion );

	}

	// never called on mousemove
	moveForward( distance ) {

		// move forward parallel to the xz-plane
		// assumes camera.up is...