bytev-charts/lib/component/impl/threeComponent/Component.class.js

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

import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import "core-js/modules/es.function.name.js";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import Util from '../../../util/Util.class.js';
import * as THREE from '../../../plugin/three.js/build/three.module.js';
/*
* three子组件对象类<br>
* three场景中的各个子对象(如:太阳、地面、升空、扩散等)的父类
* */

var Component = /*#__PURE__*/function () {
  //名称name的前缀
  //纹理加载器
  //json加载器
  //相机位置的最大轴数值,用来辅助自动计算其余组件的位置大小等属性
  //配置项

  /*
  * 构造器
  * @param {Object} option 包含场景、相机、渲染器、轨道控制器
  * */
  function Component() {
    var threeComponentThis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    _classCallCheck(this, Component);

    _defineProperty(this, "Util", Util);

    _defineProperty(this, "name", "");

    _defineProperty(this, "namePrefix", "");

    _defineProperty(this, "textureLoader", new THREE.TextureLoader());

    _defineProperty(this, "loader", new THREE.ObjectLoader());

    _defineProperty(this, "cameraMaxAxis", 0);

    _defineProperty(this, "option", {});

    _defineProperty(this, "group", null);

    // console.log('component => ',threeComponentThis)
    //把传进来的所有this的所有属同步赋值给this
    _Object$assign(this, threeComponentThis);

    this.getCameraMaxAxis();
  }
  /*
  * set的父类方法，
  * 自动先调用clear，同步option储存到this，新建group，并添加到场景中
  * return group
  * */


  _createClass(Component, [{
    key: "set",
    value: function set() {
      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      // console.log('Component.set => option: ',option)
      this.clear();
      this.option = option;
      this.group = new THREE.Object3D();
      this.group.name = this.name;
      this.group.position.set(0, 0, 0);
      this.scene.add(this.group);
      return this.group;
    }
  }, {
    key: "clear",
    value: function clear() {
      this.removeAnimateEvent(this.name);
      this.deleteGroupByName(this.name);
    }
    /*
    * 获取拼接了前缀的名字
    * @param {String} name 名称字符串
    * return 拼接后的名字:指定前缀-名字
    * */

  }, {
    key: "buildNameByPrefix",
    value: function buildNameByPrefix(name) {
      return this.namePrefix + "-" + name;
    }
    /*
    * 获取当前相机位置x、y、z中绝对值的最大
    * */

  }, {
    key: "getCameraMaxAxis",
    value: 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的position和scale
    *
    * @param {Object} group 需要设置的group组
    *
    * 因为模型是不规则的，为了更好的计算模型的大小，我们引入了Box3。
    * 使用THREE.Box3().setFromObject(group)计算gruop的包围盒的大小，并放group在原点位置。
    * 然后根据公式计算得到3d模型对应的画布上group的大小(2D宽度和高度)。
    * */

  }, {
    key: "setGroupPositionByCamera",
    value: function setGroupPositionByCamera(group) {
      var bbox = new THREE.Box3().setFromObject(group);
      var mdlen = bbox.max.x - bbox.min.x; //边界的最小坐标值 边界的最大坐标值

      var mdhei = bbox.max.y - bbox.min.y;
      var mdwid = bbox.max.z - bbox.min.z; // 计算相机到物体正面的距离。

      var dist = Math.abs(this.camera.position.z - group.position.z - mdwid / 2); // 将垂直fov转换为弧度 。

      var vFov = this.camera.fov * Math.PI / 180; // 可见高度。

      var vheight = 2 * Math.tan(vFov * 0.5) * dist; // 可见高度的分数。

      var fraction = mdhei / vheight; // 立方体的高度(以像素为单位)是画布的高度(以像素为单位)的fraction倍。

      var finalHeight = this.element.offsetHeight * fraction; // 包围盒计算的高/finalHeight = 包围盒计算的宽/finalWidth 。

      var finalWidth = finalHeight * mdlen / mdhei; //通过该2D宽度和高度分别与设置的渲染区域的宽和高相比得到两个不同的缩放比例value1和value1。选取两者较小的值，设置为group的缩放比例。

      var value1 = this.element.offsetWidth / finalWidth; // console.log('value1缩放比例值为:' + value1);

      var value2 = this.element.offsetHeight / finalHeight; // console.log('value2缩放比例值为:' + value2);

      if (value1 >= value2) {
        group.scale.set(value2, value2, value2);
      } else {
        group.scale.set(value1, value1, value1);
      } //再一次使用使用THREE.Box3().setFromObject(group)计算gruop的包围盒的大小（这个是缩放后的group），
      // 并重新设置position属性。注意：在z轴上设置group位置时不要忘记减去包围盒深度的1/2。


      var bbox2 = new THREE.Box3().setFromObject(group);
      var mdlen2 = bbox2.max.x - bbox2.min.x;
      var mdhei2 = bbox2.max.y - bbox2.min.y;
      var mdwid2 = bbox2.max.z - bbox2.min.z;
      group.position.set(-(bbox2.max.x + bbox2.min.x) / 2, -(bbox2.max.y + bbox2.min.y) / 2, -(bbox2.max.z + bbox2.min.z) / 2 - (bbox2.max.z - bbox2.min.z) / 2); //最后将group添加到scene中。
      // 同时引入了AxisHelper来帮助显示坐标轴，以及OrbitControls轨道控制器来控制模型的平移、旋转和缩放效果。
      // let axes = new THREE.AxisHelper(100);
      // this.scene.add(axes);
      // let controls = new OrbitControls(this.camera, this.renderer.domElement);
    } //阴影投射 开启

  }, {
    key: "openCastShadow",
    value: function openCastShadow() {
      var group = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.scene;
      group.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.castShadow = true;
        }
      });
    } //阴影接收 开启

  }, {
    key: "openReceiveShadow",
    value: function openReceiveShadow() {
      var group = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.scene;
      group.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.receiveShadow = true;
        }
      });
    } //阴影投射 关闭

  }, {
    key: "offCastShadow",
    value: function offCastShadow() {
      var group = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.scene;
      group.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.castShadow = false;
        }
      });
    } //阴影接收 关闭

  }, {
    key: "offReceiveShadow",
    value: function offReceiveShadow() {
      var group = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.scene;
      group.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.receiveShadow = false;
        }
      });
    }
  }]);

  return Component;
}();

export { Component as default };