bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
298 lines (258 loc) • 10.6 kB
JavaScript
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 "core-js/modules/web.timers.js";
import "core-js/modules/es.function.name.js";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
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 * as THREE from '../../plugin/three.js/build/three.module.js';
import { ByteVThree } from '../../plugin/three.js/ByteVThree.js';
import Component from '../Component.class.js';
import ByteVModel3D from "../../model/impl/ByteVModel3D.class.js";
import Camera from "../../model/impl/ByteVModel3D/Camera.class.js";
import OrbitControls from "../../model/impl/ByteVModel3D/OrbitControls.class.js"; // import Stats from "../../plugin/three.js/examples/jsm/libs/stats.module.js";
var ThreeComponent = /*#__PURE__*/function (_Component) {
_inherits(ThreeComponent, _Component);
var _super = _createSuper(ThreeComponent);
function ThreeComponent(element, option) {
var _this;
_classCallCheck(this, ThreeComponent);
_this = _super.call(this, element, option);
_defineProperty(_assertThisInitialized(_this), "THREE", THREE);
_defineProperty(_assertThisInitialized(_this), "name", 'ThreeComponent');
_defineProperty(_assertThisInitialized(_this), "type", 'three');
_defineProperty(_assertThisInitialized(_this), "player", null);
_defineProperty(_assertThisInitialized(_this), "render", null);
_defineProperty(_assertThisInitialized(_this), "scene", null);
_defineProperty(_assertThisInitialized(_this), "camera", null);
_defineProperty(_assertThisInitialized(_this), "controls", null);
_defineProperty(_assertThisInitialized(_this), "sceneJson", {
"metadata": {
"type": "App"
},
"project": {
"shadows": true,
"shadowType": 1,
"vr": false,
"physicallyCorrectLights": false,
"toneMapping": 0,
"toneMappingExposure": 1
},
"camera": {
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"object": {
"uuid": "255BA8A9-9442-404A-BBE0-EC9D650B7C65",
"type": "PerspectiveCamera",
"name": "Camera",
"layers": 1,
"matrix": [1, 0, 0, 0, 0, 0.894427, -0.447214, 0, 0, 0.447214, 0.894427, 0, 0, 30, 30, 1],
"fov": 50,
"zoom": 1,
"near": 0.01,
"far": 1000 * 100,
"focus": 10,
"aspect": 1.633065,
"filmGauge": 35,
"filmOffset": 0
}
},
"scene": {
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"object": {
"uuid": "419E3730-D438-4764-B2BE-1D4D9E0778E6",
"type": "Scene",
"name": "Scene",
"layers": 1,
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
"children": [{
"uuid": "52953B84-6318-4FFD-978F-A6B52697EADB",
"type": "AmbientLight",
"name": "theAmbientLight",
"layers": 1,
"matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
"color": 9868950,
"intensity": 0.1 // 0.35
}]
}
},
"scripts": {}
});
return _this;
}
/*
* 设置初始化byteVModel的属性
* */
_createClass(ThreeComponent, [{
key: "buildByteVModel",
value: function buildByteVModel() {
_get(_getPrototypeOf(ThreeComponent.prototype), "buildByteVModel", this).call(this);
var camera = new Camera();
this.byteVModel = new ByteVModel3D(camera);
_Object$assign(this.byteVModel, {
color: this.theme.color,
fontColor: this.theme.fontColor,
backgroundColor: this.theme.backgroundColor,
firstColorRgbaArr: this.theme.firstColorRgbaArr,
camera: camera,
controls: new OrbitControls()
});
}
}, {
key: "init",
value: function init(element, option) {
_get(_getPrototypeOf(ThreeComponent.prototype), "init", this).call(this, element, option); // this.componentInstance = echarts.init(this.componentContainer);
this.initPlayer();
/*
// 创建场景
this.scene = new THREE.Scene();
// 创建相机 接收四个参数fov aspect near far
this.camera = new THREE.PerspectiveCamera(
this.byteVModel.fov,
window.innerWidth / window.innerHeight,
this.byteVModel.near,
this.byteVModel.far
);
// 创建渲染器
this.renderer = new THREE.WebGLRenderer({
//使用logarithmicDepthBuffer缓冲以降低冲突的概率
logarithmicDepthBuffer: true,
//增加下面两个属性，可以抗锯齿
antialias: true,
//透明
alpha: true,
});
//需要阴影效果
this.renderer.shadowMap.enabled = true;
//设置像素比例
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.componentContainer.appendChild(this.renderer.domElement); // 要渲染的div
this.renderer.render(this.scene, this.camera )
*/
}
}, {
key: "initPlayer",
value: function initPlayer() {
var _this2 = this;
if (!this.sceneJson || !this.sceneJson.project) {
setTimeout(function () {
_this2.initPlayer(); // if(this.type == this.name){
// this.player.setGridHelper()
// this.player.setAxesHelper()
// }
}, 1);
return;
}
this.player = new ByteVThree.Player({
element: this.componentContainer,
lookAt: {
x: 0,
y: 0,
z: 0
}
});
this.player.load(this.sceneJson);
this.player.color = this.byteVModel.color;
this.player.firstColorRgbaArr = this.byteVModel.firstColorRgbaArr;
this.player.setSize(this.componentContainer.offsetWidth, this.componentContainer.offsetHeight);
this.player.play();
window.ByteVThree = ByteVThree;
window.player = this.player;
window.player.camera = this.camera = this.player.getCamera();
window.player.scene = this.scene = this.player.getScene();
this.initControls();
window.addEventListener('resize', function () {
_this2.player.setSize(_this2.componentContainer.offsetWidth, _this2.componentContainer.offsetHeight);
});
}
}, {
key: "initControls",
value: function initControls() {
this.byteVModel.orbitControls.maxDistance = this.player.getCameraMaxAxis() * 2; //调用鼠标相机控制器
this.player.setControls(this.byteVModel.orbitControls);
this.controls = this.player.controls;
}
/*
* 删除组
* @param {Object} group 需要删除的group组对象
* */
}, {
key: "deleteGroup",
value: function deleteGroup(group) {
this.player.deleteGroup(group);
}
/*
* 模型加载器<br>
* 目前支持的格式有：.fbx、.json;
* */
}, {
key: "loadModel",
value: function loadModel(path, opt, callBack) {
if (!path) {
console.warn('The path cannot be empty. ', this.name, ' - loadModel(path, opt, callBack)');
return;
}
var suffix = this.Util.getSuffix(path);
var str = suffix.toUpperCase();
var fun = this.player['load' + str];
if (!fun) {
console.warn("Sorry! ." + str + " files are not supported. Currently the supported formats have '.fbx' and '.json', You can write this type of code manually.", this.name, " - loadModel(path, opt, callBack)");
return;
}
try {
fun(path, opt, callBack);
} catch (e) {
console.log(e);
console.log('loadModel(', path, opt, callBack, ')');
}
}
/*
* 过渡动画
* @param {Object} object scene中需要处理的对象
* @param {String} property 需要处理的属性
* @param {Boolean} ceil 是否向上取整
* @param {Boolean} float 是否包含原小数位
* */
}, {
key: "BTVTween",
value: function BTVTween(object, property) {}
}, {
key: "setTheme",
value: function setTheme(themeId) {
_get(_getPrototypeOf(ThreeComponent.prototype), "setTheme", this).call(this, themeId);
this.player.color = this.byteVModel.color;
this.player.firstColorRgbaArr = this.byteVModel.firstColorRgbaArr;
}
}, {
key: "setOption",
value: function setOption() {
var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.byteVModel;
var notMerge = arguments.length > 1 ? arguments[1] : undefined;
_get(_getPrototypeOf(ThreeComponent.prototype), "setOption", this).call(this, option, notMerge);
this.player.clearGridHelper();
}
}, {
key: "setData",
value: function setData(data) {
_get(_getPrototypeOf(ThreeComponent.prototype), "setData", this).call(this, data);
}
}]);
return ThreeComponent;
}(Component);
export { ThreeComponent as default };