bytev-charts-beta/lib/component/impl/ThreeComponent.class.js

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

import _Reflect$construct from "@babel/runtime-corejs2/core-js/reflect/construct";
import "core-js/modules/es.object.to-string.js";
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _assertThisInitialized from "@babel/runtime-corejs2/helpers/assertThisInitialized";
import _get from "@babel/runtime-corejs2/helpers/get";
import _inherits from "@babel/runtime-corejs2/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime-corejs2/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs2/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import _JSON$stringify from "@babel/runtime-corejs2/core-js/json/stringify";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/web.timers.js";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }

import Component from "../Component.class.js";
/*three*/

import * as THREE from '../../plugin/three.js/build/three.module.js';
import { OrbitControls } from '../../plugin/three.js/examples/jsm/controls/OrbitControls.js';
import { TWEEN } from '../../plugin/three.js/examples/jsm/libs/tween.module.min.js'; // import { VRButton } from '../../plugin/three.js/VRButton.js';

/*ByteVModel3D*/

import ByteVModel3D from "../../model/impl/ByteVModel3D.class.js";
import modelCamera from "../../model/impl/ByteVModel3D/Camera.class.js";
import modelOrbitControls from "../../model/impl/ByteVModel3D/OrbitControls.class.js";
import ComponentFactory from "./threeComponent/ComponentFactory.class.js";
/*
* three组件
* */

