bytev-charts/lib/plugin/three.js/examples/js/controls/TrackballControls.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import _Object$create from "@babel/runtime-corejs2/core-js/object/create";
import "core-js/modules/es.array.iterator.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.string.sub.js";
console.warn("THREE.TrackballControls: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");

THREE.TrackballControls = function (object, domElement) {
  if (domElement === undefined) console.warn('THREE.TrackballControls: The second parameter "domElement" is now mandatory.');
  if (domElement === document) console.error('THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.');
  var scope = this;
  var STATE = {
    NONE: -1,
    ROTATE: 0,
    ZOOM: 1,
    PAN: 2,
    TOUCH_ROTATE: 3,
    TOUCH_ZOOM_PAN: 4
  };
  this.object = object;
  this.domElement = domElement; // API

  this.enabled = true;
  this.screen = {
    left: 0,
    top: 0,
    width: 0,
    height: 0
  };
  this.rotateSpeed = 1.0;
  this.zoomSpeed = 1.2;
  this.panSpeed = 0.3;
  this.noRotate = false;
  this.noZoom = false;
  this.noPan = false;
  this.staticMoving = false;
  this.dynamicDampingFactor = 0.2;
  this.minDistance = 0;
  this.maxDistance = Infinity;
  this.keys = [65
  /*A*/
  , 83
  /*S*/
  , 68
  /*D*/
  ];
  this.mouseButtons = {
    LEFT: THREE.MOUSE.ROTATE,
    MIDDLE: THREE.MOUSE.ZOOM,
    RIGHT: THREE.MOUSE.PAN
  }; // internals

  this.target = new THREE.Vector3();
  var EPS = 0.000001;
  var lastPosition = new THREE.Vector3();
  var lastZoom = 1;

  var _state = STATE.NONE,
      _keyState = STATE.NONE,
      _eye = new THREE.Vector3(),
      _movePrev = new THREE.Vector2(),
      _moveCurr = new THREE.Vector2(),
      _lastAxis = new THREE.Vector3(),
      _lastAngle = 0,
      _zoomStart = new THREE.Vector2(),
      _zoomEnd = new THREE.Vector2(),
      _touchZoomDistanceStart = 0,
      _touchZoomDistanceEnd = 0,
      _panStart = new THREE.Vector2(),
      _panEnd = new THREE.Vector2(); // for reset


  this.target0 = this.target.clone();
  this.position0 = this.object.position.clone();
  this.up0 = this.object.up.clone();
  this.zoom0 = this.object.zoom; // events

  var changeEvent = {
    type: 'change'
  };
  var startEvent = {
    type: 'start'
  };
  var endEvent = {
    type: 'end'
  }; // methods

  this.handleResize = function () {
    var box = scope.domElement.getBoundingClientRect(); // adjustments come from similar code in the jquery offset() function

    var d = scope.domElement.ownerDocument.documentElement;
    scope.screen.left = box.left + window.pageXOffset - d.clientLeft;
    scope.screen.top = box.top + window.pageYOffset - d.clientTop;
    scope.screen.width = box.width;
    scope.screen.height = box.height;
  };

  var getMouseOnScreen = function () {
    var vector = new THREE.Vector2();
    return function getMouseOnScreen(pageX, pageY) {
      vector.set((pageX - scope.screen.left) / scope.screen.width, (pageY - scope.screen.top) / scope.screen.height);
      return vector;
    };
  }();

  var getMouseOnCircle = function () {
    var vector = new THREE.Vector2();
    return function getMouseOnCircle(pageX, pageY) {
      vector.set((pageX - scope.screen.width * 0.5 - scope.screen.left) / (scope.screen.width * 0.5), (scope.screen.height + 2 * (scope.screen.top - pageY)) / scope.screen.width // screen.width intentional
      );
      return vector;
    };
  }();

  this.rotateCamera = function () {
    var axis = new THREE.Vector3(),
        quaternion = new THREE.Quaternion(),
        eyeDirection = new THREE.Vector3(),
        objectUpDirection = new THREE.Vector3(),
        objectSidewaysDirection = new THREE.Vector3(),
        moveDirection = new THREE.Vector3(),
        angle;
    return function rotateCamera() {
      moveDirection.set(_moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0);
      angle = moveDirection.length();

      if (angle) {
        _eye.copy(scope.object.position).sub(scope.target);

        eyeDirection.copy(_eye).normalize();
        objectUpDirection.copy(scope.object.up).normalize();
        objectSidewaysDirection.crossVectors(objectUpDirection, eyeDirection).normalize();
        objectUpDirection.setLength(_moveCurr.y - _movePrev.y);
        objectSidewaysDirection.setLength(_moveCurr.x - _movePrev.x);
        moveDirection.copy(objectUpDirection.add(objectSidewaysDirection));
        axis.crossVectors(moveDirection, _eye).normalize();
        angle *= scope.rotateSpeed;
        quaternion.setFromAxisAngle(axis, angle);

        _eye.applyQuaternion(quaternion);

        scope.object.up.applyQuaternion(quaternion);

        _lastAxis.copy(axis);

        _lastAngle = angle;
      } else if (!scope.staticMoving && _lastAngle) {
        _lastAngle *= Math.sqrt(1.0 - scope.dynamicDampingFactor);

        _eye.copy(scope.object.position).sub(scope.target);

        quaternion.setFromAxisAngle(_lastAxis, _lastAngle);

        _eye.applyQuaternion(quaternion);

        scope.object.up.applyQuaternion(quaternion);
      }

      _movePrev.copy(_moveCurr);
    };
  }();

  this.zoomCamera = function () {
    var factor;

    if (_state === STATE.TOUCH_ZOOM_PAN) {
      factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
      _touchZoomDistanceStart = _touchZoomDistanceEnd;

      if (scope.object.isPerspectiveCamera) {
        _eye.multiplyScalar(factor);
      } else if (scope.object.isOrthographicCamera) {
        scope.object.zoom *= factor;
        scope.object.updateProjectionMatrix();
      } else {
        console.warn('THREE.TrackballControls: Unsupported camera type');
      }
    } else {
      factor = 1.0 + (_zoomEnd.y - _zoomStart.y) * scope.zoomSpeed;

      if (factor !== 1.0 && factor > 0.0) {
        if (scope.object.isPerspectiveCamera) {
          _eye.multiplyScalar(factor);
        } else if (scope.object.isOrthographicCamera) {
          scope.object.zoom /= factor;
          scope.object.updateProjectionMatrix();
        } else {
          console.warn('THREE.TrackballControls: Unsupported camera type');
        }
      }

      if (scope.staticMoving) {
        _zoomStart.copy(_zoomEnd);
      } else {
        _zoomStart.y += (_zoomEnd.y - _zoomStart.y) * this.dynamicDampingFactor;
      }
    }
  };

  this.panCamera = function () {
    var mouseChange = new THREE.Vector2(),
        objectUp = new THREE.Vector3(),
        pan = new THREE.Vector3();
    return function panCamera() {
      mouseChange.copy(_panEnd).sub(_panStart);

      if (mouseChange.lengthSq()) {
        if (scope.object.isOrthographicCamera) {
          var scale_x = (scope.object.right - scope.object.left) / scope.object.zoom / scope.domElement.clientWidth;
          var scale_y = (scope.object.top - scope.object.bottom) / scope.object.zoom / scope.domElement.clientWidth;
          mouseChange.x *= scale_x;
          mouseChange.y *= scale_y;
        }

        mouseChange.multiplyScalar(_eye.length() * scope.panSpeed);
        pan.copy(_eye).cross(scope.object.up).setLength(mouseChange.x);
        pan.add(objectUp.copy(scope.object.up).setLength(mouseChange.y));
        scope.object.position.add(pan);
        scope.target.add(pan);

        if (scope.staticMoving) {
          _panStart.copy(_panEnd);
        } else {
          _panStart.add(mouseChange.subVectors(_panEnd, _panStart).multiplyScalar(scope.dynamicDampingFactor));
        }
      }
    };
  }();

  this.checkDistances = function () {
    if (!scope.noZoom || !scope.noPan) {
      if (_eye.lengthSq() > scope.maxDistance * scope.maxDistance) {
        scope.object.position.addVectors(scope.target, _eye.setLength(scope.maxDistance));

        _zoomStart.copy(_zoomEnd);
      }

      if (_eye.lengthSq() < scope.minDistance * scope.minDistance) {
        scope.object.position.addVectors(scope.target, _eye.setLength(scope.minDistance));

        _zoomStart.copy(_zoomEnd);
      }
    }
  };

  this.update = function () {
    _eye.subVectors(scope.object.position, scope.target);

    if (!scope.noRotate) {
      scope.rotateCamera();
    }

    if (!scope.noZoom) {
      scope.zoomCamera();
    }

    if (!scope.noPan) {
      scope.panCamera();
    }

    scope.object.position.addVectors(scope.target, _eye);

    if (scope.object.isPerspectiveCamera) {
      scope.checkDistances();
      scope.object.lookAt(scope.target);

      if (lastPosition.distanceToSquared(scope.object.position) > EPS) {
        scope.dispatchEvent(changeEvent);
        lastPosition.copy(scope.object.position);
      }
    } else if (scope.object.isOrthographicCamera) {
      scope.object.lookAt(scope.target);

      if (lastPosition.distanceToSquared(scope.object.position) > EPS || lastZoom !== scope.object.zoom) {
        scope.dispatchEvent(changeEvent);
        lastPosition.copy(scope.object.position);
        lastZoom = scope.object.zoom;
      }
    } else {
      console.warn('THREE.TrackballControls: Unsupported camera type');
    }
  };

  this.reset = function () {
    _state = STATE.NONE;
    _keyState = STATE.NONE;
    scope.target.copy(scope.target0);
    scope.object.position.copy(scope.position0);
    scope.object.up.copy(scope.up0);
    scope.object.zoom = scope.zoom0;
    scope.object.updateProjectionMatrix();

    _eye.subVectors(scope.object.position, scope.target);

    scope.object.lookAt(scope.target);
    scope.dispatchEvent(changeEvent);
    lastPosition.copy(scope.object.position);
    lastZoom = scope.object.zoom;
  }; // listeners


  function keydown(event) {
    if (scope.enabled === false) return;
    window.removeEventListener('keydown', keydown);

    if (_keyState !== STATE.NONE) {
      return;
    } else if (event.keyCode === scope.keys[STATE.ROTATE] && !scope.noRotate) {
      _keyState = STATE.ROTATE;
    } else if (event.keyCode === scope.keys[STATE.ZOOM] && !scope.noZoom) {
      _keyState = STATE.ZOOM;
    } else if (event.keyCode === scope.keys[STATE.PAN] && !scope.noPan) {
      _keyState = STATE.PAN;
    }
  }

  function keyup() {
    if (scope.enabled === false) return;
    _keyState = STATE.NONE;
    window.addEventListener('keydown', keydown, false);
  }

  function mousedown(event) {
    if (scope.enabled === false) return;
    event.preventDefault();
    event.stopPropagation();

    if (_state === STATE.NONE) {
      switch (event.button) {
        case scope.mouseButtons.LEFT:
          _state = STATE.ROTATE;
          break;

        case scope.mouseButtons.MIDDLE:
          _state = STATE.ZOOM;
          break;

        case scope.mouseButtons.RIGHT:
          _state = STATE.PAN;
          break;

        default:
          _state = STATE.NONE;
      }
    }

    var state = _keyState !== STATE.NONE ? _keyState : _state;

    if (state === STATE.ROTATE && !scope.noRotate) {
      _moveCurr.copy(getMouseOnCircle(event.pageX, event.pageY));

      _movePrev.copy(_moveCurr);
    } else if (state === STATE.ZOOM && !scope.noZoom) {
      _zoomStart.copy(getMouseOnScreen(event.pageX, event.pageY));

      _zoomEnd.copy(_zoomStart);
    } else if (state === STATE.PAN && !scope.noPan) {
      _panStart.copy(getMouseOnScreen(event.pageX, event.pageY));

      _panEnd.copy(_panStart);
    }

    scope.domElement.ownerDocument.addEventListener('mousemove', mousemove, false);
    scope.domElement.ownerDocument.addEventListener('mouseup', mouseup, false);
    scope.dispatchEvent(startEvent);
  }

  function mousemove(event) {
    if (scope.enabled === false) return;
    event.preventDefault();
    event.stopPropagation();
    var state = _keyState !== STATE.NONE ? _keyState : _state;

    if (state === STATE.ROTATE && !scope.noRotate) {
      _movePrev.copy(_moveCurr);

      _moveCurr.copy(getMouseOnCircle(event.pageX, event.pageY));
    } else if (state === STATE.ZOOM && !scope.noZoom) {
      _zoomEnd.copy(getMouseOnScreen(event.pageX, event.pageY));
    } else if (state === STATE.PAN && !scope.noPan) {
      _panEnd.copy(getMouseOnScreen(event.pageX, event.pageY));
    }
  }

  function mouseup(event) {
    if (scope.enabled === false) return;
    event.preventDefault();
    event.stopPropagation();
    _state = STATE.NONE;
    scope.domElement.ownerDocument.removeEventListener('mousemove', mousemove);
    scope.domElement.ownerDocument.removeEventListener('mouseup', mouseup);
    scope.dispatchEvent(endEvent);
  }

  function mousewheel(event) {
    if (scope.enabled === false) return;
    if (scope.noZoom === true) return;
    event.preventDefault();
    event.stopPropagation();

    switch (event.deltaMode) {
      case 2:
        // Zoom in pages
        _zoomStart.y -= event.deltaY * 0.025;
        break;

      case 1:
        // Zoom in lines
        _zoomStart.y -= event.deltaY * 0.01;
        break;

      default:
        // undefined, 0, assume pixels
        _zoomStart.y -= event.deltaY * 0.00025;
        break;
    }

    scope.dispatchEvent(startEvent);
    scope.dispatchEvent(endEvent);
  }

  function touchstart(event) {
    if (scope.enabled === false) return;
    event.preventDefault();

    switch (event.touches.length) {
      case 1:
        _state = STATE.TOUCH_ROTATE;

        _moveCurr.copy(getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY));

        _movePrev.copy(_moveCurr);

        break;

      default:
        // 2 or more
        _state = STATE.TOUCH_ZOOM_PAN;
        var dx = event.touches[0].pageX - event.touches[1].pageX;
        var dy = event.touches[0].pageY - event.touches[1].pageY;
        _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt(dx * dx + dy * dy);
        var x = (event.touches[0].pageX + event.touches[1].pageX) / 2;
        var y = (event.touches[0].pageY + event.touches[1].pageY) / 2;

        _panStart.copy(getMouseOnScreen(x, y));

        _panEnd.copy(_panStart);

        break;
    }

    scope.dispatchEvent(startEvent);
  }

  function touchmove(event) {
    if (scope.enabled === false) return;
    event.preventDefault();
    event.stopPropagation();

    switch (event.touches.length) {
      case 1:
        _movePrev.copy(_moveCurr);

        _moveCurr.copy(getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY));

        break;

      default:
        // 2 or more
        var dx = event.touches[0].pageX - event.touches[1].pageX;
        var dy = event.touches[0].pageY - event.touches[1].pageY;
        _touchZoomDistanceEnd = Math.sqrt(dx * dx + dy * dy);
        var x = (event.touches[0].pageX + event.touches[1].pageX) / 2;
        var y = (event.touches[0].pageY + event.touches[1].pageY) / 2;

        _panEnd.copy(getMouseOnScreen(x, y));

        break;
    }
  }

  function touchend(event) {
    if (scope.enabled === false) return;

    switch (event.touches.length) {
      case 0:
        _state = STATE.NONE;
        break;

      case 1:
        _state = STATE.TOUCH_ROTATE;

        _moveCurr.copy(getMouseOnCircle(event.touches[0].pageX, event.touches[0].pageY));

        _movePrev.copy(_moveCurr);

        break;
    }

    scope.dispatchEvent(endEvent);
  }

  function contextmenu(event) {
    if (scope.enabled === false) return;
    event.preventDefault();
  }

  this.dispose = function () {
    scope.domElement.removeEventListener('contextmenu', contextmenu, false);
    scope.domElement.removeEventListener('mousedown', mousedown, false);
    scope.domElement.removeEventListener('wheel', mousewheel, false);
    scope.domElement.removeEventListener('touchstart', touchstart, false);
    scope.domElement.removeEventListener('touchend', touchend, false);
    scope.domElement.removeEventListener('touchmove', touchmove, false);
    scope.domElement.ownerDocument.removeEventListener('mousemove', mousemove, false);
    scope.domElement.ownerDocument.removeEventListener('mouseup', mouseup, false);
    window.removeEventListener('keydown', keydown, false);
    window.removeEventListener('keyup', keyup, false);
  };

  this.domElement.addEventListener('contextmenu', contextmenu, false);
  this.domElement.addEventListener('mousedown', mousedown, false);
  this.domElement.addEventListener('wheel', mousewheel, false);
  this.domElement.addEventListener('touchstart', touchstart, false);
  this.domElement.addEventListener('touchend', touchend, false);
  this.domElement.addEventListener('touchmove', touchmove, false);
  window.addEventListener('keydown', keydown, false);
  window.addEventListener('keyup', keyup, false);
  this.handleResize(); // force an update at start

  this.update();
};

THREE.TrackballControls.prototype = _Object$create(THREE.EventDispatcher.prototype);
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;