@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,8 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _hooks = require("../../../hooks");
 
-var _reactTransitionGroup = require("react-transition-group");
-
 var _VreoUnit = require("../../../../typings/VreoUnit");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -23,6 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -69,9 +69,8 @@ function Prompter() {
 
       ref.current = setTimeout(function () {
         setHidden(true);
-        setTimeout(function () {
-          return setText('');
-        }, 500);
+        setText(''); // setTimeout(() => setText(''), 500)
+
         if (ref.current) clearTimeout(ref.current);
         ref.current = null;
       }, end - start);
@@ -83,24 +82,12 @@ function Prompter() {
     };
   }, [controller]);
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames["default"])('vreo-prompter', {
-      'vreo-prompter--hidden': hidden,
-      'vreo-prompter--audio': controller.isAudio
-    })
-  }, text ?
-  /*#__PURE__*/
-
-  /* @warning "index.js:1 Warning: findDOMNode is deprecated in StrictMode." */
-  React.createElement(_reactTransitionGroup.TransitionGroup, {
+    className: (0, _classnames["default"])('vreo-prompter', _defineProperty({
+      'vreo-prompter--hidden': hidden
+    }, "vreo-prompter-left--".concat(controller.agentType), true))
+  }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-prompter-text"
-  }, /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
-    key: text,
-    classNames: "vreo-prompter-text-transition",
-    timeout: 500,
-    addEndListener: function addEndListener(node, done) {
-      return node.addEventListener('transitionend', done, false);
-    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "vreo-prompter-innerText"
-  }, text))) : undefined);
+  }, text)));
 }

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -23,15 +23,18 @@ function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
   var deafultWorkRef = React.useRef(null);
-  var updateWorkRef = React.useRef(null);
+  var updateWorkRef = React.useRef(null); // 恢复默认 VR
+
   var restoreCallback = React.useCallback(function () {
+    // 先清理掉 之前的 VR 数据备份
+    updateWorkRef.current = null;
+
     if (deafultWorkRef.current) {
       var work = (0, _five.parseWork)(deafultWorkRef.current);
       five.load(work);
     }
+  }, []); // 暂停时： 恢复默认 VR 
 
-    updateWorkRef.current = null;
-  }, []);
   var pausedCallback = React.useCallback(function () {
     if (deafultWorkRef.current) {
       var work = (0, _five.parseWork)(deafultWorkRef.current);
@@ -40,7 +43,8 @@ function UpdateVRPanorama() {
       });
       five.load(work);
     }
-  }, []);
+  }, []); // 播放时：如果暂停前有更新 VR 需要还原
+
   var playingCallback = React.useCallback(function () {
     if (!updateWorkRef.current) {
       return;
@@ -101,6 +105,6 @@ function UpdateVRPanorama() {
       controller.off('paused', pausedCallback);
       controller.off('playing', playingCallback);
     };
-  }, [controller]);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/Player/typings.d.ts

@@ -3,7 +3,11 @@ import { Subscribe, Five } from '@realsee/five';
 import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit';
 import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 export interface PlayerConfigs {
-    containter?: ReactDOM.Container;
+    /**
+     * @deprecated rename to container
+     */
+    containter?: Element;
+    container?: Element;
     keyframeMap: VreoKeyframeConfigMap;
     /**
      * 微信端自动播放功能实现需要提前初始化 Video 实例。
@@ -24,6 +28,13 @@ export interface PlayerConfigs {
         size: number;
     };
     autoPreload?: boolean;
+    appSize?: AppSize;
+    appearance?: Appearance;
+}
+export declare type AppSize = 'S' | 'M' | 'L' | 'XL';
+export declare type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand';
+export interface Appearance {
+    waveStyle?: 'wave' | 'solid';
 }
 export declare type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>;
 export interface CustomVreoKeyframeProps {

package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.d.ts

@@ -0,0 +1,2 @@
+import { Vector3 } from 'three';
+export default function centerPoint(point1: Vector3, point2: Vector3): Vector3;

package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js

@@ -0,0 +1,12 @@
+"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);
+}

package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description: 简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func: () => any, element?: HTMLElement): {
+    observe: () => void;
+    unobserve: () => void;
+};

package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = createResizeObserver;
+
+/**
+ * @description: 简陋的 ResizeObserver polyfill
+ */
+function createResizeObserver(func, element) {
+  if (!element || typeof ResizeObserver === 'undefined') {
+    return {
+      observe: function observe() {
+        return window.addEventListener('resize', func);
+      },
+      unobserve: function unobserve() {
+        return window.removeEventListener('resize', func);
+      }
+    };
+  } else {
+    var observer = new ResizeObserver(func);
+    return {
+      observe: function observe() {
+        return observer.observe(element);
+      },
+      unobserve: function unobserve() {
+        return observer.unobserve(element);
+      }
+    };
+  }
+}

package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.d.ts

@@ -0,0 +1,3 @@
+export default function evenNumber(num: number, config?: {
+    smaller?: boolean;
+}): number;

package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = evenNumber;
+
+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

@@ -0,0 +1,56 @@
+import { FivePlugin } from '@realsee/five';
+import { Vector3 } from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+/**
+ * 三维向量
+ */
+export interface Vector3Position {
+    x: number;
+    y: number;
+    z: number;
+}
+export declare 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: 清理函数
+     */
+    create3DDomContainer: (points: Vector3[] | Vector3Position[], config?: {
+        ratio?: number;
+        dpr?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        [key: string]: any;
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        behindFiveContainer: HTMLElement;
+    })) => {
+        container: HTMLElement;
+        dispose: () => void;
+        css3DObject: CSS3DObject;
+        render?: () => void;
+    } | void;
+    /**
+     * @description: 销毁所有的渲染内容
+     * @return {void}
+     */
+    disposeAll: () => void;
+}
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+export declare const CSS3DRenderPlugin: FivePlugin<CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType>;
+export default CSS3DRenderPlugin;

