JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://rawgithub.com/chandlerprall/Physijs/master/physi.js"></script>
<div id="container"></div>
CSS
#container {
overflow:hidden;
}
JavaScript
THREE.PlayerControls = function (anchor, scene, player, camera, domElement) {
this.walking = false;
this.occ = false;
this.scene = scene;
this.occLastZoom = 0;
this.jumpRelease = true;
this.jumping = false;
this.falling = false;
this.moving = false;
this.turning = false;
this.anchor = anchor;
this.player = player;
this.camera = camera;
this.camera.position.set(0, 8.25, -20);
this.domElement = (domElement !== undefined) ? domElement : document;
this.anchor.add(this.camera);
// API
this.enabled = true;
this.center = new THREE.Vector3(0, 4, 0);
this.userZoom = true;
this.userZoomSpeed = 2.0;
this.userRotate = true;
this.userRotateSpeed = 1.0;
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
this.minDistance = 2;
this.maxDistance = 30;
this.keys = {
LEFT: 65,
STRAFFLEFT: 81,
UP: 87,
RIGHT: 68,
STRAFFRIGHT: 69,
DOWN: 83,
JUMP: 32,
SLASH: 191
};
// internals
var scope = this;
var EPS = 0.000001;
var PIXELS_PER_ROUND = 1800;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
var zoomStart = new THREE.Vector2();
var zoomEnd = new THREE.Vector2();
var zoomDelta = new THREE.Vector2();
var phiDelta = 0;
var thetaDelta = 0;
var scale = 1;
var lastPosition = new THREE.Vector3();
var STATE = {
NONE: -1,
ROTATE: 0,
ZOOM: 1
};
var state = STATE.NONE;
var key_state = [];
// events
var changeEvent = {
type: 'change'
};
this.rotateLeft = function (angle) {
thetaDelta -= angle;
};
this.rotateRight = function (angle) {
thetaDelta += angle;
};
this.rotateUp = function (angle) {
phiDelta -= angle;
};
this.rotateDown = function (angle) {
...