iTowns / itowns / 9502715090

import * as THREE from 'three';

import AnimationPlayer from 'Core/AnimationPlayer';

import Coordinates from 'Core/Geographic/Coordinates';

import { ellipsoidSizes } from 'Core/Math/Ellipsoid';

import CameraUtils from 'Utils/CameraUtils';

import StateControl from 'Controls/StateControl';

import { VIEW_EVENTS } from 'Core/View';

// private members

const EPS = 0.000001;

const direction = {

    up: new THREE.Vector2(0, 1),

    bottom: new THREE.Vector2(0, -1),

    left: new THREE.Vector2(1, 0),

    right: new THREE.Vector2(-1, 0),

};

// Orbit

const rotateStart = new THREE.Vector2();

const rotateEnd = new THREE.Vector2();

const rotateDelta = new THREE.Vector2();

const spherical = new THREE.Spherical(1.0, 0.01, 0);

const sphericalDelta = new THREE.Spherical(1.0, 0, 0);

let orbitScale = 1.0;

// Pan

const panStart = new THREE.Vector2();

const panEnd = new THREE.Vector2();

const panDelta = new THREE.Vector2();

const panOffset = new THREE.Vector3();

// Dolly

const dollyStart = new THREE.Vector2();

const dollyEnd = new THREE.Vector2();

const dollyDelta = new THREE.Vector2();

let dollyScale;

// Globe move

const moveAroundGlobe = new THREE.Quaternion();

const cameraTarget = new THREE.Object3D();

const coordCameraTarget = new Coordinates('EPSG:4978');

cameraTarget.matrixWorldInverse = new THREE.Matrix4();

const xyz = new Coordinates('EPSG:4978', 0, 0, 0);

const c = new Coordinates('EPSG:4326', 0, 0, 0);

// Position object on globe

function positionObject(newPosition, object) {

    xyz.setFromVector3(newPosition).as('EPSG:4326', c);

    object.position.copy(newPosition);

    object.lookAt(c.geodesicNormal.add(newPosition));

    object.rotateX(Math.PI * 0.5);

    object.updateMatrixWorld(true);

}

// Save the last time of mouse move for damping

let lastTimeMouseMove = 0;

// Animations and damping

let enableAnimation = true;

const dampingFactorDefault = 0.25;

const dampingMove = new THREE.Quaternion(0, 0, 0, 1);

const durationDampingMove = 120;

const durationDampingOrbital = 60;

// Pan Move

const panVector = new THREE.Vector3();

// Save last transformation

const lastPosition = new THREE.Vector3();

const lastQuaternion = new THREE.Quaternion();

// Tangent sphere to ellipsoid

const pickSphere = new THREE.Sphere();

const pickingPoint = new THREE.Vector3();

// Sphere intersection

const intersection = new THREE.Vector3();

// Set to true to enable target helper

const enableTargetHelper = false;

const helpers = {};

if (enableTargetHelper) {

    helpers.picking = new THREE.AxesHelper(500000);

    helpers.target = new THREE.AxesHelper(500000);

}

/**

 * Globe control pan event. Fires after camera pan

 * @event GlobeControls#pan-changed

 * @property target {GlobeControls} dispatched on controls

 * @property type {string} orientation-changed

 */

/**

 * Globe control orientation event. Fires when camera's orientation change

 * @event GlobeControls#orientation-changed

 * @property new {object}

 * @property new.tilt {number} the new value of the tilt of the camera

 * @property new.heading {number} the new value of the heading of the camera

 * @property previous {object}

 * @property previous.tilt {number} the previous value of the tilt of the camera

 * @property previous.heading {number} the previous value of the heading of the camera

 * @property target {GlobeControls} dispatched on controls

 * @property type {string} orientation-changed

 */

/**

 * Globe control range event. Fires when camera's range to target change

 * @event GlobeControls#range-changed

 * @property new {number} the new value of the range

 * @property previous {number} the previous value of the range

 * @property target {GlobeControls} dispatched on controls

 * @property type {string} range-changed

 */

