@realsee/vreo 2.4.7 → 2.5.0-alpha.2

package/lib/Player/Controller.js

@@ -1,91 +1,110 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ControllerContext = exports.Controller = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _five = require("@realsee/five");
-var _mobx = require("mobx");
-var React = _interopRequireWildcard(require("react"));
-var _animationFrame = require("../shared-utils/animationFrame");
-var _VreoUnit = require("../typings/VreoUnit");
-var _setElementDataset = _interopRequireDefault(require("../shared-utils/setElementDataset"));
-var _getMediaInfo = require("../shared-utils/getMediaInfo");
-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 _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { Subscribe } from '@realsee/five';
+import { action, makeObservable, observable, reaction } from 'mobx';
+import * as React from 'react';
+import { requestAnimationFrameInterval } from "../shared-utils/animationFrame/index.js";
+import { VreoKeyframeEnum } from "../typings/VreoUnit.js";
+import setElementDataset from "../shared-utils/setElementDataset.js";
+import { getMediaType } from "../shared-utils/getMediaInfo.js";
 /**
- * 逻辑控制器：内部状态。
+ * Vreo 播放器逻辑控制器
+ * 
+ * 负责管理播放器的内部状态、事件处理、UI 控制和剧本执行。
+ * 提供播放控制、外观设置、弹窗管理、抽屉控制等功能。
+ * 
+ * @example
+ * ```typescript
+ * const controller = new Controller({
+ *   five: fiveInstance,
+ *   container: document.getElementById('container'),
+ *   configs: playerConfigs
+ * })
+ * 
+ * // 设置播放状态
+ * controller.setPlaying(true)
+ * 
+ * // 打开弹窗
+ * controller.openPopUp('弹窗内容')
+ * 
+ * // 打开抽屉
+ * controller.openDrawer({ content: '抽屉内容', height: 300 })
+ * ```
  */
