itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
308 lines (295 loc) • 11.7 kB
JavaScript
import * as THREE from 'three';
import { MAIN_LOOP_EVENTS } from "../Core/MainLoop.js";
// Note: we could use existing three.js controls (like https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/FirstPersonControls.js)
// but including these controls in itowns allows use to integrate them tightly with itowns.
// Especially the existing controls are expecting a continuous update loop while we have a pausable one (so our controls use .notifyChange when needed)
function limitRotation(camera3D, rot, verticalFOV) {
// Limit vertical rotation (look up/down) to make sure the user cannot see
// outside of the cone defined by verticalFOV
const limit = THREE.MathUtils.degToRad(verticalFOV - camera3D.fov) * 0.5;
return THREE.MathUtils.clamp(rot, -limit, limit);
}
const axisY = new THREE.Vector3(0, 1, 0);
function applyRotation(view, camera3D, state) {
camera3D.quaternion.setFromUnitVectors(axisY, camera3D.up);
camera3D.rotateY(state.rotateY);
camera3D.rotateX(state.rotateX);
view.notifyChange(view.camera3D);
}
const MOVEMENTS = {
38: {
method: 'translateZ',
sign: -1
},
// FORWARD: up key
40: {
method: 'translateZ',
sign: 1
},
// BACKWARD: down key
37: {
method: 'translateX',
sign: -1
},
// STRAFE_LEFT: left key
39: {
method: 'translateX',
sign: 1
},
// STRAFE_RIGHT: right key
33: {
method: 'translateY',
sign: 1
},
// UP: PageUp key
34: {
method: 'translateY',
sign: -1
} // DOWN: PageDown key
};
function moveCameraVerticalPlanar(value) {
this.camera.position.z += value;
}
const normal = new THREE.Vector3();
const q = new THREE.Quaternion();
const e = new THREE.Euler(0, 0, 0, 'YXZ');
function moveCameraVerticalGlobe(value) {
// compute geodesic normale
normal.copy(this.camera.position);
normal.normalize();
this.camera.position.add(normal.multiplyScalar(value));
}
class FirstPersonControls extends THREE.EventDispatcher {
/**
* @param {View} view
* @param {object} options
* @param {boolean} options.focusOnClick - whether or not to focus the renderer domElement on click
* @param {boolean} options.focusOnMouseOver - whether or not to focus when the mouse is over the domElement
* @param {boolean} options.moveSpeed - if > 0, pressing the arrow keys will move the camera
* @param {number} options.verticalFOV - define the max visible vertical angle of the scene in degrees (default 180)
* @param {number} options.panoramaRatio - alternative way to specify the max vertical angle when using a panorama.
* You can specify the panorama width/height ratio and the verticalFOV will be computed automatically
* @param {boolean} options.disableEventListeners - if true, the controls will not self listen to mouse/key events.
* You'll have to manually forward the events to the appropriate functions: onMouseDown, onMouseMove, onMouseUp,
* onKeyUp, onKeyDown and onMouseWheel.
*/
constructor(view) {
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
super();
this.isFirstPersonControls = true;
this.camera = view.camera3D;
this.view = view;
this.moves = new Set();
if (options.panoramaRatio) {
const radius = options.panoramaRatio * 200 / (2 * Math.PI);
options.verticalFOV = options.panoramaRatio == 2 ? 180 : THREE.MathUtils.radToDeg(2 * Math.atan(200 / (2 * radius)));
}
options.verticalFOV = options.verticalFOV || 180;
options.moveSpeed = options.moveSpeed === undefined ? 10 : options.moveSpeed; // backward or forward move speed in m/s
this.options = options;
this._isMouseDown = false;
this._onMouseDownMouseX = 0;
this._onMouseDownMouseY = 0;
this._state = {
rotateX: 0,
rotateY: 0,
snapshot() {
return {
rotateX: this.rotateX,
rotateY: this.rotateY
};
}
};
this.reset();
this.eventListeners = options.disableEventListeners;
if (!options.disableEventListeners) {
this._onMouseDown = this.onMouseDown.bind(this);
this._onMouseMove = this.onMouseMove.bind(this);
this._onMouseUp = this.onMouseUp.bind(this);
this._onMouseWheel = this.onMouseWheel.bind(this);
this._onKeyUp = this.onKeyUp.bind(this);
this._onKeyDown = this.onKeyDown.bind(this);
this._onContextMenu = this.onContextMenu.bind(this);
view.domElement.addEventListener('mousedown', this._onMouseDown, false);
view.domElement.addEventListener('touchstart', this._onMouseDown, false);
view.domElement.addEventListener('mousemove', this._onMouseMove, false);
view.domElement.addEventListener('touchmove', this._onMouseMove, false);
view.domElement.addEventListener('mouseup', this._onMouseUp, false);
view.domElement.addEventListener('touchend', this._onMouseUp, false);
view.domElement.addEventListener('wheel', this._onMouseWheel, false);
// Disable context menu when right clicking.
view.domElement.addEventListener('contextmenu', this._onContextMenu, false);
// TODO: Why windows
document.addEventListener('keydown', this._onKeyDown, false);
document.addEventListener('keyup', this._onKeyUp, false);
}
this.view.addFrameRequester(MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, this.update.bind(this));
// focus policy
this._onFocus = () => view.domElement.focus();
this.focusOnMouseOver = options.focusOnMouseOver;
if (options.focusOnMouseOver) {
view.domElement.addEventListener('mouseover', this._onFocus);
}
this.focusOnClick = options.focusOnClick;
if (options.focusOnClick) {
view.domElement.addEventListener('click', this._onFocus);
}
if (view.referenceCrs == 'EPSG:4978') {
this.moveCameraVertical = moveCameraVerticalGlobe;
} else {
this.moveCameraVertical = moveCameraVerticalPlanar;
}
}
isUserInteracting() {
return this.moves.size !== 0 && !this._isMouseDown;
}
/**
* Resets the controls internal state to match the camera' state.
* This must be called when manually modifying the camera's position or rotation.
* @param {boolean} preserveRotationOnX - if true, the look up/down rotation will
* not be copied from the camera
*/
reset() {
let preserveRotationOnX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
// Compute the correct init state, given the calculus in applyRotation:
// cam.quaternion = q * r
// => r = invert(q) * cam.quaterion
// q is the quaternion derived from the up vector
q.setFromUnitVectors(axisY, this.camera.up);
q.invert();
q.multiply(this.camera.quaternion);
// tranform it to euler
e.setFromQuaternion(q);
if (!preserveRotationOnX) {
this._state.rotateX = e.x;
}
this._state.rotateY = e.y;
}
/**
* Updates the camera position / rotation based on occured input events.
* This is done automatically when needed but can also be done if needed.
* @param {number} dt - ellpased time since last update in seconds
* @param {boolean} updateLoopRestarted - true if itowns' update loop just restarted
* @param {boolean} force - set to true if you want to force the update, even if it
* appears unneeded.
*/
update(dt, updateLoopRestarted, force) {
if (this.enabled == false) {
return;
}
// dt will not be relevant when we just started rendering, we consider a 1-frame move in this case
if (updateLoopRestarted) {
dt = 16;
}
for (const move of this.moves) {
if (move.method === 'translateY') {
this.moveCameraVertical(move.sign * this.options.moveSpeed * dt / 1000);
} else {
this.camera[move.method](move.sign * this.options.moveSpeed * dt / 1000);
}
}
if (this._isMouseDown === true || force === true) {
applyRotation(this.view, this.camera, this._state);
}
if (this.moves.size) {
this.view.notifyChange(this.camera);
}
}
// Event callback functions
// Mouse movement handling
onMouseDown(event) {
if (this.enabled == false) {
return;
}
// next line is commented because, when I uncomment it, key binding doesn't work any more.
// event.preventDefault();
this._isMouseDown = true;
const coords = this.view.eventToViewCoords(event);
this._onMouseDownMouseX = coords.x;
this._onMouseDownMouseY = coords.y;
this._stateOnMouseDown = this._state.snapshot();
}
onMouseUp() {
if (this.enabled == false) {
return;
}
this._isMouseDown = false;
}
onMouseMove(event) {
if (this.enabled == false) {
return;
}
if (this._isMouseDown === true) {
// in rigor we have tan(theta) = tan(cameraFOV) * deltaH / H
// (where deltaH is the vertical amount we moved, and H the renderer height)
// we loosely approximate tan(x) by x
const pxToAngleRatio = THREE.MathUtils.degToRad(this.camera.fov) / this.view.mainLoop.gfxEngine.height;
const coords = this.view.eventToViewCoords(event);
// update state based on pointer movement
this._state.rotateY = (coords.x - this._onMouseDownMouseX) * pxToAngleRatio + this._stateOnMouseDown.rotateY;
this._state.rotateX = limitRotation(this.camera, (coords.y - this._onMouseDownMouseY) * pxToAngleRatio + this._stateOnMouseDown.rotateX, this.options.verticalFOV);
applyRotation(this.view, this.camera, this._state);
}
}
// Mouse wheel
onMouseWheel(event) {
if (this.enabled == false) {
return;
}
const delta = event.deltaY;
this.camera.fov = THREE.MathUtils.clamp(this.camera.fov + Math.sign(delta), 10, Math.min(100, this.options.verticalFOV));
this.camera.updateProjectionMatrix();
this._state.rotateX = limitRotation(this.camera, this._state.rotateX, this.options.verticalFOV);
applyRotation(this.view, this.camera, this._state);
}
// Keyboard handling
onKeyUp(e) {
if (this.enabled == false) {
return;
}
const move = MOVEMENTS[e.keyCode];
if (move) {
this.moves.delete(move);
this.view.notifyChange(undefined, false);
e.preventDefault();
}
}
onKeyDown(e) {
if (this.enabled == false) {
return;
}
const move = MOVEMENTS[e.keyCode];
if (move) {
this.moves.add(move);
this.view.notifyChange(undefined, false);
e.preventDefault();
}
}
onContextMenu(event) {
event.preventDefault();
}
dispose() {
if (!this.eventListeners) {
this.view.domElement.removeEventListener('mousedown', this._onMouseDown, false);
this.view.domElement.removeEventListener('touchstart', this._onMouseDown, false);
this.view.domElement.removeEventListener('mousemove', this._onMouseMove, false);
this.view.domElement.removeEventListener('touchmove', this._onMouseMove, false);
this.view.domElement.removeEventListener('mouseup', this._onMouseUp, false);
this.view.domElement.removeEventListener('touchend', this._onMouseUp, false);
this.view.domElement.removeEventListener('wheel', this._onMouseWheel, false);
this.view.domElement.removeEventListener('contextmenu', this._onContextMenu, false);
document.removeEventListener('keydown', this._onKeyDown, false);
document.removeEventListener('keyup', this._onKeyUp, false);
}
if (this.focusOnMouseOver) {
this.view.domElement.removeEventListener('mouseover', this._onFocus);
}
if (this.focusOnClick) {
this.view.domElement.removeEventListener('click', this._onFocus);
}
this.dispatchEvent({
type: 'dispose'
});
}
}
export default FirstPersonControls;