/**

 * Globe control camera's target event. Fires when camera's target change

 * @event GlobeControls#camera-target-changed

 * @property new {object}

 * @property new {Coordinates} the new camera's target coordinates

 * @property previous {Coordinates} the previous camera's target coordinates

 * @property target {GlobeControls} dispatched on controls

 * @property type {string} camera-target-changed

 */

/**

 * globe controls events

 * @property PAN_CHANGED {string} Fires after camera pan

 * @property ORIENTATION_CHANGED {string} Fires when camera's orientation change

 * @property RANGE_CHANGED {string} Fires when camera's range to target change

 * @property CAMERA_TARGET_CHANGED {string} Fires when camera's target change

 */

export const CONTROL_EVENTS = {

    PAN_CHANGED: 'pan-changed',

    ORIENTATION_CHANGED: 'orientation-changed',

    RANGE_CHANGED: 'range-changed',

    CAMERA_TARGET_CHANGED: 'camera-target-changed',

};

const quaterPano = new THREE.Quaternion();

const quaterAxis = new THREE.Quaternion();

const axisX = new THREE.Vector3(1, 0, 0);

let minDistanceZ = Infinity;

const lastNormalizedIntersection = new THREE.Vector3();

const normalizedIntersection = new THREE.Vector3();

const raycaster = new THREE.Raycaster();

const targetPosition = new THREE.Vector3();

const pickedPosition = new THREE.Vector3();

const sphereCamera = new THREE.Sphere();

let previous;

