@realsee/vreo 0.2.0-alpha.5 → 0.2.0-alpha.8

package/lib/Player/custom/SpatialScenePanel/index.js

@@ -37,6 +37,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// const getSphere = (position: Vector3, color = 0xffff00) => {
+//   const geometry = new SphereGeometry(0.05, 32, 16)
+//   const material = new MeshBasicMaterial({ color })
+//   const sphere = new Mesh(geometry, material)
+//   sphere.position.copy(position)
+//   return sphere
+// }
 var searchV1 = function searchV1(_ref) {
   var five = _ref.five,
       dom = _ref.dom;
@@ -48,7 +55,8 @@ var searchV1 = function searchV1(_ref) {
       _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
       intersect = _five$model$intersect2[0];
 
-  var point = five.project2d(intersect.point); // const width = dom!.clientWidth
+  var point = five.project2d(intersect.point);
+  var widescreen = window.innerWidth > 560 ? true : false; // const width = dom!.clientWidth
 
   var height = dom.clientHeight;
   dom.style.left = point.x + 'px';
@@ -63,14 +71,16 @@ var searchV1 = function searchV1(_ref) {
   var rightTop = new _three.Vector3(right, top);
   var rightBottom = new _three.Vector3(right, bottom);
   var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
-    point.setX(point.x / window.innerWidth * 2 - 2);
-    point.setY(-(point.y / window.innerHeight) * 2 + 1);
+    point.setX(point.x / window.innerWidth * 2 - (widescreen ? 1.25 : 1.75));
+    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
     point.setZ(0.5);
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
-  }); // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
+  }); // __debug__
+  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
+  // 判断是手机 150
 
-  var ratio = leftBottom.distanceTo(rightBottom) / 120;
+  var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
   return {
     points: points,
     ratio: ratio
@@ -83,6 +93,7 @@ var searchV1 = function searchV1(_ref) {
 
 
 function SpatialScenePanel(props) {
+  var timeoutRef = React.useRef(null);
   var ref = React.useRef(null);
   var panelRef = React.useRef(null);
   var rendererRef = React.useRef((0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(props.five));
@@ -96,7 +107,7 @@ function SpatialScenePanel(props) {
         return;
       }
 
-      var data = keyframe.data;
+      var data = keyframe.data; // const data = mockData
 
       var _searchV = searchV1({
         five: props.five,
@@ -114,6 +125,9 @@ function SpatialScenePanel(props) {
           css3DObject = _ref2.css3DObject,
           render = _ref2.render;
 
+      Object.assign(window, {
+        $css3DObject: css3DObject
+      });
       if (!container) return;
 
       _reactDom["default"].render( /*#__PURE__*/React.createElement(Panel, {
@@ -129,7 +143,8 @@ function SpatialScenePanel(props) {
         var progress = _ref4.progress;
         var needRotateY = Math.PI / 90 * 11 * progress;
         var rotateY = needRotateY - lastRotateY;
-        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY);
+        css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(rotateY); // css3DObject?.rotateZ
+
         lastRotateY = needRotateY;
       }).onStart(function () {
         css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.rotateY(startRotateY);
@@ -138,22 +153,35 @@ function SpatialScenePanel(props) {
         var _panelRef$current;
 
         (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.classList.add('show');
-      }).play();
+      }).play(); // Object.assign(window, {  $dispose: () => {
+      //   panelRef.current?.classList.add('hide')
+      //   setTimeout(() => dispose?.(), 1500)
+      // } })
+
       var start = keyframe.start,
           end = keyframe.end;
-      setTimeout(function () {
+      timeoutRef.current = setTimeout(function () {
         var _panelRef$current2;
 
         (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 ? void 0 : _panelRef$current2.classList.add('hide');
-        setTimeout(function () {
-          return dispose === null || dispose === void 0 ? void 0 : dispose();
+        timeoutRef.current = setTimeout(function () {
+          dispose === null || dispose === void 0 ? void 0 : dispose();
+          timeoutRef.current = null;
         }, 1500);
       }, end - start);
     };
 
+    Object.assign(window, {
+      $callback: callback
+    }); // setTimeout(() => {callback()}, 8000)
+
     props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
     return function () {
       props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -161,6 +189,38 @@ function SpatialScenePanel(props) {
     ref: ref
   });
 }
+/** 背景动画：控制延迟 */
+
+
+function SpatialScenePanelBg() {
+  var ref = React.useRef(null);
+  var timeoutRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref.current) return;
+
+    var listener = function listener() {
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
+      timeoutRef.current = setTimeout(function () {
+        var _ref$current2;
+
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
+        timeoutRef.current = null;
+      }, 3000);
+    };
+
+    ref.current.addEventListener('animationend', listener);
+    return function () {
+      if (ref.current) ref.current.removeEventListener('animationend', listener);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation"
+  });
+}
 
 var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   var _props$data, _props$data2, _props$data3, _props$data3$stateLis;
@@ -170,9 +230,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
     ref: myRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-show-area"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-bg"
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SpatialScenePanelBg, null), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-title"
@@ -195,4 +253,27 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
   }))), /*#__PURE__*/React.createElement("div", {
     className: "SpatialScenePanel-disappear-area"
   }));
-});
+}); // export function SpatialScenePanel() {
+//   // const data = mockData
+//   return (
+//     <div className="SpatialScenePanel" >
+//     <div className="SpatialScenePanel-show-area">
+//       <SpatialScenePanelBg />
+//       <div className="SpatialScenePanel-header">
+//         <div className="SpatialScenePanel-title">{data?.title}</div>
+//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
+//       </div>
+//       <div className="SpatialScenePanel-body">
+//         {data?.stateList?.map((state, index) => (
+//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
+//             <div className="SpatialScenePanel-text">{state.text}</div>
+//             <div className="SpatialScenePanel-dot"></div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//     <div className="SpatialScenePanel-disappear-area"></div>
+//   </div>
+//   )
+// }

