@realsee/vreo 2.4.7 → 2.5.0-alpha.2

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() {
@@ -28,28 +18,28 @@ var inlinePlay = function inlinePlay(videoInstance) {
   videoInstance.load();
 };
 
-// const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
+// 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.d.ts

@@ -12,16 +12,11 @@ export interface Vector3Position {
 export type CSS3DRenderPluginParameterType = undefined;
 export interface CSS3DRenderPluginExportType {
     /**
-     * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-     * @param {Five} five
-     * @param {Vector3[] | Vector3Position[]} points: 矩形四个点坐标
-     * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
-     * @param {number} config.dpr: dpr, 默认为1
-     * @param {HTMLElement} config.container: HTMLElement
-     * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
-     * @param {'front' | 'behind'} config.mode: 两种模式
-     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
-     * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
+     * 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     *
+     * @param points - 矩形四个点坐标
+     * @param config - 配置项，包含ratio(像素比例)、dpr(设备像素比)、container(容器)、autoRender(自动渲染)、mode(渲染模式)等
+     * @returns 返回包含容器、销毁函数、CSS3D对象和可选渲染函数的对象
      */
     create3DDomContainer: (points: Vector3[] | Vector3Position[], config?: {
         ratio?: number;
@@ -41,8 +36,7 @@ export interface CSS3DRenderPluginExportType {
         render?: () => void;
     } | void;
     /**
-     * @description: 销毁所有的渲染内容
-     * @return {void}
+     * 销毁所有的渲染内容
      */
     disposeAll: () => void;
 }

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;