/**

 * GlobeControls is a camera controller

 *

 * @class      GlobeControls

 * @param      {GlobeView}  view the view where the control will be used

 * @param      {CameraTransformOptions|Extent} placement   the {@link CameraTransformOptions} to apply to view's camera

 * or the extent it must display at initialisation, see {@link CameraTransformOptions} in {@link CameraUtils}.

 * @param      {object}  [options] An object with one or more configuration properties. Any property of GlobeControls

 * can be passed in this object.

 * @property      {number}  zoomFactor The factor the scale is multiplied by when dollying (zooming) in or

 * divided by when dollying out. Default is 1.1.

 * @property      {number}  rotateSpeed Speed camera rotation in orbit and panoramic mode. Default is 0.25.

 * @property      {number}  minDistance Minimum distance between ground and camera in meters (Perspective Camera only).

 * Default is 250.

 * @property      {number}  maxDistance Maximum distance between ground and camera in meters

 * (Perspective Camera only). Default is ellipsoid radius * 8.

 * @property      {number}  minZoom How far you can zoom in, in meters (Orthographic Camera only). Default is 0.

 * @property      {number}  maxZoom How far you can zoom out, in meters (Orthographic Camera only). Default

 * is Infinity.

 * @property      {number}  keyPanSpeed Number of pixels moved per push on array key. Default is 7.

 * @property      {number}  minPolarAngle Minimum vertical orbit angle (in degrees). Default is 0.5.

 * @property      {number}  maxPolarAngle Maximum vertical orbit angle (in degrees). Default is 86.

 * @property      {number}  minAzimuthAngle Minimum horizontal orbit angle (in degrees). If modified,

 * should be in [-180,0]. Default is -Infinity.

 * @property      {number}  maxAzimuthAngle Maximum horizontal orbit angle (in degrees). If modified,

 * should be in [0,180]. Default is Infinity.

 * @property      {boolean} handleCollision Handle collision between camera and ground or not, i.e. whether

 * you can zoom underground or not. Default is true.

 * @property      {boolean} enableDamping Enable damping or not (simulates the lag that a real camera

 * operator introduces while operating a heavy physical camera). Default is true.

 * @property      {boolean} dampingMoveFactor the damping move factor. Default is 0.25.

 */

    constructor(view, placement, options = {}) {

        super();

        this.player = new AnimationPlayer();

        this.view = view;

        this.camera = view.camera3D;

        // State control

        this.states = new StateControl(this.view);

        // this.enabled property has moved to StateControl

        Object.defineProperty(this, 'enabled', {

                    'GlobeControls.enabled property is deprecated. Use StateControl.enabled instead ' +

                    '- which you can access with GlobeControls.states.enabled.',

                );

        // backwards compatibility

        if (options.zoomSpeed) {

            console.warn('Controls zoomSpeed parameter is deprecated. Use zoomFactor instead.');

            options.zoomFactor = options.zoomFactor || options.zoomSpeed;

        }

        this.zoomFactor = options.zoomFactor || 1.1;

        // Limits to how far you can dolly in and out ( PerspectiveCamera only )

        this.minDistance = options.minDistance || 250;

        this.maxDistance = options.maxDistance || ellipsoidSizes.x * 8.0;

        // Limits to how far you can zoom in and out ( OrthographicCamera only )

        this.minZoom = options.minZoom || 0;

        this.maxZoom = options.maxZoom || Infinity;

        // Set to true to disable this control

        this.rotateSpeed = options.rotateSpeed || 0.25;

        // Set to true to disable this control

        this.keyPanSpeed = options.keyPanSpeed || 7.0; // pixels moved per arrow key push

        // How far you can orbit vertically, upper and lower limits.

        // Range is 0 to Math.PI radians.

        // TODO Warning minPolarAngle = 0.01 -> it isn't possible to be perpendicular on Globe

        this.maxPolarAngle = THREE.MathUtils.degToRad(options.minPolarAngle ?? 86);

        // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].

        this.maxAzimuthAngle = options.maxAzimuthAngle ? THREE.MathUtils.degToRad(options.maxAzimuthAngle) : Infinity; // radians

        // Set collision options

        Object.defineProperty(this, 'enableKeys', {

            get: () => this.states.enableKeys,

            set: (value) => {

                console.warn(

                    '- which you can access with GlobeControls.states.enableKeys.',

                );

        this.enableDamping = options.enableDamping !== false;

        this.dampingMoveFactor = options.dampingMoveFactor != undefined ? options.dampingMoveFactor : dampingFactorDefault;

        this.startEvent = {

            type: 'start',

        };

        this.endEvent = {

            type: 'end',

        };

        // Update helper

        this.updateHelper = enableTargetHelper ? (position, helper) => {

            positionObject(position, helper);

            view.notifyChange(this.camera);

        } : function empty() { };

        this._onEndingMove = null;

        this._onTravel = this.travel.bind(this);

        this._onTouchStart = this.onTouchStart.bind(this);

        this._onTouchEnd = this.onTouchEnd.bind(this);

        this._onTouchMove = this.onTouchMove.bind(this);

        this._onStateChange = this.onStateChange.bind(this);

        this._onRotation = this.handleRotation.bind(this);

        this._onDrag = this.handleDrag.bind(this);

        this._onDolly = this.handleDolly.bind(this);

        this._onPan = this.handlePan.bind(this);

        this._onPanoramic = this.handlePanoramic.bind(this);

        this._onZoom = this.handleZoom.bind(this);

        this.states.addEventListener('state-changed', this._onStateChange, false);

        this.states.addEventListener(this.states.ORBIT._event, this._onRotation, false);

        this.states.addEventListener(this.states.MOVE_GLOBE._event, this._onDrag, false);

        this.states.addEventListener(this.states.DOLLY._event, this._onDolly, false);

        this.states.addEventListener(this.states.PAN._event, this._onPan, false);

        this.states.addEventListener('zoom', this._onZoom, false);

        this.view.domElement.addEventListener('touchstart', this._onTouchStart, false);

        this.view.domElement.addEventListener('touchmove', this._onTouchMove, false);

        this.states.addEventListener(this.states.TRAVEL_IN._event, this._onTravel, false);

        this.states.addEventListener(this.states.TRAVEL_OUT._event, this._onTravel, false);

        view.scene.add(cameraTarget);

        if (enableTargetHelper) {

            cameraTarget.add(helpers.target);

            view.scene.add(helpers.picking);

        }

        if (placement.isExtent) {

            placement.center().as('EPSG:4978', xyz);

        } else {

            placement.coord.as('EPSG:4978', xyz);

            placement.tilt = placement.tilt || 89.5;

            placement.heading = placement.heading || 0;

        }

        positionObject(xyz, cameraTarget);

        coordCameraTarget.crs = this.view.referenceCrs;

    }

    get zoomInScale() {

        return this.zoomFactor;

    get zoomOutScale() {

        return 1 / this.zoomFactor;

    }

    get isPaused() {

        // TODO : also check if CameraUtils is performing an animation

        return this.states.currentState === this.states.NONE

            && !this.player.isPlaying();

    }

    onEndingMove(current) {

        if (this._onEndingMove) {

            this.player.removeEventListener('animation-stopped', this._onEndingMove);

            this._onEndingMove = null;

        }

        this.handlingEvent(current);

    }

    rotateLeft(angle = 0) {

        sphericalDelta.theta -= angle;

    }

    rotateUp(angle = 0) {

        sphericalDelta.phi -= angle;

    }

    // pass in distance in world space to move left

    panLeft(distance) {

        const te = this.camera.matrix.elements;

        // get X column of matrix

        panOffset.fromArray(te);

        panOffset.multiplyScalar(-distance);

        panVector.add(panOffset);

    }

    // pass in distance in world space to move up

    panUp(distance) {

        const te = this.camera.matrix.elements;

        // get Y column of matrix

        panOffset.fromArray(te, 4);

        panOffset.multiplyScalar(distance);

        panVector.add(panOffset);

    }

            let targetDistance = this.camera.position.distanceTo(this.getCameraTargetPosition());

            // half of the fov is center to top of screen

            this.panUp(deltaY * targetDistance / gfx.height);

        } else if (this.camera.isOrthographicCamera) {

        dollyScale = delta > 0 ? this.zoomInScale : this.zoomOutScale;

        if (this.camera.isPerspectiveCamera) {

            orbitScale /= dollyScale;

        } else if (this.camera.isOrthographicCamera) {

            this.camera.zoom = THREE.MathUtils.clamp(this.camera.zoom * dollyScale, this.minZoom, this.maxZoom);

            this.camera.updateProjectionMatrix();

            this.view.notifyChange(this.camera);

        }

    }

    getMinDistanceCameraBoundingSphereObbsUp(tile) {

        if (tile.level > 10 && tile.children.length == 1 && tile.geometry) {

            const obb = tile.obb;

            sphereCamera.center.copy(this.camera.position);

            sphereCamera.radius = this.minDistanceCollision;

            if (obb.isSphereAboveXYBox(sphereCamera)) {

                minDistanceZ = Math.min(sphereCamera.center.z - obb.box3D.max.z, minDistanceZ);

            }

        }

    }

    update(state = this.states.currentState) {

        // We compute distance between camera's bounding sphere and geometry's obb up face

        minDistanceZ = Infinity;

            // This constraint or deceleration inversely proportional to the camera/obb distance

            if (this.view.tileLayer) {

                for (const tile of this.view.tileLayer.level0Nodes) {

                    tile.traverse(this.getMinDistanceCameraBoundingSphereObbsUp.bind(this));

                }

            }

        }

        switch (state) {

            // MOVE_GLOBE Rotate globe with mouse

            case this.states.MOVE_GLOBE:

                if (minDistanceZ < 0) {

                    cameraTarget.translateY(-minDistanceZ);

                    this.camera.position.setLength(this.camera.position.length() - minDistanceZ);

                } else if (minDistanceZ < this.minDistanceCollision) {

                    const translate = this.minDistanceCollision * (1.0 - minDistanceZ / this.minDistanceCollision);

                    cameraTarget.translateY(translate);

                    this.camera.position.setLength(this.camera.position.length() + translate);

                }

                lastNormalizedIntersection.copy(normalizedIntersection).applyQuaternion(moveAroundGlobe);

                cameraTarget.position.applyQuaternion(moveAroundGlobe);

                this.camera.position.applyQuaternion(moveAroundGlobe);

                break;

            // PAN Move camera in projection plan

            case this.states.PAN:

                cameraTarget.position.add(panVector);

                break;

            // PANORAMIC Move target camera

            case this.states.PANORAMIC: {

                this.camera.worldToLocal(cameraTarget.position);

                const normal = this.camera.position.clone().normalize().applyQuaternion(this.camera.quaternion.clone().invert());

                this.camera.position.applyMatrix4(cameraTarget.matrixWorldInverse);

                        // the deeper the camera is in this zone, the bigger the factor is

                        const slowdownFactor = 1 - (slowdownZone - (minDistanceZ - contraryLimit)) / slowdownZone;

                        // apply slowdown factor on tilt mouvement

                        sphericalDelta.phi *= slowdownFactor * slowdownFactor;

                    } else if (minDistanceZ < contraryLimit && minDistanceZ > -contraryLimit && sphericalDelta.phi > minContraintPhi) {

                        // contraint zone : contraint sphericalDelta.phi

                        const contraryZone = 2 * contraryLimit;

                        // calculation of the angle of rotation which allows to leave this zone

                        let contraryPhi = -Math.asin((contraryLimit - minDistanceZ) * 0.25 / spherical.radius);

                        // clamp contraryPhi to make a less brutal exit

                        contraryPhi = THREE.MathUtils.clamp(contraryPhi, minContraintPhi, 0);

                        const contraryFactor = 1 - (contraryLimit - minDistanceZ) / contraryZone;

                        sphericalDelta.phi = THREE.MathUtils.lerp(sphericalDelta.phi, contraryPhi, contraryFactor);

                        minDistanceZ -= Math.sin(sphericalDelta.phi) * spherical.radius;

                    }

                }

                spherical.theta += sphericalDelta.theta;

                spherical.phi += sphericalDelta.phi;

                // restrict spherical.theta to be between desired limits

                spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, spherical.theta));

                // restrict spherical.phi to be between desired limits

                spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, spherical.phi));

                spherical.radius = this.camera.position.length() * orbitScale;

                // restrict spherical.phi to be betwee EPS and PI-EPS

                spherical.makeSafe();

                // restrict radius to be between desired limits

                spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, spherical.radius));

                this.camera.position.setFromSpherical(spherical);

                    spherical.setFromVector3(this.camera.position);

                    sphericalDelta.phi = 0;

                }

                cameraTarget.localToWorld(this.camera.position);

            }

        }

        this.camera.up.copy(cameraTarget.position).normalize();

        this.camera.lookAt(cameraTarget.position);

        if (!this.enableDamping) {

            sphericalDelta.theta = 0;

            sphericalDelta.phi = 0;

            moveAroundGlobe.set(0, 0, 0, 1);

        } else {

            sphericalDelta.theta *= (1 - dampingFactorDefault);

            sphericalDelta.phi *= (1 - dampingFactorDefault);

            moveAroundGlobe.slerp(dampingMove, this.dampingMoveFactor * 0.2);

        }

        orbitScale = 1;

        panVector.set(0, 0, 0);

        // update condition is:

        // min(camera displacement, camera rotation in radians)^2 > EPS

        // using small-angle approximation cos(x/2) = 1 - x^2 / 8

        if (lastPosition.distanceToSquared(this.camera.position) > EPS || 8 * (1 - lastQuaternion.dot(this.camera.quaternion)) > EPS) {

            this.view.notifyChange(this.camera);

            lastPosition.copy(this.camera.position);

            lastQuaternion.copy(this.camera.quaternion);

        }

        // Launch animationdamping if mouse stops these movements

        if (this.enableDamping && state === this.states.ORBIT && this.player.isStopped() && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {

            this.player.setCallback(() => { this.update(this.states.ORBIT); });

            this.player.playLater(durationDampingOrbital, 2);

        }

        this.view.dispatchEvent({

            type: VIEW_EVENTS.CAMERA_MOVED,

            coord: coordCameraTarget.setFromVector3(cameraTarget.position),

            range: spherical.radius,

            heading: -THREE.MathUtils.radToDeg(spherical.theta),

            tilt: 90 - THREE.MathUtils.radToDeg(spherical.phi),

        });

    }

    onStateChange(event) {

        // If the state changed to NONE, end the movement associated to the previous state.

        if (this.states.currentState === this.states.NONE) {

            this.handleEndMovement(event);

            return;

        }

        // Stop CameraUtils ongoing animations, which can for instance be triggered with `this.travel` or

        // `this.lookAtCoordinate` methods.

        CameraUtils.stop(this.view, this.camera);

        // Dispatch events which specify if changes occurred in camera transform options.

        this.onEndingMove();

        // Stop eventual damping movement.

        this.player.stop();

        // Update camera transform options.

        this.updateTarget();

        // Initialize rotation and panoramic movements.

        rotateStart.copy(event.viewCoords);

        // Initialize drag movement.

            pickSphere.radius = pickingPoint.length();

            lastNormalizedIntersection.copy(pickingPoint).normalize();

            this.updateHelper(pickingPoint, helpers.picking);

        }

        // Initialize dolly movement.

        dollyStart.copy(event.viewCoords);

        this.view.getPickingPositionFromDepth(event.viewCoords, pickedPosition);        // mouse position

        // Initialize pan movement.

        panStart.copy(event.viewCoords);

    }

    handleRotation(event) {

        // Stop player if needed. Player can be playing while moving mouse in the case of rotation. This is due to the

        // fact that a damping move can occur while rotating (without the need of releasing the mouse button)

        this.player.stop();

        this.handlePanoramic(event);

    }

    handleDrag(event) {

        const normalized = this.view.viewToNormalizedCoords(event.viewCoords);

        // devtools open in web browser.

        this.camera.updateMatrixWorld();

        raycaster.setFromCamera(normalized, this.camera);

        // If there's intersection then move globe else we stop the move

            this.update();

        } else {

            this.states.onPointerUp();

        }

    }

    handleDolly(event) {

        dollyEnd.copy(event.viewCoords);

        dollyDelta.subVectors(dollyEnd, dollyStart);

        dollyStart.copy(dollyEnd);

        event.delta = dollyDelta.y;

        if (event.delta != 0) { this.handleZoom(event); }

    }

    handlePan(event) {

        if (event.viewCoords) {

            panEnd.copy(event.viewCoords);

            panDelta.subVectors(panEnd, panStart);

            panStart.copy(panEnd);

        } else if (event.direction) {

            panDelta.copy(direction[event.direction]).multiplyScalar(this.keyPanSpeed);

        }

        this.mouseToPan(panDelta.x, panDelta.y);

        this.update(this.states.PAN);

    }

    handlePanoramic(event) {

        rotateEnd.copy(event.viewCoords);

        rotateDelta.subVectors(rotateEnd, rotateStart);

        sphericalDelta.theta -= 2 * Math.PI * rotateDelta.x / gfx.width * this.rotateSpeed;

        // rotating up and down along whole screen attempts to go 360, but limited to 180

        sphericalDelta.phi -= 2 * Math.PI * rotateDelta.y / gfx.height * this.rotateSpeed;

        rotateStart.copy(rotateEnd);

        this.update();

    }

    handleEndMovement(event = {}) {

        this.dispatchEvent(this.endEvent);

        this.player.stop();

        // Launch damping movement for :

        //      * this.states.ORBIT

        //      * this.states.MOVE_GLOBE

        if (this.enableDamping) {

            if (event.previous === this.states.ORBIT && (sphericalDelta.theta > EPS || sphericalDelta.phi > EPS)) {

                this.player.setCallback(() => { this.update(this.states.ORBIT); });

                this.player.play(durationDampingOrbital);

                this._onEndingMove = () => this.onEndingMove();

                this.player.addEventListener('animation-stopped', this._onEndingMove);

            } else if (event.previous === this.states.MOVE_GLOBE && (Date.now() - lastTimeMouseMove < 50)) {

                this.player.setCallback(() => { this.update(this.states.MOVE_GLOBE); });

                // animation since mouse up event occurs less than 50ms after the last mouse move

                this.player.play(durationDampingMove);

                this._onEndingMove = () => this.onEndingMove();

                this.player.addEventListener('animation-stopped', this._onEndingMove);

            } else {

                this.onEndingMove();

            }

        } else {

            this.onEndingMove();

        }

    }

    updateTarget() {

        // Check if the middle of the screen is on the globe (to prevent having a dark-screen bug if outside the globe)

        if (this.view.getPickingPositionFromDepth(null, pickedPosition)) {

            // Update camera's target position

            const distance = !isNaN(pickedPosition.x) ? this.camera.position.distanceTo(pickedPosition) : 100;

            targetPosition.set(0, 0, -distance);

            this.camera.localToWorld(targetPosition);

            // set new camera target on globe

            cameraTarget.matrixWorldInverse.copy(cameraTarget.matrixWorld).invert();

            targetPosition.copy(this.camera.position);

            targetPosition.applyMatrix4(cameraTarget.matrixWorldInverse);

            spherical.setFromVector3(targetPosition);

        }

    }

    handlingEvent(current) {

        current = current || CameraUtils.getTransformCameraLookingAtTarget(this.view, this.camera);

        const diff = CameraUtils.getDiffParams(previous, current);

        if (diff) {

            if (diff.coord) {

                this.dispatchEvent({

                    type: CONTROL_EVENTS.CAMERA_TARGET_CHANGED,

                    previous: diff.coord.previous,

                    new: diff.coord.new,

                });

            }

            if (diff.tilt || diff.heading) {

                const event = {

                    type: CONTROL_EVENTS.ORIENTATION_CHANGED,

                };

                if (diff.tilt) {

                    event.previous = { tilt: diff.tilt.previous };

                    event.new = { tilt: diff.tilt.new };

                }

                    event.previous = event.previous || {};

                    event.new = event.new || {};

                    event.new.heading = diff.heading.new;

                    event.previous.heading = diff.heading.previous;

                }

                this.dispatchEvent(event);

            }

        }

    }

    travel(event) {

        this.player.stop();

        const point = this.view.getPickingPositionFromDepth(event.viewCoords);

        const range = this.getRange(point);

        if (point && range > this.minDistance) {

                coord: new Coordinates('EPSG:4978', point),

        let point = event.type === 'dolly' ? pickedPosition : this.view.getPickingPositionFromDepth(event.viewCoords);        // get cursor position

            point = xyz.setFromVector3(point).as('EPSG:4326', c).toVector3();

                if (camPos.x - point.x > 180) { point.x += 360; } else if (point.x - camPos.x > 180) { camPos.x += 360; }

            }

            point.lerp(  // point interpol between mouse cursor and cam pos

                camPos,

                (event.delta > 0 ? this.zoomInScale : this.zoomOutScale), // interpol factor

            );

            point = c.setFromVector3(point).as('EPSG:4978', xyz);

            return this.lookAtCoordinate({       // update view to the interpolate point

                coord: point,

                range,

            },

            false);

        }

    }

    onTouchStart(event) {

        // CameraUtils.stop(view);

        this.player.stop();

        // TODO : this.states.enabled check should be removed when moving touch events management to StateControl

        this.state = this.states.touchToState(event.touches.length);

        this.updateTarget();

        if (this.state !== this.states.NONE) {

            switch (this.state) {

                case this.states.MOVE_GLOBE: {

                    const coords = this.view.eventToViewCoords(event);

                    if (this.view.getPickingPositionFromDepth(coords, pickingPoint)) {

                        pickSphere.radius = pickingPoint.length();

                        lastNormalizedIntersection.copy(pickingPoint).normalize();

                        this.updateHelper(pickingPoint, helpers.picking);

                    } else {

                        this.state = this.states.NONE;

                    }

                    break;

                }

                case this.states.ORBIT:

                case this.states.DOLLY: {

                    const x = event.touches[0].pageX;

                    const y = event.touches[0].pageY;

                    const dx = x - event.touches[1].pageX;

                    panStart.set(event.touches[0].pageX, event.touches[0].pageY);

                    break;

                default:

        if (this.player.isPlaying()) {

            this.player.stop();

        }

        // TODO : this.states.enabled check should be removed when moving touch events management to StateControl

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

        event.preventDefault();

        event.stopPropagation();

        switch (event.touches.length) {

            case this.states.MOVE_GLOBE.finger: {

                const coords = this.view.eventToViewCoords(event);

                const normalized = this.view.viewToNormalizedCoords(coords);

                // An updateMatrixWorld on the camera prevents camera jittering when moving globe on a zoomed out view, with

                // devtools open in web browser.