-var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
-  (0, _inherits2["default"])(Controller, _Subscribe);
+export var Controller = /*#__PURE__*/function (_Subscribe) {
+  _inherits(Controller, _Subscribe);
   var _super = _createSuper(Controller);
+  /**
+   * 创建 Controller 实例
+   * @param params - 构造参数对象
+   * @param params.five - Five 渲染引擎实例
+   * @param params.container - DOM 容器元素
+   * @param params.configs - 播放器配置
+   */
   function Controller(_ref) {
     var _this;
     var five = _ref.five,
       container = _ref.container,
       configs = _ref.configs;
-    (0, _classCallCheck2["default"])(this, Controller);
+    _classCallCheck(this, Controller);
     _this = _super.call(this);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "playing", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ended", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loading", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerSize", {
+    _defineProperty(_assertThisInitialized(_this), "playing", false);
+    _defineProperty(_assertThisInitialized(_this), "ended", false);
+    _defineProperty(_assertThisInitialized(_this), "loading", false);
+    _defineProperty(_assertThisInitialized(_this), "containerSize", {
       width: 0,
       height: 0
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "waveAppearance", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "appearance", {
+    _defineProperty(_assertThisInitialized(_this), "waveAppearance", null);
+    _defineProperty(_assertThisInitialized(_this), "appearance", {
       waveStyle: 'wave'
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "avatar", {});
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "visible", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popUp", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "drawerConfig", null);
+    _defineProperty(_assertThisInitialized(_this), "avatar", {});
+    _defineProperty(_assertThisInitialized(_this), "visible", false);
+    _defineProperty(_assertThisInitialized(_this), "popUp", null);
+    _defineProperty(_assertThisInitialized(_this), "drawerConfig", null);
     _this.configs = configs;
     _this.container = container;
     _this.five = five;
     _this.appSize = configs.appSize;
     _this.appearance = _objectSpread(_objectSpread({}, _this.appearance), configs.appearance);
-    (0, _mobx.makeObservable)((0, _assertThisInitialized2["default"])(_this), {
-      visible: _mobx.observable,
-      setVisible: _mobx.action,
-      playing: _mobx.observable,
-      setPlaying: _mobx.action,
-      loading: _mobx.observable,
+    makeObservable(_assertThisInitialized(_this), {
+      visible: observable,
+      setVisible: action,
+      playing: observable,
+      setPlaying: action,
+      loading: observable,
       // videoAgentScene: observable.ref,
-      setLoading: _mobx.action,
-      popUp: _mobx.observable.ref,
-      openPopUp: _mobx.action,
-      drawerConfig: _mobx.observable.ref,
-      openDrawer: _mobx.action,
-      ended: _mobx.observable,
-      waveAppearance: _mobx.observable,
-      avatar: _mobx.observable,
-      containerSize: _mobx.observable,
-      setContainerSize: _mobx.action,
-      appearance: _mobx.observable,
-      setAppearance: _mobx.action,
-      configs: _mobx.observable.ref,
-      setEnded: _mobx.action,
-      setAvatar: _mobx.action
+      setLoading: action,
+      popUp: observable.ref,
+      openPopUp: action,
+      drawerConfig: observable.ref,
+      openDrawer: action,
+      ended: observable,
+      waveAppearance: observable,
+      avatar: observable,
+      containerSize: observable,
+      setContainerSize: action,
+      appearance: observable,
+      setAppearance: action,
+      configs: observable.ref,
+      setEnded: action,
+      setAvatar: action
     });
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return [_this.appearance.waveStyle, _this.loading];
     }, function (_ref2) {
-      var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+      var _ref3 = _slicedToArray(_ref2, 2),
         waveStyle = _ref3[0],
         loading = _ref3[1];
       if (loading === null) {
@@ -115,7 +134,7 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
       fireImmediately: true
     });
     if (!_this.appSize) {
-      (0, _mobx.reaction)(function () {
+      reaction(function () {
         return _this.containerSize;
       }, function (containerSize) {
         if (!(containerSize !== null && containerSize !== void 0 && containerSize.width)) return;
@@ -131,30 +150,30 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
           if (height > width) return 'portrait';
           return 'landscape';
         }();
-        (0, _setElementDataset["default"])(_this.container, {
+        setElementDataset(_this.container, {
           size: size
         });
-        (0, _setElementDataset["default"])(_this.container, {
+        setElementDataset(_this.container, {
           orientation: orientation
         });
       }, {
         fireImmediately: true
       });
     } else {
-      (0, _setElementDataset["default"])(_this.container, {
+      setElementDataset(_this.container, {
         size: _this.appSize
       });
     }
 
     // 监听播放情况：抛出触发时机
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.ended;
     }, function (ended) {
       if (ended) {
         _this.emit('paused', true);
       }
     });
-    (0, _mobx.reaction)(function () {
+    reaction(function () {
       return _this.playing;
     }, function (playing) {
       if (!_this.ended) {
@@ -163,27 +182,46 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
     });
     return _this;
   }
-  (0, _createClass2["default"])(Controller, [{
+
+  /**
+   * 获取播放器是否准备就绪
+   * @returns 是否有可用的视频代理场景
+   */
+  _createClass(Controller, [{
     key: "agentType",
     get:
     // null 表示加载失败
 
+    /**
+     * 获取当前播放媒体的类型
+     * @returns 'video' | 'avatar' | 'none' - 媒体类型
+     */
     function get() {
       var _this$videoAgentScene, _this$avatar;
-      var type = (0, _getMediaInfo.getMediaType)((_this$videoAgentScene = this.videoAgentScene) === null || _this$videoAgentScene === void 0 ? void 0 : _this$videoAgentScene.videoAgentMesh.videoUrl);
+      var type = getMediaType((_this$videoAgentScene = this.videoAgentScene) === null || _this$videoAgentScene === void 0 ? void 0 : _this$videoAgentScene.videoAgentMesh.videoUrl);
       if ((_this$avatar = this.avatar) !== null && _this$avatar !== void 0 && _this$avatar.force) return 'avatar';
       if (type === 'video') return 'video';
       return 'none';
     }
   }, {
     key: "openPopUp",
-    value: function openPopUp(popUp) {
+    value:
+    /**
+     * 打开或关闭弹窗
+     * @param popUp - 弹窗内容，可以是字符串、JSX元素或false（关闭弹窗）
+     */
+    function openPopUp(popUp) {
       if (!popUp) {
         this.popUp = null;
         return;
       }
       this.popUp = popUp;
     }
+
+    /**
+     * 设置加载状态
+     * @param loading - 加载状态：true（加载中）、false（加载完成）、null（加载失败）
+     */
   }, {
     key: "setLoading",
     value: function setLoading(loading) {
@@ -191,9 +229,20 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
     }
   }, {
     key: "setAvatar",
-    value: function setAvatar(avatar) {
+    value:
+    /**
+     * 设置虚拟形象配置
+     * @param avatar - 虚拟形象配置对象
+     */
+    function setAvatar(avatar) {
       this.avatar = avatar;
     }
+
+    /**
+     * 设置容器尺寸
+     * @param width - 容器宽度
+     * @param height - 容器高度
+     */
   }, {
     key: "setContainerSize",
     value: function setContainerSize(width, height) {
@@ -202,26 +251,51 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
         height: height
       };
     }
+
+    /**
+     * 设置播放器可见性
+     * @param v - 是否可见
+     */
   }, {
     key: "setVisible",
     value: function setVisible(v) {
       this.visible = v;
     }
+
+    /**
+     * 设置播放状态
+     * @param playing - 是否正在播放
+     */
   }, {
     key: "setPlaying",
     value: function setPlaying(playing) {
       this.playing = playing;
     }
+
+    /**
+     * 设置结束状态
+     * @param ended - 是否已结束
+     */
   }, {
     key: "setEnded",
     value: function setEnded(ended) {
       this.ended = ended;
     }
+
+    /**
+     * 设置播放器外观
+     * @param appearance - 外观配置对象
+     */
   }, {
     key: "setAppearance",
     value: function setAppearance(appearance) {
       this.appearance = _objectSpread(_objectSpread({}, this.appearance), appearance);
     }
+
+    /**
+     * 打开或关闭抽屉
+     * @param drawerConfig - 抽屉配置对象，false表示关闭抽屉
+     */
   }, {
     key: "openDrawer",
     value: function openDrawer(drawerConfig) {
@@ -240,12 +314,22 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
     get: function get() {
       return !!this.videoAgentScene;
     }
+
+    /**
+     * 获取当前播放时间（毫秒）
+     * @returns 当前播放时间戳
+     */
   }, {
     key: "currentTime",
     get: function get() {
       var _this$videoAgentScene2;
       return ((_this$videoAgentScene2 = this.videoAgentScene) === null || _this$videoAgentScene2 === void 0 ? void 0 : _this$videoAgentScene2.videoAgentMesh.currentTime) || 0;
     }
+
+    /**
+     * 获取当前时间点应该触发的关键帧
+     * @returns 当前应该执行的关键帧数组
+     */
   }, {
     key: "currentKeyframes",
     get: function get() {
@@ -259,12 +343,17 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
         if (keyframe.end < _this2.currentTime) return false;
         // 检测开始时间
         if (keyframe.start > _this2.currentTime) return false;
-        if (keyframe.type === _VreoUnit.VreoKeyframeEnum.BgMusic) return true;
+        if (keyframe.type === VreoKeyframeEnum.BgMusic) return true;
         // 开始时间低于当前时间戳 100ms
         var dur = _this2.currentTime - keyframe.start;
         return dur <= 100 && dur >= 0;
       });
     }
+
+    /**
+     * 获取当前媒体实例（音频或视频元素）
+     * @returns HTML媒体元素实例
+     */
   }, {
     key: "mediaInstance",
     get: function get() {
@@ -273,7 +362,10 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
     }
 
     /**
-     * 逐帧任务
+     * 逐帧任务循环处理
+     * 
+     * 在每个动画帧中检查播放状态、处理关键帧触发等
+     * @param callback - 关键帧触发时的回调函数
      */
   }, {
     key: "requestAnimationFrameLoop",
@@ -314,15 +406,28 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
         }
       });
     }
+
+    /**
+     * 开始运行播放器逻辑循环
+     * 
+     * 启动帧循环，持续监听并处理关键帧事件
+     * @param callback - 关键帧触发时的回调函数
+     */
   }, {
     key: "run",
     value: function run(callback) {
       var _this4 = this;
       if (this.stopInterval) return;
-      this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
+      this.stopInterval = requestAnimationFrameInterval(function () {
         return _this4.requestAnimationFrameLoop(callback);
       });
     }
+
+    /**
+     * 清理播放器状态
+     * 
+     * 停止播放、重置关键帧状态、清理数据和定时器
+     */
   }, {
     key: "clear",
     value: function clear() {
@@ -343,6 +448,12 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
       (_this$stopInterval = this.stopInterval) === null || _this$stopInterval === void 0 ? void 0 : _this$stopInterval.call(this);
       this.stopInterval = undefined;
     }
+
+    /**
+     * 销毁控制器实例
+     * 
+     * 清理所有状态和资源，释放内存
+     */
   }, {
     key: "dispose",
     value: function dispose() {
@@ -350,5 +461,6 @@ var Controller = exports.Controller = /*#__PURE__*/function (_Subscribe) {
     }
   }]);
   return Controller;
-}(_five.Subscribe);
-var ControllerContext = exports.ControllerContext = /*#__PURE__*/React.createContext(null);
+}(Subscribe);
+var ControllerContext = /*#__PURE__*/React.createContext(null);
+export { ControllerContext };

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

@@ -1,20 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SpatialScenePanel = SpatialScenePanel;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _three = require("three");
-var _BetterTween = require("../../../shared-utils/animationFrame/BetterTween");
-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); }
-// __debug__
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { Raycaster, Vector3 } from 'three';
+import { tweenProgress } from "../../../shared-utils/animationFrame/BetterTween.js";
+import { CSS3DRenderPlugin } from "../../../fivePlugins/CSS3DRenderPlugin/index.js";
+import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js"; // __debug__
 // const mockData: SpatialScenePanelData = {
 //   customType: 'SpatialScenePanel',
 //   "stateList": [
@@ -38,7 +28,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 //   "temperature": "27",
 //   "title": "沉浸式回家"
 // }
-
 // const getSphere = (position: Vector3, color = 0xffff00) => {
 //   const geometry = new SphereGeometry(0.05, 32, 16)
 //   const material = new MeshBasicMaterial({ color })
@@ -50,11 +39,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var searchV1 = function searchV1(_ref) {
   var five = _ref.five,
     dom = _ref.dom;
-  var cameraDirection = new _three.Vector3();
+  var cameraDirection = new Vector3();
   five.camera.getWorldDirection(cameraDirection);
   var cameraPosition = five.camera.position;
-  var _five$model$intersect = five.model.intersectRaycaster(new _three.Raycaster(cameraPosition, cameraDirection)),
-    _five$model$intersect2 = (0, _slicedToArray2["default"])(_five$model$intersect, 1),
+  var _five$model$intersect = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection)),
+    _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
     intersect = _five$model$intersect2[0];
   var point = five.project2d(intersect.point);
   var widescreen = window.innerWidth > 560 ? true : false;
@@ -67,10 +56,10 @@ var searchV1 = function searchV1(_ref) {
     top = rect.top,
     bottom = rect.bottom,
     right = rect.right;
-  var leftBottom = new _three.Vector3(left, bottom);
-  var leftTop = new _three.Vector3(left, top);
-  var rightTop = new _three.Vector3(right, top);
-  var rightBottom = new _three.Vector3(right, bottom);
+  var leftBottom = new Vector3(left, bottom);
+  var leftTop = new Vector3(left, top);
+  var rightTop = new Vector3(right, top);
+  var rightBottom = new Vector3(right, bottom);
   var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
     point.setX(point.x / window.innerWidth * 2 - (widescreen ? 1.25 : 1.75));
     point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
@@ -94,11 +83,11 @@ var searchV1 = function searchV1(_ref) {
  * 空间场景面板
  * @returns
  */
-function SpatialScenePanel(props) {
+export 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));
+  var rendererRef = React.useRef(CSS3DRenderPlugin(props.five));
   React.useEffect(function () {
     if (!ref.current) {
       return;
@@ -128,7 +117,7 @@ function SpatialScenePanel(props) {
         $css3DObject: css3DObject
       });
       if (!container) return;
-      _reactDom["default"].render(/*#__PURE__*/React.createElement(Panel, {
+      ReactDOM.render(/*#__PURE__*/React.createElement(Panel, {
         ref: function ref(_ref3) {
           return panelRef.current = _ref3;
         },
@@ -136,7 +125,7 @@ function SpatialScenePanel(props) {
       }), container);
       var startRotateY = -(Math.PI * 2) / 9;
       var lastRotateY = 0;
-      (0, _BetterTween.tweenProgress)(1000).onUpdate(function (_ref4) {
+      tweenProgress(1000).onUpdate(function (_ref4) {
         var progress = _ref4.progress;
         var needRotateY = Math.PI / 90 * 11 * progress;
         var rotateY = needRotateY - lastRotateY;
@@ -172,9 +161,9 @@ function SpatialScenePanel(props) {
     });
 
     // setTimeout(() => {callback()}, 8000)
-    props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
+    props.subscribe.on(VreoKeyframeEnum.Custom, callback);
     return function () {
-      props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);
+      props.subscribe.off(VreoKeyframeEnum.Custom, callback);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

package/lib/Player/hooks.js

@@ -1,29 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useController = useController;
-exports.useFiveInstance = useFiveInstance;
-exports.useFiveProject2d = useFiveProject2d;
-var _react = _interopRequireDefault(require("react"));
-var _Controller = require("./Controller");
-function useController() {
-  var controller = _react["default"].useContext(_Controller.ControllerContext);
+import React from 'react';
+import { ControllerContext } from "./Controller.js";
+export function useController() {
+  var controller = React.useContext(ControllerContext);
   if (!controller) {
     throw new Error('没有找到 "ControllerContext"');
   }
   return controller;
 }
-function useFiveInstance() {
+export function useFiveInstance() {
   var controller = useController();
   if (!controller.five) {
     throw new Error('没有找到 "five" 实例');
   }
   return controller.five;
 }
-function useFiveProject2d() {
+export function useFiveProject2d() {
   var five = useFiveInstance();
   return function (vector) {
     return five.project2d(vector, false);