var ThreeComponent = /*#__PURE__*/function (_Component) {
  _inherits(ThreeComponent, _Component);

  var _super = _createSuper(ThreeComponent);

  function ThreeComponent() {
    var _this;

    _classCallCheck(this, ThreeComponent);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "THREE", THREE);

    _defineProperty(_assertThisInitialized(_this), "name", 'ThreeComponent');

    _defineProperty(_assertThisInitialized(_this), "type", 'three');

    _defineProperty(_assertThisInitialized(_this), "animateEventObj", {});

    _defineProperty(_assertThisInitialized(_this), "cameraMaxAxis", 0);

    _defineProperty(_assertThisInitialized(_this), "addAnimateEvent", function (name, fun) {
      if (name && fun) {
        _this.animateEventObj[name] = fun;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "removeAnimateEvent", function (name) {
      if (name) {
        delete _this.animateEventObj[name];
      }
    });

    _defineProperty(_assertThisInitialized(_this), "moveAngle", function (obj, toAngle, msec, callBack) {
      if (!obj || !toAngle) {
        return false;
      } //controls.autoRotate = false;


      var from = {
        angle: obj.angle
      };
      toAngle = {
        angle: toAngle
      }; // 设置动画

      var tween = new TWEEN.Tween(from).to(toAngle, msec);
      tween.easing(TWEEN.Easing.Sinusoidal.InOut);
      tween.onUpdate(function () {
        obj.angle = this['_object'].angle;
      }); // 开启动画

      tween.start();

      if (callBack) {
        // 动画执行完毕后回调
        tween.onComplete(function () {
          callBack();
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "moveObj", function (obj, toPos, msec, callBack) {
      if (!obj) {
        return false;
      } //console.log('moveObj-toPos : ',toPos)


      controls.autoRotate = false;
      var from = obj.position; // 设置动画

      var tween = new TWEEN.Tween(from).to(toPos, msec);
      tween.easing(TWEEN.Easing.Sinusoidal.InOut);
      tween.onUpdate(function () {
        obj.position.set(this['_object'].x, this['_object'].y, this['_object'].z); //camera.lookAt(this['_object'].x,this['_object'].y,this['_object'].z)
      }); // 开启动画

      tween.start();

      if (callBack) {
        // 动画执行完毕后回调
        tween.onComplete(function () {
          callBack();
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "moveCamera", function (cam, toPos, msec, callBack) {
      if (!toPos) {
        return false;
      } //console.log('moveCamera-toPos : ',toPos)


      _this.controls.autoRotate = false;
      var from = cam.position; // 设置动画

      var tween = new TWEEN.Tween(from).to(toPos, msec);
      tween.easing(TWEEN.Easing.Sinusoidal.InOut);
      tween.onUpdate(function () {
        cam.position.set(this['_object'].x, this['_object'].y, this['_object'].z); // cam.lookAt(this.scene.position.x, this.scene.position.y, this.scene.position.z);
      }); // 开启动画

      tween.start();

      if (callBack) {
        // 动画执行完毕后回调
        tween.onComplete(function () {
          callBack();
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "restCamera", function () {
      var msec = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1500;
      var callBack = arguments.length > 1 ? arguments[1] : undefined;

      _this.moveCamera(_this.camera, _this.cameraOriginalPosition, msec, callBack);
    });

    _defineProperty(_assertThisInitialized(_this), "rotationObj", function (obj, axis, angle) {
      var _obj$rotation;

      var speed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.003;
      var callBack = arguments.length > 4 ? arguments[4] : undefined;
      var onUpdateFun = arguments.length > 5 ? arguments[5] : undefined;

      // console.log(angle);
      if (!obj || !obj.rotation || !axis || !angle) {
        callBack === null || callBack === void 0 ? void 0 : callBack();
        return false;
      }

      speed = Math.abs(speed);
      var current = (obj === null || obj === void 0 ? void 0 : (_obj$rotation = obj.rotation) === null || _obj$rotation === void 0 ? void 0 : _obj$rotation[axis]) || 0;

      if (current == angle) {
        callBack === null || callBack === void 0 ? void 0 : callBack();
        return;
      }

      if (current > angle) {
        speed = 0 - speed;
      }

      _this.addAnimateEvent('rotation' + axis + '_' + obj.uuid, function () {
        if (speed > 0 && obj.rotation[axis] >= angle || speed < 0 && obj.rotation[axis] <= angle) {
          _this.removeAnimateEvent('rotation' + axis + '_' + obj.uuid);

          callBack === null || callBack === void 0 ? void 0 : callBack();
          return;
        }

        obj.rotation[axis] += speed;
        onUpdateFun === null || onUpdateFun === void 0 ? void 0 : onUpdateFun(obj.rotation[axis]);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "deleteGroup", function (group) {
      var _group$traverse;

      if (!group) return; // 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存

      group === null || group === void 0 ? void 0 : (_group$traverse = group.traverse) === null || _group$traverse === void 0 ? void 0 : _group$traverse.call(group, function (obj) {
        if (obj.type === 'Mesh') {
          var _obj$geometry, _obj$geometry$dispose, _obj$material, _obj$material$dispose;

          obj === null || obj === void 0 ? void 0 : (_obj$geometry = obj.geometry) === null || _obj$geometry === void 0 ? void 0 : (_obj$geometry$dispose = _obj$geometry.dispose) === null || _obj$geometry$dispose === void 0 ? void 0 : _obj$geometry$dispose.call(_obj$geometry);
          obj === null || obj === void 0 ? void 0 : (_obj$material = obj.material) === null || _obj$material === void 0 ? void 0 : (_obj$material$dispose = _obj$material.dispose) === null || _obj$material$dispose === void 0 ? void 0 : _obj$material$dispose.call(_obj$material);
        }
      });

      for (var i = group.children.length - 1; i >= 0; i--) {
        if (group.children[i] instanceof THREE.Group || group.children[i] instanceof THREE.Object3D) {
          _this.scene.remove(group.children[i]);
        }
      } // 删除场景对象scene的子对象group


      _this.scene.remove(group);
    });

    _defineProperty(_assertThisInitialized(_this), "deleteGroupByName", function (name) {
      var _assertThisInitialize, _assertThisInitialize2, _assertThisInitialize3;

      if (!name) return false;

      _this.deleteGroup((_assertThisInitialize = _assertThisInitialized(_this)) === null || _assertThisInitialize === void 0 ? void 0 : (_assertThisInitialize2 = _assertThisInitialize.scene) === null || _assertThisInitialize2 === void 0 ? void 0 : (_assertThisInitialize3 = _assertThisInitialize2.getObjectByName) === null || _assertThisInitialize3 === void 0 ? void 0 : _assertThisInitialize3.call(_assertThisInitialize2, name));
    });

    return _this;
  }

  _createClass(ThreeComponent, [{
    key: "buildByteVModel",
    value:
    /*
    * 初始化byteVModel的属性
    * */
    function buildByteVModel() {
      _get(_getPrototypeOf(ThreeComponent.prototype), "buildByteVModel", this).call(this);

      this.color = this.theme.color;
      this.fontColor = this.theme.fontColor;
      this.backgroundColor = this.theme.backgroundColor;
      this.firstColorRgbaArr = this.theme.firstColorRgbaArr; //如果有camera属性,则代表已经赋值成为ByteVModel3D了(即已经初始化过了,此时切换皮肤触发)

      if (!this.camera && !this.scene && !this.renderer) {
        var camera = new modelCamera();
        camera.aspect = this.componentContainer.offsetWidth / this.componentContainer.offsetHeight;
        this.cameraMaxAxis = this.getCameraMaxAxis(camera);
        this.byteVModel = new ByteVModel3D(this.cameraMaxAxis);
        this.namePrefix = this.byteVModel.namePrefix;

        _Object$assign(this.byteVModel, {
          // color: this.theme.color,
          // fontColor: this.theme.fontColor,
          // backgroundColor: this.theme.backgroundColor,
          // firstColorRgbaArr: this.theme.firstColorRgbaArr,
          camera: camera // // controls: new modelOrbitControls(this.cameraMaxAxis),

        });
      }
    } // buildByteVModel() {
    //     super.buildByteVModel()
    //
    //     //如果有camera属性,则代表已经赋值成为ByteVModel3D了(即已经初始化过了,此时切换皮肤触发)
    //     if(!this.camera && !this.scene && !this.renderer){
    //         let camera = new modelCamera()
    //         camera.aspect = this.componentContainer.offsetWidth / this.componentContainer.offsetHeight
    //
    //         this.cameraMaxAxis = this.getCameraMaxAxis(camera)
    //
    //         this.byteVModel3D = new ByteVModel3D(this.cameraMaxAxis)
    //         this.namePrefix = this.byteVModel3D.namePrefix
    //
    //         this.byteVModel = {
    //             color: this.theme.color,
    //             fontColor: this.theme.fontColor,
    //             backgroundColor: this.theme.backgroundColor,
    //             firstColorRgbaArr: this.theme.firstColorRgbaArr,
    //             camera: camera,
    //         }
    //
    //     }
    // }

  }, {
    key: "init",
    value: function init(element, option) {
      var _this2 = this;

      _get(_getPrototypeOf(ThreeComponent.prototype), "init", this).call(this, element, option);

      this.initScene();
      this.setCamera(this.byteVModel.camera);
      this.cameraOriginalPosition = JSON.parse(_JSON$stringify(this.camera.position));
      this.setRenderer(); // this.setControls(this.byteVModel.controls)

      this.setSize(this.componentContainer.offsetWidth, this.componentContainer.offsetHeight);
      this.threeComponentFactory = new ComponentFactory(this);
      this.renderer.setAnimationLoop(function () {
        try {
          _this2.animate();
        } catch (e) {
          console.warn(e.message || e, e.stack || ""); // location.reload();
        }
      });
      this.bindMouseRight();
    } // setOption(option = this.byteVModel, notMerge) {

  }, {
    key: "setOption",
    value: function setOption() {
      var _this3 = this;

      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var notMerge = arguments.length > 1 ? arguments[1] : undefined;

      // Object.assign(option, this.byteVModel)
      _Object$assign(this.byteVModel, option);

      _get(_getPrototypeOf(ThreeComponent.prototype), "setOption", this).call(this, option, notMerge);

      try {
        this.restCamera(1000, function () {
          _this3.parseOption(option);
        });
      } catch (e) {
        this.parseOption(option);
      }
    }
    /*
    * 设置当前组件的皮肤, 当前组件换肤
    * threeComponent中,先回归相机初始视角再切换皮肤
    * param : themeId - 主题皮肤ID
    * */

  }, {
    key: "setTheme",
    value: function setTheme(themeId) {
      var _this4 = this;

      if (themeId == this.themeId) {
        console.warn('The target themeId is the same as the current themeId.');
        return;
      }

      this.restCamera(500, function () {
        _get(_getPrototypeOf(ThreeComponent.prototype), "setTheme", _this4).call(_this4, themeId);
      });
    } //解析three的option

  }, {
    key: "parseOption",
    value: function parseOption(option) {
      for (var k in option) {
        this.byteVModel[k] = option[k];

        if (k == 'camera') {
          continue;
        }

        if (k == 'OrbitControls' || k == 'orbitControls') {
          this.setControls(option[k]);
          continue;
        }

        if (this[k]) {
          this.deleteGroupByName(this.namePrefix + '-' + k);
          this.deleteGroupByName(this.namePrefix + '-' + k + '-Group');
        }

        if (option[k] && option[k].hasOwnProperty('show') && !option[k].show) {
          this.deleteGroupByName(this.namePrefix + '-' + k);
          this.deleteGroupByName(this.namePrefix + '-' + k + '-Group');
          continue;
        } // if(option[k].constructor == Object && Object.keys(option[k]).length){
        //     this.parseOption(option[k])
        // }else{
        //
        // }


        this[k] = this.threeComponentFactory.getComponent(k);

        if (this[k]) {
          var _this$k, _this$k$set;

          (_this$k = this[k]) === null || _this$k === void 0 ? void 0 : (_this$k$set = _this$k.set) === null || _this$k$set === void 0 ? void 0 : _this$k$set.call(_this$k, option[k]);
        } else {
          console.warn("the propetry '" + k + "' is not supported in ByteV3D");
        }
      }
    }
  }, {
    key: "initScene",
    value: function initScene() {
      // 创建场景
      this.scene = new THREE.Scene();
      return this.scene;
    }
  }, {
    key: "setCamera",
    value: function setCamera(option) {
      if (!this.camera) {
        // 创建相机 接收四个参数fov aspect near  far
        this.camera = new THREE.PerspectiveCamera(option.fov, option.aspect, option.near, option.far);
      } // 相机看的方向 为场景的方向也可以设置成其他方向


      this.camera.lookAt(this.scene.position);
      this.camera.position.set(option.position.x, option.position.y, option.position.z);
    }
  }, {
    key: "setRenderer",
    value: function setRenderer(option) {
      if (!this.renderer) {
        this.renderer = new THREE.WebGLRenderer({
          //使用logarithmicDepthBuffer缓冲以降低冲突的概率
          logarithmicDepthBuffer: true,
          //增加下面两个属性，可以抗锯齿
          antialias: true,
          //透明
          alpha: true
        });
      } // this.renderer.setClearColor(new THREE.Color(0x000000));  //将场景的背景颜色设置为黑色


      this.renderer.toneMapping = THREE.ReinhardToneMapping; //需要阴影效果

      this.renderer.shadowMap.enabled = true; //设置像素比例

      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.autoClear = false;
      this.renderer.outputEncoding = THREE.sRGBEncoding; // this.renderer.render(this.scene, this.camera )

      this.componentContainer.appendChild(this.renderer.domElement); // this.vrButton = VRButton.createButton(renderer);
    }
    /*
    * 设置轨道控制器
    * */

  }, {
    key: "setControls",
    value: function setControls() {
      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      this.cameraMaxAxis = this.getCameraMaxAxis(this.camera);
      option = _Object$assign(new modelOrbitControls(this.cameraMaxAxis), option);

      if (!this.controls) {
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      }

      var controls = this.controls;
      controls.target.set(this.scene.position.x, this.scene.position.y, this.scene.position.z);
      controls.update();
      controls.enableDamping = option.enableDamping;
      controls.enableZoom = option.enableZoom; //true;

      controls.autoRotate = option.autoRotate; //false;

      controls.autoRotateSpeed = option.autoRotateSpeed;
      controls.enablePan = option.enablePan; //false;

      controls.enableKeys = option.enableKeys; //false;

      controls.screenSpacePaning = option.screenSpacePaning;
      controls.maxPolarAngle = option.maxPolarAngle;
      controls.minDistance = option.minDistance;
      controls.maxDistance = option.maxDistance; //10;
    }
  }, {
    key: "setSize",
    value: function setSize(width, height) {
      this.width = width;
      this.height = height;

      if (this.camera) {
        this.camera.aspect = this.width / this.height;
        this.camera.updateProjectionMatrix();
      }

      if (this.renderer) {
        this.renderer.setSize(width, height);
      }
    }
  }, {
    key: "animate",
    value: function animate() {
      var _this$controls, _this$controls$update;

      this.renderer.render(this.scene, this.camera); //开启TWEEN的更新

      TWEEN.update(); //相机控制器的更新

      this === null || this === void 0 ? void 0 : (_this$controls = this.controls) === null || _this$controls === void 0 ? void 0 : (_this$controls$update = _this$controls.update) === null || _this$controls$update === void 0 ? void 0 : _this$controls$update.call(_this$controls);

      for (var k in this.animateEventObj) {
        try {
          var _this$animateEventObj, _this$animateEventObj2;

          this === null || this === void 0 ? void 0 : (_this$animateEventObj = this.animateEventObj) === null || _this$animateEventObj === void 0 ? void 0 : (_this$animateEventObj2 = _this$animateEventObj[k]) === null || _this$animateEventObj2 === void 0 ? void 0 : _this$animateEventObj2.call(_this$animateEventObj);
        } catch (e) {
          var _this$removeAnimateEv;

          this === null || this === void 0 ? void 0 : (_this$removeAnimateEv = this.removeAnimateEvent) === null || _this$removeAnimateEv === void 0 ? void 0 : _this$removeAnimateEv.call(this, k);
        }
      }
    }
    /*
    * 为animateEventObj中添加动画事件的函数, 如果setAnimateObj有值, 则更读取其每个下标里面的方法
    * @param {String} name 动画事件名称(key,不可为空且唯一)
    * @param {String} fun 动画事件方法(执行中的内容)
    * */

  }, {
    key: "getCameraMaxAxis",
    value:
    /*
    * 获取当前相机位置x、y、z中绝对值的最大
    * */
    function getCameraMaxAxis() {
      var _camera$position, _camera$position2, _camera$position3;

      var camera = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.camera;
      var x = (camera === null || camera === void 0 ? void 0 : (_camera$position = camera.position) === null || _camera$position === void 0 ? void 0 : _camera$position.x) || 0;
      var y = (camera === null || camera === void 0 ? void 0 : (_camera$position2 = camera.position) === null || _camera$position2 === void 0 ? void 0 : _camera$position2.y) || 0;
      var z = (camera === null || camera === void 0 ? void 0 : (_camera$position3 = camera.position) === null || _camera$position3 === void 0 ? void 0 : _camera$position3.z) || 0;
      var max = Math.max.apply(Math, [Math.abs(x), Math.abs(y), Math.abs(z)]);
      this.cameraMaxAxis = max;
      return max;
    }
    /*
    * 删除group并释放内存
    * @param {Object} group组对象
    * */

  }, {
    key: "bindMouseRight",
    value:
    /*
    * 绑定鼠标右键, 镜头回归
    * */
    function bindMouseRight() {
      var _this5 = this;

      // document.querySelector('.componentContainer').unbind("mousedown").bind("contextmenu", function (e) {
      // // this.componentContainer.unbind("mousedown").bind("contextmenu", function (e) {
      //     e.preventDefault();
      //     return false;
      // });
      // document.querySelector('.componentContainer').unbind("mousedown").bind("mousedown", (event)=> {
      //     if (event.which == 3) {
      //         console.log(99999)
      //         // clearTimeout(this.clickTimer);
      //         // this.clickTimer = setTimeout(()=>{
      //         //     //更新弹框-清空
      //         //     window?.VUE?.updatePopup?.();
      //         //     //if(currentCountyObj)
      //         //     $('.homeBut').click();
      //         // },350);
      //     }else if(event.which == 1){}
      // });
      this.componentContainer.onmousedown = function (event) {
        // console.log(event.button)
        if (event.button == 1) {
          clearTimeout(_this5.clickTimer);
          _this5.clickTimer = setTimeout(function () {
            _this5.restCamera(1500);
          }, 300);
        }
      };
    }
  }]);

  return ThreeComponent;
}(Component);

export { ThreeComponent as default };