@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.10

package/lib/Player/index.js

@@ -17,10 +17,14 @@ var _App = require("./App");
 
 var _Controller = require("./Controller");
 
+var _VreoUnit = require("../typings/VreoUnit");
+
 var _mobx = require("mobx");
 
 var _Drawer = require("./modules/Drawer");
 
+var _PopUp = require("./modules/PopUp");
+
 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; }
@@ -79,7 +83,23 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     _this.controller.configs = _this.configs;
     ReactDOM.render( /*#__PURE__*/React.createElement(_Controller.ControllerContext.Provider, {
       value: _this.controller
-    }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null)), configs.containter); // 监听播放情况：抛出触发时机
+    }, /*#__PURE__*/React.createElement(_App.App, null), /*#__PURE__*/React.createElement(_Drawer.Drawer, null), /*#__PURE__*/React.createElement(_PopUp.PopUp, null), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
+      return /*#__PURE__*/React.createElement(CustomCmpt, {
+        key: key,
+        subscribe: {
+          on: function on(name, callback) {
+            return _this.on(name, callback);
+          },
+          once: function once(name, callback) {
+            return _this.once(name, callback);
+          },
+          off: function off(name, callback) {
+            return _this.off(name, callback);
+          }
+        },
+        five: five
+      });
+    })), configs.containter); // 监听播放情况：抛出触发时机
 
     (0, _mobx.reaction)(function () {
       return _this.controller.playing;
@@ -94,9 +114,15 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function () {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$vide,
+            _this$configs$imageOp,
             _this2 = this;
 
         var currentTime,
+            preload,
+            force,
+            panoIndexMap,
+            panoIndexs,
+            i,
             _this$controller$vide2,
             _this$controller$vide3,
             _args = arguments;
@@ -106,34 +132,92 @@ var Player = /*#__PURE__*/function (_Subscribe) {
             switch (_context.prev = _context.next) {
               case 0:
                 currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
+                preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
+                force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
+
+                if (force) {
+                  vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
+                }
 
                 if (this.controller.visible) {
-                  _context.next = 5;
+                  _context.next = 8;
                   break;
                 }
 
                 this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
 
-                _context.next = 5;
+                _context.next = 8;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
 
-              case 5:
+              case 8:
                 if (this.controller.stopInterval) {
                   this.controller.stopInterval();
                   this.controller.stopInterval = undefined;
                 }
 
                 this.controller.vreoUnit = vreoUnit;
-                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 新数据载入就绪
+                (_this$controller$vide = this.controller.videoInstance) === null || _this$controller$vide === void 0 ? void 0 : _this$controller$vide.pause(); // 预载逻辑
+                // 是否降低图片分辨率
+
+                if (this.$five.imageOptions.size && (_this$configs$imageOp = this.configs.imageOptions) !== null && _this$configs$imageOp !== void 0 && _this$configs$imageOp.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+                  this.$five.imageOptions.size = this.configs.imageOptions.size;
+                } // 预载数据中的点位
+
+
+                if (!(preload || preload === undefined && this.configs.autoPreload)) {
+                  _context.next = 22;
+                  break;
+                }
+
+                panoIndexMap = vreoUnit.keyframes.filter(function (vreoKeyframe) {
+                  if (vreoKeyframe.type !== _VreoUnit.VreoKeyframeEnum.CameraMovement) {
+                    return false;
+                  }
+
+                  var data = vreoKeyframe.data;
 
+                  if (data.panoIndex === undefined) {
+                    return false;
+                  }
+
+                  return true;
+                }).reduce(function (accu, curr) {
+                  var panoIndex = curr.data.panoIndex;
+
+                  if (!accu[panoIndex]) {
+                    accu[panoIndex] = true;
+                  }
+
+                  return accu;
+                }, {});
+                panoIndexs = Object.keys(panoIndexMap);
+                i = 0;
+
+              case 16:
+                if (!(i < panoIndexs.length)) {
+                  _context.next = 22;
+                  break;
+                }
+
+                _context.next = 19;
+                return this.$five.preloadPano(Number(panoIndexs[i]));
+
+              case 19:
+                i++;
+                _context.next = 16;
+                break;
+
+              case 22:
+                // 新数据载入就绪
                 this.emit('loaded', vreoUnit);
+                this.controller.emit('loaded', vreoUnit);
 
                 if (!vreoUnit.video.url) {
-                  _context.next = 14;
+                  _context.next = 29;
                   break;
                 }
 
@@ -141,19 +225,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 13;
+                _context.next = 28;
                 return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
 
-              case 13:
+              case 28:
                 this.play();
 
-              case 14:
+              case 29:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 16:
+              case 31:
               case "end":
                 return _context.stop();
             }

package/lib/Player/modules/PopUp/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PopUp(): JSX.Element;

package/lib/Player/modules/PopUp/index.js

@@ -0,0 +1,43 @@
+"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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopUp = PopUp;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _mobxReact = require("mobx-react");
+
+var _hooks = require("../../hooks");
+
+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; }
+
+var PopUpView = (0, _mobxReact.observer)(function (_ref) {
+  var controller = _ref.controller;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames["default"])('vreo-PopUp', {
+      'vreo-PopUp-visible': controller.popUp
+    }),
+    onClick: function onClick() {
+      return controller.openPopUp(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-PopUp-inner"
+  }, controller.popUp || ''));
+});
+
+function PopUp() {
+  var controller = (0, _hooks.useController)();
+  return /*#__PURE__*/React.createElement(PopUpView, {
+    controller: controller
+  });
+}

package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 export interface VideoAgentMeshOptions {
     videoInstance?: HTMLVideoElement;
+    audioInstance?: HTMLAudioElement;
 }
 /**
  * 视频经纪人MESH

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -106,7 +106,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _this.options = options;
     _this.freeze = false;
     _this.paused = true;
-    {
+
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         _this.audioInstance = cacheInstance.audioInstance;
       } else {
@@ -122,7 +123,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
       }
+    } else {
+      _this.audioInstance = options.audioInstance;
     }
+
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -6,7 +6,10 @@ export declare class VideoAgentScene {
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
     container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean);
+    constructor(container: HTMLElement, needRender?: boolean, options?: {
+        videoInstance?: HTMLVideoElement;
+        audioInstance?: HTMLAudioElement;
+    });
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -23,6 +23,7 @@ var VideoAgentScene = function VideoAgentScene(container) {
   var _this = this;
 
   var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
   _classCallCheck(this, VideoAgentScene);
 
@@ -74,7 +75,7 @@ var VideoAgentScene = function VideoAgentScene(container) {
 
   _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
 
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
 
   if (needRender) {
     container.append(_domElement);

package/lib/Player/modules/VideoAgent/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare function VideoAgent(props: {
     onClick?: () => void;
+    options?: VideoAgentMeshOptions;
 }): JSX.Element;

package/lib/Player/modules/VideoAgent/index.js

@@ -28,7 +28,7 @@ function VideoAgent(props) {
       return;
     }
 
-    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current);
+    var videoAgentScene = new _VideoAgentScene.VideoAgentScene(ref.current, true, props.options || {});
     controller.videoAgentScene = videoAgentScene;
     return function () {
       var _controller$videoAgen;

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

@@ -45,13 +45,49 @@ function CameraMovement() {
                 cameraMovementData = data;
                 effect = cameraMovementData.effect;
 
-                if (effect === _typings.CameraMovementEffect.Rotate) {
-                  ref.current.rotate(data, end - start);
-                } else {
-                  ref.current.move(data, end - start);
+                if (!(effect === _typings.CameraMovementEffect.Rotate)) {
+                  _context.next = 9;
+                  break;
                 }
 
-              case 5:
+                _context.next = 7;
+                return ref.current.rotate(data, end - start);
+
+              case 7:
+                _context.next = 21;
+                break;
+
+              case 9:
+                if (!(effect === _typings.CameraMovementEffect.Move)) {
+                  _context.next = 14;
+                  break;
+                }
+
+                _context.next = 12;
+                return ref.current.move(data, end - start);
+
+              case 12:
+                _context.next = 21;
+                break;
+
+              case 14:
+                if (!(cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex)) {
+                  _context.next = 19;
+                  break;
+                }
+
+                _context.next = 17;
+                return ref.current.move(data, end - start);
+
+              case 17:
+                _context.next = 21;
+                break;
+
+              case 19:
+                _context.next = 21;
+                return ref.current.rotate(data, end - start);
+
+              case 21:
               case "end":
                 return _context.stop();
             }

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

@@ -35,12 +35,14 @@ function InfoPanelVideo(_ref2) {
       children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     className: "vreo-infoPanel vreo-infoPanel--video"
-  }, children, /*#__PURE__*/React.createElement("video", {
+  }, children, /*#__PURE__*/React.createElement("div", {
+    className: "vreo-infoPanelWrapper"
+  }, /*#__PURE__*/React.createElement("video", {
     playsInline: true,
     autoPlay: true,
     className: "vreo-infoPanelVideo",
     src: url
-  }));
+  })));
 }
 
 var Title = function Title(props) {
@@ -72,45 +74,91 @@ function InfoPanel() {
           end = keyframe.end,
           data = keyframe.data;
       var infoPanelData = data;
-
-      if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelImg, {
-            url: infoPanelData.url
-          }),
-          height: '60vh'
-        });
-      } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
-            url: infoPanelData.url
-          }),
-          height: '60vh'
-        });
-      }
+      var title = infoPanelData.title,
+          subTitle = infoPanelData.subTitle,
+          style = infoPanelData.style;
+
+      do {
+        if (style === _VreoUnit.InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          }
+
+          break;
+        }
+
+        if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        }
+      } while (false);
 
       timeoutRef.current = setTimeout(function () {
-        return controller.openDrawer(false);
+        controller.openDrawer(false);
+        controller.openPopUp(false);
       }, end - start);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