package/lib/fivePlugins/CSS3DRenderPlugin/index.js

@@ -0,0 +1,275 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CSS3DRenderPlugin = void 0;
+
+var THREE = _interopRequireWildcard(require("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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
+  var state = {
+    disposeCallbacks: []
+  };
+
+  var create3DDomContainer = function create3DDomContainer() {
+    var _five$model, _five$model2, _config$autoRender;
+
+    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+      params[_key] = arguments[_key];
+    }
+
+    var points = params[0].map(function (point) {
+      return point instanceof THREE.Vector3 ? point : (0, _transformPositionToVector["default"])(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');
+    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 ? void 0 : (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
+    var fiveElement = five.getElement();
+    if (!fiveElement) return console.error('five.getElement() is ' + fiveElement);
+    var disposers = [];
+    var ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
+    if (ratio <= 0.00215) console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+    var dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
+    var mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
+    var autoRender = (_config$autoRender = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _config$autoRender !== void 0 ? _config$autoRender : true;
+    var behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
+    var container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
+    container.classList.add('__Vreo-plugin--CSS3DRenderPlugin'); // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+
+    var _createObject = createObject(points, {
+      ratio: ratio,
+      dpr: dpr,
+      container: container,
+      mode: mode
+    }),
+        css3DObject = _createObject.css3DObject,
+        mesh = _createObject.mesh; // ======= INIT START =======
+
+
+    var resizeObserver;
+    var frontModeUnInited = mode === 'front' && !state.frontMode;
+    var behindModeUnInited = mode === 'behind' && !state.behindMode;
+    var inited = !(frontModeUnInited || behindModeUnInited);
+    var stopRenderFlag = false;
+    var requestAnimationFrameId = null;
+
+    if (behindModeUnInited) {
+      state.behindMode = {
+        scene: new THREE.Scene(),
+        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
+      };
+    }
+
+    if (frontModeUnInited) {
+      state.frontMode = {
+        scene: new THREE.Scene(),
+        css3DRenderer: new _CSS3DRenderer.CSS3DRenderer()
+      };
+    }
+
+    var _ref = mode === 'behind' ? state.behindMode : state.frontMode,
+        scene = _ref.scene,
+        css3DRenderer = _ref.css3DRenderer;
+
+    var render = function () {
+      if (!inited) {
+        var css3DRendererSetSize = function css3DRendererSetSize() {
+          // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+          // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+          var rendererWidth = (0, _evenNumber["default"])(fiveElement.clientWidth, {
+            smaller: true
+          });
+          var rendererHeight = (0, _evenNumber["default"])(fiveElement.clientHeight, {
+            smaller: true
+          });
+          css3DRenderer.setSize(rendererWidth, rendererHeight);
+        };
+
+        css3DRendererSetSize();
+        resizeObserver = (0, _createResizeObserver["default"])(css3DRendererSetSize, fiveElement);
+        css3DRenderer.domElement.style.position = 'absolute';
+        css3DRenderer.domElement.style.top = '0';
+        css3DRenderer.domElement.style.userSelect = 'none';
+        css3DRenderer.domElement.style.pointerEvents = 'none';
+
+        var renderEveryFrame = function renderEveryFrame() {
+          if (stopRenderFlag) return;
+          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+          css3DRenderer.render(scene, five.camera);
+        };
+
+        return function () {
+          var _resizeObserver, _resizeObserver$obser;
+
+          scene.add(css3DObject);
+          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 ? void 0 : _resizeObserver$obser.call(_resizeObserver);
+          renderEveryFrame();
+
+          if (mode === 'behind' && mesh) {
+            five.scene.add(mesh);
+            disposers.push(function () {
+              return mesh && five.scene.remove(mesh);
+            });
+          }
+        };
+      } else {
+        return function () {
+          scene.add(css3DObject);
+        };
+      }
+    }();
+
+    if (frontModeUnInited) {
+      var wrapper = fiveElement.parentElement || document.body;
+      wrapper.appendChild(css3DRenderer.domElement);
+    }
+
+    if (behindModeUnInited) {
+      var _wrapper = behindFiveContainer;
+
+      _wrapper.appendChild(css3DRenderer.domElement);
+    } // ======= INIT END =======
+
+
+    var dispose = function dispose() {
+      stopRenderFlag = true;
+      disposers.forEach(function (d) {
+        return d === null || d === void 0 ? void 0 : d();
+      });
+      scene.remove(css3DObject);
+      if (typeof requestAnimationFrameId === 'number') cancelAnimationFrame(requestAnimationFrameId);
+
+      if (scene.children.length === 0) {
+        css3DRenderer.domElement.remove();
+        if (mode === 'front') state.frontMode = undefined;
+        if (mode === 'behind') state.behindMode = undefined;
+
+        if (!state.behindMode && !state.frontMode) {
+          var _resizeObserver2, _resizeObserver2$unob;
+
+          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 ? void 0 : _resizeObserver2$unob.call(_resizeObserver2);
+        }
+      }
+
+      return true;
+    };
+
+    var idx = state.disposeCallbacks.findIndex(function (item) {
+      return item === dispose;
+    });
+
+    if (idx !== -1) {
+      state.disposeCallbacks.splice(idx, 1);
+    } else {
+      state.disposeCallbacks.push(dispose);
+    }
+
+    if (autoRender) render();
+    return {
+      container: container,
+      dispose: dispose,
+      css3DObject: css3DObject,
+      render: autoRender ? undefined : render
+    };
+  };
+
+  var createObject = function createObject(points, config) {
+    var ratio = config.ratio,
+        dpr = config.dpr,
+        element = config.container,
+        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);
+    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 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));
+    /**
+     * [0,1,0] => [0,0,1]  为rolate Worldx正方向
+     * [0,0,1] => [0,1,0]  为rolate Worldy正方向
+     * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
+     */
+
+    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.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+    var mesh;
+
+    if (mode === 'behind') {
+      var material = new THREE.MeshBasicMaterial({
+        opacity: 0,
+        transparent: false,
+        side: THREE.DoubleSide
+      });
+      var geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+      mesh = new THREE.Mesh(geometry, material);
+      mesh.name = 'CSS3DRenderPlugin-mesh';
+      mesh.position.copy(css3DObject.position);
+      mesh.rotation.copy(css3DObject.rotation);
+      mesh.scale.copy(css3DObject.scale);
+    }
+
+    return {
+      css3DObject: css3DObject,
+      mesh: mesh
+    };
+  };
+
+  return {
+    create3DDomContainer: create3DDomContainer,
+    disposeAll: function disposeAll() {
+      state.disposeCallbacks.forEach(function (d) {
+        return d === null || d === void 0 ? void 0 : d();
+      });
+      state.disposeCallbacks = [];
+    }
+  };
+};
+
+exports.CSS3DRenderPlugin = CSS3DRenderPlugin;
+var _default = CSS3DRenderPlugin;
+exports["default"] = _default;

