itowns 2.44.3-next.9 → 2.45.0

package/lib/Controls/StreetControls.js

@@ -1,392 +0,0 @@
-import TWEEN from '@tweenjs/tween.js';
-import * as THREE from 'three';
-import { MAIN_LOOP_EVENTS } from "../Core/MainLoop.js";
-import FirstPersonControls from "./FirstPersonControls.js";
-const material = new THREE.MeshBasicMaterial({
-  color: 0xffffff,
-  depthTest: false,
-  transparent: true,
-  opacity: 0.5
-});
-function createCircle() {
-  const geomCircle = new THREE.CircleGeometry(1, 32);
-  return new THREE.Mesh(geomCircle, material);
-}
-function createRectangle() {
-  const geomPlane = new THREE.PlaneGeometry(4, 2, 1);
-  const 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
-const target = new THREE.Vector3();
-const normal = new THREE.Vector3();
-const normalMatrix = new THREE.Matrix3();
-const up = new THREE.Vector3();
-const startQuaternion = new THREE.Quaternion();
-function pick(event, view, buildingsLayer) {
-  let pickGround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
-  let pickObject = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : () => {};
-  let pickNothing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : () => {};
-  // get real distance to ground, with a specific method to pick on the elevation layer
-  view.getPickingPositionFromDepth(view.eventToViewCoords(event), target);
-  const distanceToGround = view.camera3D.position.distanceTo(target);
-
-  // pick on building layer
-  const 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) {
-    const far = view.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;
-}
-
-/**
- * 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
- */
-class StreetControls extends FirstPersonControls {
-  /**
-   * @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.
-   */
-  constructor(view) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super(view, options);
-    this.isStreetControls = true;
-    this._onMouseOut = super.onMouseUp.bind(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.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 || (position => position);
-    this.end = this.camera.clone();
-  }
-  setCurrentPosition(newCurrentPosition) {
-    this.currentPosition = newCurrentPosition;
-  }
-  setNextPosition(newNextPosition) {
-    this.nextPosition = newNextPosition;
-  }
-  setPreviousPosition(newPreviousPosition) {
-    this.previousPosition = newPreviousPosition;
-  }
-  onMouseUp(event) {
-    if (this.enabled == false) {
-      return;
-    }
-    super.onMouseUp();
-    if (this._stateOnMouseDrag) {
-      this._stateOnMouseDrag = false;
-    } else {
-      pick(event, this.view, this.buildingsLayer, this.onClickOnGround.bind(this), this.onClickOnWall.bind(this));
-    }
-  }
-  onMouseMove(event) {
-    if (this.enabled == false) {
-      return;
-    }
-    super.onMouseMove(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, (groundTarget, normal) => {
-        updateSurfaces(this.surfaces, groundTarget, normal);
-        this.surfaceGround.visible = true;
-        this.surfaceWall.visible = false;
-      }, (wallTarget, normal) => {
-        updateSurfaces(this.surfaces, wallTarget, normal);
-        this.surfaceWall.visible = true;
-        this.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
-   */
-  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.
-   */
-  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
-   */
-  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
-    const distance = this.camera.position.distanceTo(position);
-    // 500 millis constant, plus an amount of time depending of the distance (but not linearly)
-    const 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
-   */
-  onClickOnWall(position) {
-    const 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
-   */
-  animateCameraLookAt(position, time) {
-    // 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.Tween({
-      t: 0
-    }).to({
-      t: 1
-    }, time).easing(TWEEN.Easing.Quadratic.Out).onComplete(() => {
-      this.stopAnimations();
-    }).onUpdate(d => {
-      // 'manually' slerp the Quaternion to avoid rotation issues
-      this.camera.quaternion.slerpQuaternions(startQuaternion, this.end.quaternion, d.t);
-    }).start();
-    this.tweenGroup.add(this.tween);
-    this.animationFrameRequester = () => {
-      this.tweenGroup.update();
-      // call reset from super class FirsPersonControls to make mouse rotation managed by FirstPersonControl still aligned
-      this.reset();
-      this.view.notifyChange(this.camera);
-    };
-    this.view.addFrameRequester(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 }
-   */
-  moveCameraTo(position) {
-    let time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
-    if (!position) {
-      return Promise.resolve();
-    }
-    let resolve;
-    const promise = new Promise(r => {
-      resolve = r;
-    });
-    this.stopAnimations();
-    this.tween = new TWEEN.Tween(this.camera.position) // Create a new tween that modifies camera position
-    .to(position.clone(), time).easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
-    .onComplete(() => {
-      this.stopAnimations();
-      resolve();
-    }).start();
-    this.tweenGroup.add(this.tween);
-    this.animationFrameRequester = () => {
-      this.tweenGroup.update();
-      this.view.notifyChange(this.camera);
-    };
-    this.view.addFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
-    this.view.notifyChange(this.camera);
-    return promise;
-  }
-  stopAnimations() {
-    if (this.tween) {
-      this.tween.stop();
-      this.tween = undefined;
-      this.tweenGroup.removeAll();
-    }
-    if (this.animationFrameRequester) {
-      this.view.removeFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
-      this.animationFrameRequester = null;
-    }
-  }
-
-  /**
-   * Move the camera to the 'currentPosition' stored in this control.
-   */
-  moveCameraToCurrentPosition() {
-    this.moveCameraTo(this.currentPosition);
-  }
-  onKeyDown(e) {
-    if (this.enabled == false) {
-      return;
-    }
-    super.onKeyDown(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.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.camera3D);
-    }
-  }
-  dispose() {
-    this.view.domElement.removeEventListener('mouseout', this._onMouseOut, false);
-    super.dispose();
-  }
-}
-export default StreetControls;