-    Object.assign(window, {
-      $setInfoPanel: function $setInfoPanel() {
-        controller.openDrawer({
-          content:
-          /*#__PURE__*/
-          // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-          React.createElement(InfoPanelImg, {
-            url: "http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png"
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: "\u573A\u666F\u8054\u52A8\u6293\u62CD\u56FE\u7247",
-            subTitle: "2022.02.17 14:00"
-          })),
-          height: '60vh'
-        });
-      }
-    });
+    controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    // })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback);
 

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

@@ -9,8 +9,12 @@ exports.ModelVideo = ModelVideo;
 
 var React = _interopRequireWildcard(require("react"));
 
+var THREE = _interopRequireWildcard(require("three"));
+
 var _ModelTVVideoPlugin = require("../../../../fivePlugins/ModelTVVideoPlugin");
 
+var _createTransMatrix = require("../../../../shared-utils/createTransMatrix");
+
 var _VreoUnit = require("../../../../typings/VreoUnit");
 
 var _hooks = require("../../../hooks");
@@ -33,7 +37,7 @@ function ModelVideo() {
       var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(keyframe) {
         var _controller$configs, _controller$configs$v;
 
-        var start, end, _ref2, videoSrc, videoPosterSrc, vertexs;
+        var start, end, _ref2, videoSrc, videoPosterSrc, vertexs, matrixWorld, position, points;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -44,16 +48,49 @@ function ModelVideo() {
                 }
 
                 start = keyframe.start, end = keyframe.end;
-                _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs;
+                _ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs, matrixWorld = _ref2.matrixWorld;
+
+                position = function () {
+                  if (vertexs.length < 4) {
+                    throw new Error('ModelVideo: 顶点数据集合不够，无法组成矩形 ....');
+                  }
+
+                  if (vertexs.length === 4) {
+                    return vertexs;
+                  }
+
+                  var box = new THREE.Box3();
+                  vertexs.forEach(function (v) {
+                    return box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z));
+                  });
+                  return [new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z)];
+                }();
+
+                points = function () {
+                  if (matrixWorld) {
+                    var transMatrix = (0, _createTransMatrix.createTransMatrix)(matrixWorld);
+                    return [position.map(function (p) {
+                      var res = transMatrix([p.x, p.y, p.z]);
+                      return {
+                        x: res[0],
+                        y: res[1],
+                        z: res[2]
+                      };
+                    })];
+                  }
+
+                  return [position];
+                }();
+
                 ref.current.disable();