package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.d.ts

@@ -0,0 +1,7 @@
+import { Vector3 } from 'three';
+declare const transformPositionToVector3: ({ x, y, z }: {
+    x: number;
+    y: number;
+    z: number;
+}) => Vector3;
+export default transformPositionToVector3;

package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js

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

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -15,30 +15,26 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var PI_2 = Math.PI * 2;
+var PI = Math.PI;
+var PI_2 = PI * 2;
 
 function formatLatitude(rad) {
   return rad % PI_2;
 }
 
 function formatLongitude(rad) {
-  return (rad % PI_2 + PI_2) % PI_2;
+  return rad % PI_2;
 }
 
 var getLongitudeParams = function getLongitudeParams(from, to, rotation) {
-  var PI = Math.PI;
-  var PI_2 = PI * 2;
   from = formatLongitude(from);
   to = formatLongitude(to); // 逆时针旋转，初始值必须是较大的值
 
-  if (rotation === _typings.Rotation.Anticlockwise && from < to) from += PI_2; // 顺时针旋转，结束值必须是较大值
-
-  if (rotation === _typings.Rotation.Clockwise && to < from) to += PI_2; // Loop 旋转，找锐角旋转
+  if (rotation === _typings.Rotation.Anticlockwise && from > to) to += PI_2; // 顺时针旋转，结束值必须是较大值
+  else if (rotation === _typings.Rotation.Clockwise && to > from) from += PI_2; // Loop 旋转，找锐角旋转
   // 如果 to 比 from 大 180°，逆时针转
   // 如果 from 比 to 大 180°，顺时针转
-
-  if (rotation === _typings.Rotation.Loop && to - from > PI) return getLongitudeParams(from, to, _typings.Rotation.Anticlockwise);
-  if (rotation === _typings.Rotation.Loop && from - to > PI) return getLongitudeParams(from, to, _typings.Rotation.Clockwise);
+  else if (rotation !== _typings.Rotation.Anticlockwise && rotation !== _typings.Rotation.Clockwise && to - from > PI) return getLongitudeParams(from, to, _typings.Rotation.Clockwise);else if (rotation !== _typings.Rotation.Anticlockwise && rotation !== _typings.Rotation.Clockwise && from - to > PI) return getLongitudeParams(from, to, _typings.Rotation.Anticlockwise);
   return {
     from: from,
     to: to
@@ -269,7 +265,7 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                 var onUpdate = function onUpdate(_ref3) {
                   var progress = _ref3.progress;
                   var state = {};
-                  state.longitude = progressNumber(from.longitude, to.longitude, progress);
+                  state.longitude = progressNumber(from.longitude, to.longitude, progress) % PI_2;
                   state.latitude = progressNumber(from.latitude, to.latitude, progress);
                   state.fov = progressNumber(from.fov, to.fov, progress);
                   five.setState(state, true);
@@ -283,7 +279,12 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                   resolve(false);
                 };
 
-                var animeDuration = args.rotateSpeed ? Math.ceil(Math.abs(to.longitude - from.longitude) / args.rotateSpeed * 1000) : duration;
+                var animeDuration = duration;
+
+                if (args.rotation === _typings.Rotation.Loop) {
+                  animeDuration = args.rotateSpeed ? Math.ceil(Math.abs(to.longitude - from.longitude) / args.rotateSpeed * 1000) : duration;
+                }
+
                 var tween = (0, _tween.tweenProgress)(animeDuration, _tween.Easing.Linear.None).onUpdate(onUpdate).onComplete(onComplete).onDestroy(onDestroy);
 
                 if (args.rotation === _typings.Rotation.Loop) {

package/lib/fivePlugins/ModelTVVideoPlugin/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true