itowns/lib/Controls/StreetControls.js

A JS/WebGL framework for 3D geospatial data visualization

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));

var THREE = _interopRequireWildcard(require("three"));

var _MainLoop = require("../Core/MainLoop");

var _FirstPersonControls2 = _interopRequireDefault(require("./FirstPersonControls"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  depthTest: false,
  transparent: true,
  opacity: 0.5
});

function createCircle() {
  var geomCircle = new THREE.CircleGeometry(1, 32);
  return new THREE.Mesh(geomCircle, material);
}

function createRectangle() {
  var geomPlane = new THREE.PlaneGeometry(4, 2, 1);
  var rectangle = new THREE.Mesh(geomPlane, material);
  rectangle.rotateX(-Math.PI * 0.5);
  return rectangle;
} // update a surfaces node


function updateSurfaces(surfaces, position, norm) {
  surfaces.position.copy(position);
  surfaces.up.copy(position).normalize();
  surfaces.lookAt(norm);
  surfaces.updateMatrixWorld(true);
} // vector use in the pick method


var target = new THREE.Vector3();
var normal = new THREE.Vector3();
var normalMatrix = new THREE.Matrix3();
var up = new THREE.Vector3();
var startQuaternion = new THREE.Quaternion();

function pick(event, view, buildingsLayer) {
  var pickGround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {};
  var pickObject = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};
  var pickNothing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : function () {};
  // get real distance to ground, with a specific method to pick on the elevation layer
  view.getPickingPositionFromDepth(view.eventToViewCoords(event), target);
  var distanceToGround = view.camera.camera3D.position.distanceTo(target); // pick on building layer

  var buildings = buildingsLayer ? view.pickObjectsAt(event, -1, buildingsLayer) : []; // to detect pick on building, compare first picked building distance to ground distance

  if (buildings.length && buildings[0].distance < distanceToGround) {
    // pick buildings
    // callback
    normalMatrix.getNormalMatrix(buildings[0].object.matrixWorld);
    normal.copy(buildings[0].face.normal).applyNormalMatrix(normalMatrix);
    pickObject(buildings[0].point, normal);
  } else if (view.tileLayer) {
    var far = view.camera.camera3D.far * 0.95;

    if (distanceToGround < far) {
      // compute normal
      if (view.tileLayer.isGlobeLayer) {
        up.copy(target).multiplyScalar(1.1);
      } else {
        up.set(0, 0, 1);
      } // callback


      pickGround(target, up);
    } else {
      // callback
      pickNothing();
    }
  } else {
    pickNothing();
  }
} // default function to compute time (in millis), used for the animation to move to a distance (in meter)


function computeTime(distance) {
  return 100 + Math.sqrt(distance) * 30;
}
/**
 * @classdesc Camera controls that can follow a path.
 * It is used to simulate a street view.
 * It stores a currentPosition and nextPosition, and do a camera traveling to go to next position.
 * It also manages picking on the ground and on other object, like building.
 * <ul> It manages 2 surfaces, used as helpers for the end user :
 * <li> a circle is shown when mouse is moving on the ground </li>
 * <li> a rectangle is shown when mouse is moving on other 3d object </li>
 * </ul>
 * <ul>
 * This controls is designed
 * <li> to move forward when user click on the ground (click and go) </li>
 * <li> to rotate the camera when user click on other object (click to look at) </li>
 * </ul>
 * <ul> Bindings inherited from FirstPersonControls
 * <li><b> up + down keys : </b> forward/backward </li>
 * <li><b> left + right keys: </b> strafing movements </li>
 * <li><b> pageUp + pageDown: </b> vertical movements </li>
 * <li><b> mouse click+drag: </b> pitch and yaw movements (as looking at a panorama) </li>
 * </ul>
 * <ul> Bindings added
 * <li><b> keys Z : </b> Move camera to the next position </li>
 * <li><b> keys S : </b> Move camera to the previous position </li>
 * <li><b> keys A : </b> Set camera to current position and look at next position</li>
 * <li><b> keys Q : </b> Set camera to current position and look at previous position</li>
 * </ul>
 * Note that it only works in globe view.
 * @property {number} keyGoToNextPosition key code to go to next position, default to 90 for key Z
 * @property {number} keyGoToPreviousPosition key code to go to previous position, default to 83 for key S
 * @property {number} keySetCameraToCurrentPositionAndLookAtNext key code set camera to current position, default to 65 for key  A
 * @property {number} keySetCameraToCurrentPositionAndLookAtPrevious key code set camera to current position, default to 81 for key  Q
 * @extends FirstPersonControls
 */