-                _context.next = 6;
+                _context.next = 8;
                 return ref.current.load({
                   video_src: videoSrc,
                   video_poster_src: videoPosterSrc,
-                  points: [vertexs]
+                  points: points
                 }, (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.modelTVVideo);
 
-              case 6:
+              case 8:
                 ref.current.enable();
                 timeoutRef.current = setTimeout(function () {
                   var _ref$current;
@@ -61,7 +98,7 @@ function ModelVideo() {
                   return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disable();
                 }, end - start);
 
-              case 8:
+              case 10:
               case "end":
                 return _context.stop();
             }

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

@@ -63,12 +63,8 @@ function PanoTextLabel() {
       var res = project2d(new _three.Vector3(x, y, z));
       if (!res) return;
       var left = res.x,
-          top = res.y;
-      Object.assign(window, {
-        $PanoTextLabel: {
-          setState: setState
-        }
-      });
+          top = res.y; // Object.assign(window, { $PanoTextLabel: { setState } })
+
       setState({
         left: left,
         top: top,
@@ -80,12 +76,8 @@ function PanoTextLabel() {
       }, end - start);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
-    Object.assign(window, {
-      $panoTextLabel: {
-        setState: setState
-      }
-    });
+    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback); // Object.assign(window, { $panoTextLabel: { setState } })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
 

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

@@ -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 }; }
@@ -87,20 +85,9 @@ function 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, {
+  }, /*#__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)));
 }