package/lib/Player/index.d.ts

@@ -6,7 +6,7 @@ export declare class Player extends Subscribe<VreoKeyframeEvent> {
     private controller;
     configs: Readonly<PlayerConfigs>;
     constructor(five: Five, configs?: Partial<PlayerConfigs>);
-    load(vreoUnit: VreoUnit, currentTime?: number): Promise<boolean>;
+    load(vreoUnit: VreoUnit, currentTime?: number, preload?: boolean): Promise<boolean>;
     get paused(): boolean;
     play(): boolean;
     pause(): void;

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,7 @@ 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), _this.configs.customKeyframes && _this.configs.customKeyframes.map(function (CustomCmpt, key) {
+    }, /*#__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: {
@@ -110,9 +114,14 @@ 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,
+            panoIndexMap,
+            panoIndexs,
+            i,
             _this$controller$vide2,
             _this$controller$vide3,
             _args = arguments;
@@ -122,34 +131,86 @@ 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;
 
                 if (this.controller.visible) {
-                  _context.next = 5;
+                  _context.next = 6;
                   break;
                 }
 
                 this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
 
-                _context.next = 5;
+                _context.next = 6;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
 
-              case 5:
+              case 6:
                 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 = 20;
+                  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 14:
+                if (!(i < panoIndexs.length)) {
+                  _context.next = 20;
+                  break;
+                }
+
+                _context.next = 17;
+                return this.$five.preloadPano(Number(panoIndexs[i]));
+
+              case 17:
+                i++;
+                _context.next = 14;
+                break;
+
+              case 20:
+                // 新数据载入就绪
                 this.emit('loaded', vreoUnit);
 
                 if (!vreoUnit.video.url) {
-                  _context.next = 14;
+                  _context.next = 26;
                   break;
                 }
 
@@ -157,19 +218,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 13;
+                _context.next = 25;
                 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 25:
                 this.play();
 
-              case 14:
+              case 26:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 16:
+              case 28:
               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/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

@@ -75,49 +75,87 @@ function InfoPanel() {
           data = keyframe.data;
       var infoPanelData = data;
       var title = infoPanelData.title,
-          subTitle = infoPanelData.subTitle;
-
-      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'
-        });
-      }
+          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: () => {
-    //     controller.openDrawer({
-    //       content: (
-    //         // <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">
+    //     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'} />
-    //       </InfoPanelVideo>
-    //       ),
-    //       height: '60vh',
-    //     })
+    //       </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>
+    //     )
     //   },
     // })
 

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

@@ -22,42 +22,45 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function UpdateVRPanorama() {
   var controller = (0, _hooks.useController)();
   var five = (0, _hooks.useFiveInstance)();
-  var rawRef = React.useRef(null);
-  var workRef = React.useRef(null);
+  var deafultWorkRef = React.useRef(null);
+  var updateWorkRef = React.useRef(null);
   var restoreCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
       five.load(work);
     }
 
-    workRef.current = null;
+    updateWorkRef.current = null;
   }, []);
   var pausedCallback = React.useCallback(function () {
-    if (rawRef.current) {
-      var work = (0, _five.parseWork)(rawRef.current);
+    if (deafultWorkRef.current) {
+      var work = (0, _five.parseWork)(deafultWorkRef.current);
+      Object.assign(window, {
+        $rawWork: work
+      });
       five.load(work);
     }
   }, []);
   var playingCallback = React.useCallback(function () {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return;
     }
 
-    five.load(workRef.current);
+    five.load(updateWorkRef.current);
   }, []);
   React.useEffect(function () {
     var callback = function callback(keyframe) {
       var _five$work;
 
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works;
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works;
       }
 
       var data = keyframe.data; // 如果数据中有新 work 数据，则直接载入
 
       if (data.work) {
-        workRef.current = (0, _five.parseWork)(data.work);
-        five.load(workRef.current);
+        updateWorkRef.current = (0, _five.parseWork)(data.work);
+        five.load(updateWorkRef.current);
         return;
       }
 
@@ -72,8 +75,13 @@ function UpdateVRPanorama() {
         delete data.dynamic_scene;
       }
 
-      workRef.current = (0, _five.parseWork)([lastRawWork, data]);
-      five.load(workRef.current);
+      Object.assign(window, {
+        $work1: JSON.parse(lastRawWork),
+        $work2: data,
+        parseWork: _five.parseWork
+      });
+      updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
+      five.load(updateWorkRef.current);
     };
 
     controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空