@realsee/vreo 2.5.0 → 2.6.0

package/lib/Player/modules/keyframes/PanoTextLabel/index.js

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PanoTextLabel = PanoTextLabel;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _three = _interopRequireWildcard(require("three"));
-var THREE = _three;
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _hooks = require("../../../hooks");
-var _CSS3DRenderPlugin = require("../../../../fivePlugins/CSS3DRenderPlugin");
-var _VreoUnit = require("../../../../typings/VreoUnit");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import * as THREE from 'three';
+import ReactDOM from 'react-dom';
+import { Vector3, Quaternion } from 'three';
+import { useController, useFiveInstance } from "../../../hooks.js";
+import { CSS3DRenderPlugin } from "../../../../fivePlugins/CSS3DRenderPlugin/index.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
 /**
  * 通过传入中心点确定矩形框架容器的四个点：
  *  1. 已知矩形长宽和中心点
@@ -48,7 +39,7 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
   plane.position.copy(v0);
 
   // 计算传入的四个点的坐标
-  var _plane$geometry$verti = (0, _slicedToArray2["default"])(plane.geometry.vertices, 4),
+  var _plane$geometry$verti = _slicedToArray(plane.geometry.vertices, 4),
     v1 = _plane$geometry$verti[0],
     v2 = _plane$geometry$verti[1],
     v3 = _plane$geometry$verti[2],
@@ -65,10 +56,10 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
 /**
  * 空间文本标签。
  */