var StreetControls = /*#__PURE__*/function (_FirstPersonControls) {
  (0, _inherits2["default"])(StreetControls, _FirstPersonControls);

  var _super = _createSuper(StreetControls);

  /**
   * @constructor
   * @param { View } view - View where this control will be used
   * @param { Object } options - Configuration of this controls
   * @param { number } [options.wallMaxDistance=1000] - Maximum distance to click on a wall, in meter.
   * @param { number } [options.animationDurationWall=200] - Time in millis for the animation when clicking on a wall.
   * @param { THREE.Mesh } [options.surfaceGround] - Surface helper to see when mouse is on the ground, default is a transparent circle.
   * @param { THREE.Mesh } [options.surfaceWall] - Surface helper to see when mouse is on a wall, default is a transparent rectangle.
   * @param { string } [options.buildingsLayer='Buildings'] - Name of the building layer (used to pick on wall).
   * @param { function } [options.computeTime] - Function to compute time (in millis), used for the animation to move to a distance (in meter)
   * @param { number } [options.offset=4] - Altitude in meter up to the ground to move to when click on a target on the ground.
   */
  function StreetControls(view) {
    var _thisSuper, _this;

    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    (0, _classCallCheck2["default"])(this, StreetControls);
    _this = _super.call(this, view, options);
    _this.isStreetControls = true;
    _this._onMouseOut = (0, _get2["default"])((_thisSuper = (0, _assertThisInitialized2["default"])(_this), (0, _getPrototypeOf2["default"])(StreetControls.prototype)), "onMouseUp", _thisSuper).bind((0, _assertThisInitialized2["default"])(_this));
    view.domElement.addEventListener('mouseout', _this._onMouseOut); // two positions used by this control : current and next

    _this.previousPosition = undefined;
    _this.currentPosition = undefined;
    _this.nextPosition = undefined;
    _this.keyGoToNextPosition = 90;
    _this.keyGoToPreviousPosition = 83;
    _this.keySetCameraToCurrentPositionAndLookAtNext = 65;
    _this.keySetCameraToCurrentPositionAndLookAtPrevious = 81; // Tween is used to make smooth animations

    _this.tweenGroup = new _tween["default"].Group(); // init surfaces used as helper for end user

    _this.surfaceGround = options.surfaceGround || createCircle();
    _this.surfaceWall = options.surfaceWall || createRectangle(); // surfaces is an object3D containing the two surfaces

    _this.surfaces = new THREE.Object3D();

    _this.surfaces.add(_this.surfaceGround);

    _this.surfaces.add(_this.surfaceWall);

    _this.view.scene.add(_this.surfaces);

    _this.wallMaxDistance = options.wallMaxDistance || 1000;
    _this.animationDurationWall = options.animationDurationWall || 200;
    _this.buildingsLayer = options.buildingsLayer;
    _this.computeTime = options.computeTime || computeTime;
    _this.offset = options.offset || 4;

    _this.transformationPositionPickOnTheGround = options.transformationPositionPickOnTheGround || function (position) {
      return position;
    };

    _this.end = _this.camera.clone();
    return _this;
  }

  (0, _createClass2["default"])(StreetControls, [{
    key: "setCurrentPosition",
    value: function setCurrentPosition(newCurrentPosition) {
      this.currentPosition = newCurrentPosition;
    }
  }, {
    key: "setNextPosition",
    value: function setNextPosition(newNextPosition) {
      this.nextPosition = newNextPosition;
    }
  }, {
    key: "setPreviousPosition",
    value: function setPreviousPosition(newPreviousPosition) {
      this.previousPosition = newPreviousPosition;
    }
  }, {
    key: "onMouseUp",
    value: function onMouseUp(event) {
      if (this.enabled == false) {
        return;
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(StreetControls.prototype), "onMouseUp", this).call(this);

      if (this._stateOnMouseDrag) {
        this._stateOnMouseDrag = false;
      } else {
        pick(event, this.view, this.buildingsLayer, this.onClickOnGround.bind(this), this.onClickOnWall.bind(this));
      }
    }
  }, {
    key: "onMouseMove",
    value: function onMouseMove(event) {
      var _this2 = this;

      if (this.enabled == false) {
        return;
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(StreetControls.prototype), "onMouseMove", this).call(this, event);

      if (this._isMouseDown) {
        // state mouse drag (move + mouse click)
        this._stateOnMouseDrag = true;
        this.stopAnimations();
      } else if (!this.tween) {
        // mouse pick and manage surfaces
        pick(event, this.view, this.buildingsLayer, function (groundTarget, normal) {
          updateSurfaces(_this2.surfaces, groundTarget, normal);
          _this2.surfaceGround.visible = true;
          _this2.surfaceWall.visible = false;
        }, function (wallTarget, normal) {
          updateSurfaces(_this2.surfaces, wallTarget, normal);
          _this2.surfaceWall.visible = true;
          _this2.surfaceGround.visible = false;
        });
        this.view.notifyChange(this.surfaces);
      }
    }
    /**
     * Sets the camera to the current position (stored in this controls), looking at the next position (also stored in this controls).
     *
     * @param      { boolean }  lookAtPrevious   look at the previous position rather than the next one
     */

  }, {
    key: "setCameraToCurrentPosition",
    value: function setCameraToCurrentPosition(lookAtPrevious) {
      if (lookAtPrevious) {
        this.setCameraOnPosition(this.currentPosition, this.previousPosition);
      } else {
        this.setCameraOnPosition(this.currentPosition, this.nextPosition);
      }
    }
    /**
     * Set the camera on a position, looking at another position.
     *
     * @param      { THREE.Vector3 }  position   The position to set the camera
     * @param      { THREE.Vector3 }  lookAt      The position where the camera look at.
     */

  }, {
    key: "setCameraOnPosition",
    value: function setCameraOnPosition(position, lookAt) {
      if (!position || !lookAt) {
        return;
      }

      this.camera.position.copy(position);

      if (this.view.tileLayer && this.view.tileLayer.isGlobeLayer) {
        this.camera.up.copy(position).normalize();
      } else {
        this.camera.up.set(0, 0, 1);
      }

      this.camera.lookAt(lookAt);
      this.camera.updateMatrixWorld();
      this.reset();
    }
    /**
     * Method called when user click on the ground.</br>
     * Note that this funtion contains default values that can be overrided, by overriding this class.
     *
     * @param {THREE.Vector3} position - The position
     */

  }, {
    key: "onClickOnGround",
    value: function onClickOnGround(position) {
      position = this.transformationPositionPickOnTheGround(position);

      if (this.view.tileLayer && this.view.tileLayer.isGlobeLayer) {
        up.copy(position).normalize();
      } else {
        up.set(0, 0, 1);
      }

      position.add(up.multiplyScalar(this.offset)); // compute time to go there

      var distance = this.camera.position.distanceTo(position); // 500 millis constant, plus an amount of time depending of the distance (but not linearly)

      var time = this.computeTime(distance); // move the camera

      this.moveCameraTo(position, time);
    }
    /**
     * Method called when user click on oject that is not the ground.</br>
     * Note that this function contains default values that can be overrided, by overriding this class.
     *
     * @param {THREE.Vector3} position - The position
     */

  }, {
    key: "onClickOnWall",
    value: function onClickOnWall(position) {
      var distance = this.camera.position.distanceTo(position); // can't click on a wall that is at 1km distance.

      if (distance < this.wallMaxDistance) {
        this.animateCameraLookAt(position, this.animationDurationWall);
      }
    }
    /**
     * Animate the camera to make it look at a position, in a given time
     *
     * @param { THREE.Vector3 }  position - Position to look at
     * @param { number } time - Time in millisecond
     */

  }, {
    key: "animateCameraLookAt",
    value: function animateCameraLookAt(position, time) {
      var _this3 = this;

      // stop existing animation
      this.stopAnimations(); // prepare start point and end point

      startQuaternion.copy(this.camera.quaternion);
      this.end.copy(this.camera);
      this.end.lookAt(position);
      this.tween = new _tween["default"].Tween({
        t: 0
      }, this.tweenGroup).to({
        t: 1
      }, time).easing(_tween["default"].Easing.Quadratic.Out).onComplete(function () {
        _this3.stopAnimations();
      }).onUpdate(function (d) {
        // 'manually' slerp the Quaternion to avoid rotation issues
        _this3.camera.quaternion.slerpQuaternions(startQuaternion, _this3.end.quaternion, d.t);
      }).start();

      this.animationFrameRequester = function () {
        _this3.tweenGroup.update(); // call reset from super class FirsPersonControls to make mouse rotation managed by FirstPersonControl still aligned


        _this3.reset();

        _this3.view.notifyChange(_this3.camera);
      };

      this.view.addFrameRequester(_MainLoop.MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
      this.view.notifyChange(this.camera);
    }
    /**
     * Move the camera smoothly to the position, in a given time.
     *
     * @param { THREE.Vector3 }  position - Destination of the movement.
     * @param { number } time - Time in millisecond
     * @return { Promise }
     */

  }, {
    key: "moveCameraTo",
    value: function moveCameraTo(position) {
      var _this4 = this;

      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;

      if (!position) {
        return Promise.resolve();
      }

      var resolve;
      var promise = new Promise(function (r) {
        resolve = r;
      });
      this.stopAnimations();
      this.tween = new _tween["default"].Tween(this.camera.position, this.tweenGroup) // Create a new tween that modifies camera position
      .to(position.clone(), time).easing(_tween["default"].Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
      .onComplete(function () {
        _this4.stopAnimations();

        resolve();
      }).start();

      this.animationFrameRequester = function () {
        _this4.tweenGroup.update();

        _this4.view.notifyChange(_this4.camera);
      };

      this.view.addFrameRequester(_MainLoop.MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
      this.view.notifyChange(this.camera);
      return promise;
    }
  }, {
    key: "stopAnimations",
    value: function stopAnimations() {
      if (this.tween) {
        this.tween.stop();
        this.tween = undefined;
      }

      if (this.animationFrameRequester) {
        this.view.removeFrameRequester(_MainLoop.MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
        this.animationFrameRequester = null;
      }
    }
    /**
     * Move the camera to the 'currentPosition' stored in this control.
     */

  }, {
    key: "moveCameraToCurrentPosition",
    value: function moveCameraToCurrentPosition() {
      this.moveCameraTo(this.currentPosition);
    }
  }, {
    key: "onKeyDown",
    value: function onKeyDown(e) {
      if (this.enabled == false) {
        return;
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(StreetControls.prototype), "onKeyDown", this).call(this, e); // key to move to next position (default to Z)

      if (e.keyCode == this.keyGoToNextPosition) {
        this.moveCameraTo(this.nextPosition);
      } // key to move to previous position (default to S)


      if (e.keyCode == this.keyGoToPreviousPosition) {
        this.moveCameraTo(this.previousPosition);
      } // key to set to camera to current position looking at next position (default to A)


      if (e.keyCode == this.keySetCameraToCurrentPositionAndLookAtNext) {
        this.setCameraToCurrentPosition();
        this.view.notifyChange(this.view.camera.camera3D);
      } // key to set to camera to current position looking at previous position (default to Q)


      if (e.keyCode == this.keySetCameraToCurrentPositionAndLookAtPrevious) {
        this.setCameraToCurrentPosition(true);
        this.view.notifyChange(this.view.camera.camera3D);
      }
    }
  }, {
    key: "dispose",
    value: function dispose() {
      this.view.domElement.removeEventListener('mouseout', this._onMouseOut, false);
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(StreetControls.prototype), "dispose", this).call(this);
    }
  }]);
  return StreetControls;
}(_FirstPersonControls2["default"]);

var _default = StreetControls;
exports["default"] = _default;