bytev-charts/lib/plugin/three.js/examples/js/controls/DragControls.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.string.sub.js";
console.warn("THREE.DragControls: 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.DragControls = function (_objects, _camera, _domElement) {
  var _plane = new THREE.Plane();

  var _raycaster = new THREE.Raycaster();

  var _mouse = new THREE.Vector2();

  var _offset = new THREE.Vector3();

  var _intersection = new THREE.Vector3();

  var _worldPosition = new THREE.Vector3();

  var _inverseMatrix = new THREE.Matrix4();

  var _intersections = [];
  var _selected = null,
      _hovered = null; //

  var scope = this;

  function activate() {
    _domElement.addEventListener('mousemove', onDocumentMouseMove, false);

    _domElement.addEventListener('mousedown', onDocumentMouseDown, false);

    _domElement.addEventListener('mouseup', onDocumentMouseCancel, false);

    _domElement.addEventListener('mouseleave', onDocumentMouseCancel, false);

    _domElement.addEventListener('touchmove', onDocumentTouchMove, false);

    _domElement.addEventListener('touchstart', onDocumentTouchStart, false);

    _domElement.addEventListener('touchend', onDocumentTouchEnd, false);
  }

  function deactivate() {
    _domElement.removeEventListener('mousemove', onDocumentMouseMove, false);

    _domElement.removeEventListener('mousedown', onDocumentMouseDown, false);

    _domElement.removeEventListener('mouseup', onDocumentMouseCancel, false);

    _domElement.removeEventListener('mouseleave', onDocumentMouseCancel, false);

    _domElement.removeEventListener('touchmove', onDocumentTouchMove, false);

    _domElement.removeEventListener('touchstart', onDocumentTouchStart, false);

    _domElement.removeEventListener('touchend', onDocumentTouchEnd, false);

    _domElement.style.cursor = '';
  }

  function dispose() {
    deactivate();
  }

  function getObjects() {
    return _objects;
  }

  function onDocumentMouseMove(event) {
    event.preventDefault();

    var rect = _domElement.getBoundingClientRect();

    _mouse.x = (event.clientX - rect.left) / rect.width * 2 - 1;
    _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    _raycaster.setFromCamera(_mouse, _camera);

    if (_selected && scope.enabled) {
      if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
        _selected.position.copy(_intersection.sub(_offset).applyMatrix4(_inverseMatrix));
      }

      scope.dispatchEvent({
        type: 'drag',
        object: _selected
      });
      return;
    }

    _intersections.length = 0;

    _raycaster.setFromCamera(_mouse, _camera);

    _raycaster.intersectObjects(_objects, true, _intersections);

    if (_intersections.length > 0) {
      var object = _intersections[0].object;

      _plane.setFromNormalAndCoplanarPoint(_camera.getWorldDirection(_plane.normal), _worldPosition.setFromMatrixPosition(object.matrixWorld));

      if (_hovered !== object) {
        scope.dispatchEvent({
          type: 'hoveron',
          object: object
        });
        _domElement.style.cursor = 'pointer';
        _hovered = object;
      }
    } else {
      if (_hovered !== null) {
        scope.dispatchEvent({
          type: 'hoveroff',
          object: _hovered
        });
        _domElement.style.cursor = 'auto';
        _hovered = null;
      }
    }
  }

  function onDocumentMouseDown(event) {
    event.preventDefault();
    _intersections.length = 0;

    _raycaster.setFromCamera(_mouse, _camera);

    _raycaster.intersectObjects(_objects, true, _intersections);

    if (_intersections.length > 0) {
      _selected = scope.transformGroup === true ? _objects[0] : _intersections[0].object;

      if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
        _inverseMatrix.getInverse(_selected.parent.matrixWorld);

        _offset.copy(_intersection).sub(_worldPosition.setFromMatrixPosition(_selected.matrixWorld));
      }

      _domElement.style.cursor = 'move';
      scope.dispatchEvent({
        type: 'dragstart',
        object: _selected
      });
    }
  }

  function onDocumentMouseCancel(event) {
    event.preventDefault();

    if (_selected) {
      scope.dispatchEvent({
        type: 'dragend',
        object: _selected
      });
      _selected = null;
    }

    _domElement.style.cursor = _hovered ? 'pointer' : 'auto';
  }

  function onDocumentTouchMove(event) {
    event.preventDefault();
    event = event.changedTouches[0];

    var rect = _domElement.getBoundingClientRect();

    _mouse.x = (event.clientX - rect.left) / rect.width * 2 - 1;
    _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    _raycaster.setFromCamera(_mouse, _camera);

    if (_selected && scope.enabled) {
      if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
        _selected.position.copy(_intersection.sub(_offset).applyMatrix4(_inverseMatrix));
      }

      scope.dispatchEvent({
        type: 'drag',
        object: _selected
      });
      return;
    }
  }

  function onDocumentTouchStart(event) {
    event.preventDefault();
    event = event.changedTouches[0];

    var rect = _domElement.getBoundingClientRect();

    _mouse.x = (event.clientX - rect.left) / rect.width * 2 - 1;
    _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
    _intersections.length = 0;

    _raycaster.setFromCamera(_mouse, _camera);

    _raycaster.intersectObjects(_objects, true, _intersections);

    if (_intersections.length > 0) {
      _selected = scope.transformGroup === true ? _objects[0] : _intersections[0].object;

      _plane.setFromNormalAndCoplanarPoint(_camera.getWorldDirection(_plane.normal), _worldPosition.setFromMatrixPosition(_selected.matrixWorld));

      if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
        _inverseMatrix.getInverse(_selected.parent.matrixWorld);

        _offset.copy(_intersection).sub(_worldPosition.setFromMatrixPosition(_selected.matrixWorld));
      }

      _domElement.style.cursor = 'move';
      scope.dispatchEvent({
        type: 'dragstart',
        object: _selected
      });
    }
  }

  function onDocumentTouchEnd(event) {
    event.preventDefault();

    if (_selected) {
      scope.dispatchEvent({
        type: 'dragend',
        object: _selected
      });
      _selected = null;
    }

    _domElement.style.cursor = 'auto';
  }

  activate(); // API

  this.enabled = true;
  this.transformGroup = false;
  this.activate = activate;
  this.deactivate = deactivate;
  this.dispose = dispose;
  this.getObjects = getObjects;
};

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