-function PanoTextLabel() {
+export function PanoTextLabel() {
   var timeoutRef = React.useRef();
-  var controller = (0, _hooks.useController)();
-  var five = (0, _hooks.useFiveInstance)();
+  var controller = useController();
+  var five = useFiveInstance();
   var ref = React.useRef();
   React.useEffect(function () {
     var _controller$configs;
@@ -87,21 +78,21 @@ function PanoTextLabel() {
         x = _panoTextLabelData$ve.x,
         y = _panoTextLabelData$ve.y,
         z = _panoTextLabelData$ve.z;
-      var centerPoint = new _three.Vector3(x, y, z);
-      var normal = new _three.Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z);
+      var centerPoint = new Vector3(x, y, z);
+      var normal = new Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z);
       // 生成传入的四个点，将文本框最大宽度定在200px，最高高度在30px
       var wrapperLength = 200;
       var wrapperWidth = 30;
       var points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth);
-      if (!ref.current) ref.current = (0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(five);
+      if (!ref.current) ref.current = CSS3DRenderPlugin(five);
       var container = ref.current.create3DDomContainer(points);
       var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject;
       // 将获取的mesh进行旋转操作，根据欧拉角去进行mesh的变换
       if (data.quaternion) {
-        var quaternion = new _three.Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w);
+        var quaternion = new Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w);
         css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.quaternion.copy(quaternion);
       }
-      if (container !== null && container !== void 0 && container.container) _reactDom["default"].render(/*#__PURE__*/React.createElement("div", {
+      if (container !== null && container !== void 0 && container.container) ReactDOM.render(/*#__PURE__*/React.createElement("div", {
         className: "PanoTextLabel PanoTextLabel--notHidden"
       }, /*#__PURE__*/React.createElement("div", {
         className: "PanoTextLabel-wrapper"
@@ -116,9 +107,9 @@ function PanoTextLabel() {
         (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disposeAll();
       }, end - start);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
+    controller.on(VreoKeyframeEnum.PanoTextLabel, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
+      controller.off(VreoKeyframeEnum.PanoTextLabel, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

package/lib/Player/modules/keyframes/Prompter/index.js

@@ -1,29 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Prompter = Prompter;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _hooks = require("../../../hooks");
-var _VreoUnit = require("../../../../typings/VreoUnit");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function Prompter() {
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import classNames from 'classnames';
+import { useController } from "../../../hooks.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+export function Prompter() {
   var _React$useState = React.useState(''),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
     text = _React$useState2[0],
     setText = _React$useState2[1];
   var _React$useState3 = React.useState(true),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
     hidden = _React$useState4[0],
     setHidden = _React$useState4[1];
   var ref = React.useRef(null);
-  var controller = (0, _hooks.useController)();
+  var controller = useController();
   React.useEffect(function () {
     var _controller$configs;
     if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.Prompter) === false) {
@@ -48,13 +39,13 @@ function Prompter() {
         ref.current = null;
       }, end - start);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
+    controller.on(VreoKeyframeEnum.Prompter, callback);
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
+      controller.off(VreoKeyframeEnum.Prompter, callback);
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-prompter', (0, _defineProperty2["default"])({
+    className: classNames('vreo-prompter', _defineProperty({
       'vreo-prompter--hidden': hidden
     }, "vreo-prompter-left--".concat(controller.agentType), true))
   }, /*#__PURE__*/React.createElement("div", {

package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js

@@ -1,18 +1,10 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UpdateVRPanorama = UpdateVRPanorama;
-var React = _interopRequireWildcard(require("react"));
-var _five = require("@realsee/five");
-var _hooks = require("../../../hooks");
-var _VreoUnit = require("../../../../typings/VreoUnit");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
-function UpdateVRPanorama() {
-  var controller = (0, _hooks.useController)();
-  var five = (0, _hooks.useFiveInstance)();
+import * as React from 'react';
+import { parseWork } from '@realsee/five';
+import { useController, useFiveInstance } from "../../../hooks.js";
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+export function UpdateVRPanorama() {
+  var controller = useController();
+  var five = useFiveInstance();
   var deafultWorkRef = React.useRef(null);
   var updateWorkRef = React.useRef(null);
 
@@ -21,7 +13,7 @@ function UpdateVRPanorama() {
     // 先清理掉 之前的 VR 数据备份
     updateWorkRef.current = null;
     if (deafultWorkRef.current) {
-      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      var work = parseWork(deafultWorkRef.current);
       five.load(work);
     }
   }, []);
@@ -29,7 +21,7 @@ function UpdateVRPanorama() {
   // 暂停时： 恢复默认 VR 
   var pausedCallback = React.useCallback(function () {
     if (deafultWorkRef.current) {
-      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      var work = parseWork(deafultWorkRef.current);
       Object.assign(window, {
         $rawWork: work
       });
@@ -54,7 +46,7 @@ function UpdateVRPanorama() {
 
       // 如果数据中有新 work 数据，则直接载入
       if (data.work) {
-        updateWorkRef.current = (0, _five.parseWork)(data.work);
+        updateWorkRef.current = parseWork(data.work);
         five.load(updateWorkRef.current);
         return;
       }
@@ -76,15 +68,15 @@ function UpdateVRPanorama() {
       Object.assign(window, {
         $work1: JSON.parse(lastRawWork),
         $work2: data,
-        parseWork: _five.parseWork
+        parseWork: parseWork
       });
-      updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      updateWorkRef.current = parseWork([lastRawWork, data]);
       five.load(updateWorkRef.current);
     };
-    controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
+    controller.on(VreoKeyframeEnum.UpdateVRPanorama, callback);
 
     // 离开 将之前的内容清空
-    controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
+    controller.on(VreoKeyframeEnum.Exit, restoreCallback);
 
     // 新载入数据 将之前的内容清空
     controller.on('loaded', restoreCallback);
@@ -95,8 +87,8 @@ function UpdateVRPanorama() {
     controller.on('playing', playingCallback);
     return function () {
       // 清理事件监听
-      controller.off(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
-      controller.off(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback);
+      controller.off(VreoKeyframeEnum.UpdateVRPanorama, callback);
+      controller.off(VreoKeyframeEnum.Exit, restoreCallback);
       controller.off('loaded', restoreCallback);
       controller.off('paused', pausedCallback);
       controller.off('playing', playingCallback);

package/lib/Player/modules/keyframes/VideoEffect/index.js

@@ -1,21 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoEffect = VideoEffect;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var React = _interopRequireWildcard(require("react"));
-var _VreoUnit = require("../../../../typings/VreoUnit");
-var _hooks = require("../../../hooks");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import classNames from 'classnames';
+import * as React from 'react';
 // import { Preloader } from '../../../../shared-utils/Preloader'
-
+import { VreoKeyframeEnum } from "../../../../typings/VreoUnit.js";
+import { useController, useFiveInstance } from "../../../hooks.js";
 var inlinePlay = function inlinePlay(videoInstance) {
   if (!videoInstance) return;
   var canplaythrough = function canplaythrough() {
@@ -31,25 +21,25 @@ var inlinePlay = function inlinePlay(videoInstance) {
 // const emptyVideo = '//vr-static.realsee-cdn.cn/release/web/leisure.69fd3522.mov'
 var PI = Math.PI;
 var PI_2 = PI * 2;
-function VideoEffect() {
+export function VideoEffect() {
   var ref = React.useRef(null);
   var videoRef = React.useRef();
-  var controller = (0, _hooks.useController)();
+  var controller = useController();
   var timeoutRef = React.useRef();
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
     visible = _React$useState2[0],
     setVisible = _React$useState2[1];
-  var five = (0, _hooks.useFiveInstance)();
+  var five = useFiveInstance();
   var setBlobSrc = function setBlobSrc(blob) {
     if (!videoRef.current) return;
     videoRef.current.src = blob;
   };
   React.useEffect(function () {
     var callback = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(keyframe) {
         var start, end, _ref2, videoSrc, fov, direction, panoIndex, vector, _ref3, _ref4, longitude, latitude;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -66,7 +56,7 @@ function VideoEffect() {
                   longitude = (longitude % PI_2 + PI_2) % PI_2;
                   var latitude = -Math.asin(direction.y / 1);
                   return [longitude, latitude];
-                }(), _ref4 = (0, _slicedToArray2["default"])(_ref3, 2), longitude = _ref4[0], latitude = _ref4[1];
+                }(), _ref4 = _slicedToArray(_ref3, 2), longitude = _ref4[0], latitude = _ref4[1];
                 five.setState({
                   fov: fov,
                   panoIndex: panoIndex,
@@ -93,7 +83,7 @@ function VideoEffect() {
         return _ref.apply(this, arguments);
       };
     }();
-    controller.on(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
+    controller.on(VreoKeyframeEnum.VideoEffect, callback);
     var destroy = function destroy() {
       var _videoRef$current2;
       if (timeoutRef.current) {
@@ -110,7 +100,7 @@ function VideoEffect() {
       return destroy();
     });
     return function () {
-      controller.off(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
+      controller.off(VreoKeyframeEnum.VideoEffect, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
@@ -141,7 +131,7 @@ function VideoEffect() {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: (0, _classnames["default"])('VideoEffect', {
+    className: classNames('VideoEffect', {
       'VideoEffect--visible': visible
     })
   });

package/lib/Player/typings.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = centerPoint;
-var _three = require("three");
-function centerPoint(point1, point2) {
-  return new _three.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+import { Vector3 } from 'three';
+export default function centerPoint(point1, point2) {
+  return new Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
 }

package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = createResizeObserver;
 /**
  * @description: 简陋的 ResizeObserver polyfill
  */
-function createResizeObserver(func, element) {
+export default function createResizeObserver(func, element) {
   if (!element || typeof ResizeObserver === 'undefined') {
     return {
       observe: function observe() {

package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = evenNumber;
-function evenNumber(num, config) {
+export default function evenNumber(num, config) {
   var roundNum = Math.round(num);
   return roundNum % 2 === 0 ? roundNum : roundNum + Number(config !== null && config !== void 0 && config.smaller ? -1 : 1);
 }

package/lib/fivePlugins/CSS3DRenderPlugin/index.js

@@ -1,30 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.CSS3DRenderPlugin = void 0;
-var _three = _interopRequireWildcard(require("three"));
-var THREE = _three;
-var _CSS3DRenderer = require("three/examples/jsm/renderers/CSS3DRenderer");
-var _evenNumber = _interopRequireDefault(require("./evenNumber"));
-var _centerPoint = _interopRequireDefault(require("./centerPoint"));
-var _transformPositionToVector = _interopRequireDefault(require("./transformPositionToVector3"));
-var _createResizeObserver = _interopRequireDefault(require("./createResizeObserver"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) { "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); } return f; })(e, t); }
+import * as THREE from 'three';
+import { Scene, Vector3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import evenNumber from "./evenNumber.js";
+import centerPoint from "./centerPoint.js";
+import transformPositionToVector3 from "./transformPositionToVector3.js";
+import createResizeObserver from "./createResizeObserver.js";
 /**
  * 三维向量
  */
-
 /**
  * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
  * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
  *
  * @returns
  */
-var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
+export var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
   var state = {
     disposeCallbacks: []
   };
@@ -34,7 +24,7 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
       params[_key] = arguments[_key];
     }
     var points = params[0].map(function (point) {
-      return point instanceof _three.Vector3 ? point : (0, _transformPositionToVector["default"])(point);
+      return point instanceof Vector3 ? point : transformPositionToVector3(point);
     });
     var config = params[1];
     if ((points === null || points === void 0 ? void 0 : points.length) < 4) return console.error('points must be equal or greater than than 4');
@@ -70,14 +60,14 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
     var requestAnimationFrameId = null;
     if (behindModeUnInited) {
       state.behindMode = {
-        scene: new _three.Scene(),
-        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
+        scene: new Scene(),
+        css3DRenderer: new CSS3DRenderer()
       };
     }
     if (frontModeUnInited) {
       state.frontMode = {
-        scene: new _three.Scene(),
-        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
+        scene: new Scene(),
+        css3DRenderer: new CSS3DRenderer()
       };
     }
     var _ref = mode === 'behind' ? state.behindMode : state.frontMode,
@@ -88,16 +78,16 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
         var css3DRendererSetSize = function css3DRendererSetSize() {
           // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
           // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-          var rendererWidth = (0, _evenNumber["default"])(fiveElement.clientWidth, {
+          var rendererWidth = evenNumber(fiveElement.clientWidth, {
             smaller: true
           });
-          var rendererHeight = (0, _evenNumber["default"])(fiveElement.clientHeight, {
+          var rendererHeight = evenNumber(fiveElement.clientHeight, {
             smaller: true
           });
           css3DRenderer.setSize(rendererWidth, rendererHeight);
         };
         css3DRendererSetSize();
-        resizeObserver = (0, _createResizeObserver["default"])(css3DRendererSetSize, fiveElement);
+        resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
         css3DRenderer.domElement.style.position = 'absolute';
         css3DRenderer.domElement.style.top = '0';
         css3DRenderer.domElement.style.userSelect = 'none';
@@ -176,21 +166,21 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
       mode = config.mode;
     var planeWidth = points[0].distanceTo(points[1]);
     var planeHeight = points[1].distanceTo(points[2]);
-    var domWidthPx = (0, _evenNumber["default"])(planeWidth / ratio * dpr);
-    var domHeightPx = (0, _evenNumber["default"])(planeHeight / ratio * dpr);
-    var css3DObject = new _CSS3DRenderer.CSS3DObject(element);
+    var domWidthPx = evenNumber(planeWidth / ratio * dpr);
+    var domHeightPx = evenNumber(planeHeight / ratio * dpr);
+    var css3DObject = new CSS3DObject(element);
     css3DObject.scale.set(ratio, ratio, ratio);
     element.style.width = domWidthPx + 'px';
     element.style.height = domHeightPx + 'px';
     element.style.pointerEvents = 'none';
-    var centerPosition = (0, _centerPoint["default"])(points[0], points[2]);
+    var centerPosition = centerPoint(points[0], points[2]);
     var vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
     var vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
 
     // 旋转
-    var rotateXAngle = new _three.Vector3(0, 1, 0).angleTo(new _three.Vector3(0, vector12.y, vector12.z));
-    var rotateYAngle = new _three.Vector3(1, 0, 0).angleTo(new _three.Vector3(vector01.x, 0, vector01.z));
-    var rotateZAngle = vector01.angleTo(new _three.Vector3(vector01.x, 0, vector01.z));
+    var rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
+    var rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
+    var rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z));
     /**
      * [0,1,0] => [0,0,1]  为rolate Worldx正方向
      * [0,0,1] => [0,1,0]  为rolate Worldy正方向
@@ -199,9 +189,9 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
     var rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
     var rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
     var rotateZ = (vector01.x > 0 && vector01.y < 0 || vector01.x < 0 && vector01.y > 0 ? -1 : 1) * rotateZAngle;
-    css3DObject.rotateOnWorldAxis(new _three.Vector3(1, 0, 0), rotateX); // x
-    css3DObject.rotateOnWorldAxis(new _three.Vector3(0, 1, 0), rotateY); // y
-    css3DObject.rotateOnWorldAxis(new _three.Vector3(0, 0, 1), rotateZ); // z
+    css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX); // x
+    css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
+    css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
 
     css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
     var mesh;
@@ -233,4 +223,4 @@ var CSS3DRenderPlugin = exports.CSS3DRenderPlugin = function CSS3DRenderPlugin(f
     }
   };
 };
-var _default = exports["default"] = CSS3DRenderPlugin;
+export default CSS3DRenderPlugin;

package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _three = require("three");
+import { Vector3 } from 'three';
 var transformPositionToVector3 = function transformPositionToVector3(_ref) {
   var x = _ref.x,
     y = _ref.y,
     z = _ref.z;
-  return new _three.Vector3(x, y, z);
+  return new Vector3(x, y, z);
 };
-var _default = exports["default"] = transformPositionToVector3;
+export default transformPositionToVector3;

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -1,14 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CameraMovementPlugin = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _five = require("@realsee/five");
-var _typings = require("./typings");
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { Five } from '@realsee/five';
+import { Rotation } from "./typings.js";
 var PI = Math.PI;
 var PI_2 = PI * 2;
 var moving = false; // five 6 神秘bug， move 的时候不能 setState
@@ -18,7 +11,7 @@ function progressNumber(from, to, pst) {
   return from + (to - from) * pst;
 }
 function progressLongitude(fromLongitude, toLongitude, rotation, progress) {
-  var clockwise = rotation === _typings.Rotation.Clockwise;
+  var clockwise = rotation === Rotation.Clockwise;
   var delta = clockwise ? fromLongitude - toLongitude : toLongitude - fromLongitude;
   var deltaMod = delta % PI_2;
   var deltaMod2 = deltaMod < 0 ? deltaMod + PI_2 : deltaMod;
@@ -30,16 +23,16 @@ function progressLongitude(fromLongitude, toLongitude, rotation, progress) {
 /**
  * **运镜插件** 模拟类似于电影运镜效果。
  */
-var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovementPlugin(five) {
+export var CameraMovementPlugin = function CameraMovementPlugin(five) {
   var move = function move(args, duration) {
     var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
       preload: true
     };
     return new Promise(/*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(resolve, reject) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve, reject) {
         var _opts$asyncEndCallbac;
         var panoIndex, start, movePanoOptions;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
@@ -62,7 +55,7 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
               case 7:
                 return _context.abrupt("return", resolve(true));
               case 8:
-                if (!(args.mode === _five.Five.Mode.Floorplan)) {
+                if (!(args.mode === Five.Mode.Floorplan)) {
                   _context.next = 10;
                   break;
                 }
@@ -124,7 +117,7 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
     }());
   };
   var rotate = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(args, duration) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(args, duration) {
       var _opts$asyncStartCallb, _opts$asyncEndCallbac2;
       var opts,
         from,
@@ -134,7 +127,7 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
         animeDuration,
         onFiveRenderFrame,
         _args2 = arguments;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
@@ -148,11 +141,11 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
                 break;
               }
               _context2.next = 6;
-              return five.changeMode(args.mode, args.mode === _five.Five.Mode.Panorama ? {
+              return five.changeMode(args.mode, args.mode === Five.Mode.Panorama ? {
                 latitude: 0
               } : undefined);
             case 6:
-              if (!(args.mode === _five.Five.Mode.Panorama && five.currentMode === _five.Five.Mode.Panorama && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
+              if (!(args.mode === Five.Mode.Panorama && five.currentMode === Five.Mode.Panorama && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
                 _context2.next = 12;
                 break;
               }
@@ -191,7 +184,7 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
               timeEnd = false; // 开始时间
               start = performance.now();
               animeDuration = duration;
-              if (args.rotation === _typings.Rotation.Loop) {
+              if (args.rotation === Rotation.Loop) {
                 animeDuration = args.rotateSpeed ? Math.ceil(Math.abs(to.longitude - from.longitude) / args.rotateSpeed * 1000) : duration;
                 animeDuration = Math.min(duration, animeDuration);
               }
@@ -201,7 +194,7 @@ var CameraMovementPlugin = exports.CameraMovementPlugin = function CameraMovemen
                   return;
                 }
                 var targetState = {};
-                if (args.rotation !== _typings.Rotation.Loop) {
+                if (args.rotation !== Rotation.Loop) {
                   var progress = (performance.now() - start) / duration;
                   targetState = {
                     fov: progressNumber(from.fov, to.fov, progress),