threepipe
Version:
A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.
148 lines • 6.15 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Euler, EventDispatcher, Vector3 } from 'three';
import { serialize } from 'ts-browser-helpers';
import { uiInput, uiPanelContainer, uiToggle } from 'uiconfig.js';
// eslint-disable-next-line @typescript-eslint/naming-convention
const _euler = new Euler(0, 0, 0, 'YXZ');
// eslint-disable-next-line @typescript-eslint/naming-convention
const _vector = new Vector3();
// eslint-disable-next-line @typescript-eslint/naming-convention
const _changeEvent = { type: 'change' };
// eslint-disable-next-line @typescript-eslint/naming-convention
const _lockEvent = { type: 'lock' };
// eslint-disable-next-line @typescript-eslint/naming-convention
const _unlockEvent = { type: 'unlock' };
// eslint-disable-next-line @typescript-eslint/naming-convention
const _PI_2 = Math.PI / 2;
let PointerLockControls2 = class PointerLockControls2 extends EventDispatcher {
constructor(camera, domElement) {
super();
this.isLocked = false;
this.enabled = true;
// 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.pointerSpeed = 1.0;
this.autoLockOnClick = true;
this._movementX = 0;
this._movementY = 0;
// getObject() { // retaining this method for backward compatibility
//
// return this.object
//
// }
this._forwardDirection = new Vector3(0, 0, -1);
this.domElement = domElement;
this.object = camera;
this.onElementClick = this.onElementClick.bind(this);
this.onMouseMove = this.onMouseMove.bind(this);
this.onPointerlockChange = this.onPointerlockChange.bind(this);
this.onPointerlockError = this.onPointerlockError.bind(this);
this.connect();
}
onElementClick(event) {
if (this.isLocked)
return;
if (!this.autoLockOnClick)
return;
event.preventDefault();
this.lock();
}
onMouseMove(event) {
if (!this.isLocked)
return;
this._movementX += event.movementX || event.mozMovementX || event.webkitMovementX || 0;
this._movementY += event.movementY || event.mozMovementY || event.webkitMovementY || 0;
}
onPointerlockChange() {
if (this.domElement.ownerDocument.pointerLockElement === this.domElement) {
this.dispatchEvent(_lockEvent);
this.isLocked = true;
}
else {
this.dispatchEvent(_unlockEvent);
this.isLocked = false;
}
}
onPointerlockError() {
console.error('THREE.PointerLockControls: Unable to use Pointer Lock API');
}
connect() {
this.domElement.ownerDocument.addEventListener('mousemove', this.onMouseMove);
this.domElement.ownerDocument.addEventListener('pointerlockchange', this.onPointerlockChange);
this.domElement.ownerDocument.addEventListener('pointerlockerror', this.onPointerlockError);
this.domElement.addEventListener('click', this.onElementClick);
}
disconnect() {
this.domElement.ownerDocument.removeEventListener('mousemove', this.onMouseMove);
this.domElement.ownerDocument.removeEventListener('pointerlockchange', this.onPointerlockChange);
this.domElement.ownerDocument.removeEventListener('pointerlockerror', this.onPointerlockError);
this.domElement.removeEventListener('click', this.onElementClick);
}
dispose() {
this.disconnect();
}
getDirection(v) {
return v.copy(this._forwardDirection).applyQuaternion(this.object.quaternion);
}
moveForward(distance) {
// move forward parallel to the xz-plane
// assumes camera.up is y-up
_vector.setFromMatrixColumn(this.object.matrix, 0);
_vector.crossVectors(this.object.up, _vector);
this.object.position.addScaledVector(_vector, distance);
}
moveRight(distance) {
_vector.setFromMatrixColumn(this.object.matrix, 0);
this.object.position.addScaledVector(_vector, distance);
}
lock() {
this.domElement.requestPointerLock();
}
unlock() {
this.domElement.ownerDocument.exitPointerLock();
}
update() {
if (Math.abs(this._movementX) < 0.0001 && Math.abs(this._movementY) < 0.0001)
return;
_euler.setFromQuaternion(this.object.quaternion);
_euler.y -= this._movementX * 0.002 * this.pointerSpeed;
_euler.x -= this._movementY * 0.002 * this.pointerSpeed;
this._movementX = 0;
this._movementY = 0;
_euler.x = Math.max(_PI_2 - this.maxPolarAngle, Math.min(_PI_2 - this.minPolarAngle, _euler.x));
this.object.quaternion.setFromEuler(_euler);
this.dispatchEvent(_changeEvent);
}
};
__decorate([
uiToggle(),
serialize()
], PointerLockControls2.prototype, "enabled", void 0);
__decorate([
uiInput(),
serialize()
], PointerLockControls2.prototype, "minPolarAngle", void 0);
__decorate([
uiInput(),
serialize()
], PointerLockControls2.prototype, "maxPolarAngle", void 0);
__decorate([
uiInput(),
serialize()
], PointerLockControls2.prototype, "pointerSpeed", void 0);
__decorate([
uiToggle(),
serialize()
], PointerLockControls2.prototype, "autoLockOnClick", void 0);
PointerLockControls2 = __decorate([
uiPanelContainer('Pointer Lock Controls')
], PointerLockControls2);
export { PointerLockControls2 };
//# sourceMappingURL=PointerLockControls2.js.map