@realsee/vreo 0.1.0

package/lib/shared-utils/animationFrame/BetterTween.js

@@ -0,0 +1,102 @@
+"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.BetterTween = void 0;
+exports.tweenProgress = tweenProgress;
+
+var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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; }
+
+var BetterTween = /*#__PURE__*/function (_TWEEN$Tween) {
+  _inherits(BetterTween, _TWEEN$Tween);
+
+  var _super = _createSuper(BetterTween);
+
+  function BetterTween() {
+    var _this;
+
+    _classCallCheck(this, BetterTween);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "disposeMethods", []);
+
+    _defineProperty(_assertThisInitialized(_this), "onDispose", function (callback) {
+      _this.disposeMethods.push(callback);
+
+      return _assertThisInitialized(_this);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "play", function () {
+      _this.start();
+
+      _this.animationFrameDisposer = (0, _.requestAnimationFrameInterval)(function () {
+        return _this.update();
+      });
+      return _assertThisInitialized(_this);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "dispose", function () {
+      var _this$animationFrameD, _this2;
+
+      _this.stop();
+
+      (_this$animationFrameD = (_this2 = _this).animationFrameDisposer) === null || _this$animationFrameD === void 0 ? void 0 : _this$animationFrameD.call(_this2);
+
+      _this.disposeMethods.forEach(function (fn) {
+        return fn();
+      });
+
+      _this.disposeMethods = [];
+
+      _tween["default"].remove(_assertThisInitialized(_this));
+    });
+
+    return _this;
+  }
+
+  return BetterTween;
+}(_tween["default"].Tween);
+
+exports.BetterTween = BetterTween;
+
+function tweenProgress(duration) {
+  var easing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _tween["default"].Easing.Linear.None;
+  var tween = new BetterTween({
+    progress: 0
+  }).to({
+    progress: 1
+  });
+  if (duration !== undefined) tween.duration(duration);
+  if (easing !== undefined) tween.easing(easing);
+  return tween;
+}

package/lib/shared-utils/animationFrame/index.d.ts

@@ -0,0 +1,15 @@
+declare const _requestAnimationFrame: ((callback: FrameRequestCallback) => number) & typeof requestAnimationFrame;
+export default _requestAnimationFrame;
+export declare function nextFrame(fn: FrameRequestCallback, delay?: number): void;
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+export declare function requestAnimationFrameInterval(callback?: (time: number) => any, frame?: number): () => void;
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+export declare function getFrameTime(): Promise<unknown>;

package/lib/shared-utils/animationFrame/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.getFrameTime = getFrameTime;
+exports.nextFrame = nextFrame;
+exports.requestAnimationFrameInterval = requestAnimationFrameInterval;
+
+var _requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+  return setTimeout(fn, 16);
+};
+
+var _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+
+var _default = _requestAnimationFrame;
+exports["default"] = _default;
+
+function nextFrame(fn) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (delay <= 0) _requestAnimationFrame(fn);else _requestAnimationFrame(function () {
+    return nextFrame(fn, delay - 1);
+  });
+}
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+
+
+function requestAnimationFrameInterval(callback) {
+  var frame = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var index = -1;
+  var oldTime = 0;
+  var startTime = -1;
+  var minDeltaTime = 1000 / frame;
+
+  function loop(time) {
+    startTime === -1 && (startTime = time);
+    index = _requestAnimationFrame(loop);
+    var deltaTime = time - oldTime;
+    if (deltaTime < minDeltaTime) return;
+    oldTime = time;
+    callback && callback(time - startTime);
+  }
+
+  index = _requestAnimationFrame(loop);
+  return function stop() {
+    _cancelAnimationFrame(index);
+  };
+}
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+
+
+function getFrameTime() {
+  var start = Date.now();
+  return new Promise(function (resolve) {
+    _requestAnimationFrame(function () {
+      resolve(Date.now() - start);
+    });
+  });
+}

package/lib/shared-utils/animationFrame/tween.d.ts

@@ -0,0 +1,75 @@
+import * as TWEEN from '@tweenjs/tween.js';
+export declare const Easing: {
+    Linear: {
+        None: (amount: number) => number;
+    };
+    Quadratic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Cubic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quartic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quintic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Sinusoidal: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Exponential: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Circular: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Elastic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Back: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Bounce: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+};
+interface ITween<T> extends TWEEN.Tween<T> {
+    onDestroy: (fn: () => void) => TWEEN.Tween<T>;
+    destroy: () => void;
+}
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+export default function tween<T>(from: T, to: T, duration: number, easing?: (amount: number) => number): ITween<T>;
+export declare function tweenProgress(duration: number, easing: typeof Easing.Linear.None): ITween<{
+    progress: number;
+}>;
+export {};

package/lib/shared-utils/animationFrame/tween.js

@@ -0,0 +1,76 @@
+"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.Easing = void 0;
+exports["default"] = tween;
+exports.tweenProgress = tweenProgress;
+
+var TWEEN = _interopRequireWildcard(require("@tweenjs/tween.js"));
+
+var _index = require("./index");
+
+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 Easing = TWEEN.Easing;
+exports.Easing = Easing;
+
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+function tween(from, to, duration) {
+  var easing = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Easing.Linear.None;
+  var tween = new TWEEN.Tween(from).to(to, duration).easing(easing); // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
+
+  (0, _index.nextFrame)(function () {
+    return tween.start(0);
+  });
+  var cancelAnimationFrame = (0, _index.requestAnimationFrameInterval)(function (time) {
+    if (tween.update(time) === false) cancelAnimationFrame();
+  });
+  var destroyMethods = [];
+
+  tween.onDestroy = function (fn) {
+    destroyMethods.push(fn);
+    return tween;
+  };
+
+  tween.destroy = function () {
+    this.stop();
+    Object.assign(tween, {
+      _onStartCallback: null,
+      _onUpdateCallback: null,
+      _onCompleteCallback: null,
+      _onStopCallbackL: null
+    });
+    var destroyMethod;
+
+    while (destroyMethod = destroyMethods.shift()) {
+      destroyMethod();
+    }
+
+    cancelAnimationFrame();
+  };
+
+  return tween;
+}
+
+function tweenProgress(duration, easing) {
+  return tween({
+    progress: 0
+  }, {
+    progress: 1
+  }, duration, easing);
+}

package/lib/typings/VreoUnit.d.ts

@@ -0,0 +1,204 @@
+import { Mode, Pose, WorkCubeImage } from '@realsee/five';
+import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings';
+export declare enum VreoKeyframeEnum {
+    /** 运镜 */
+    CameraMovement = "CameraMovement",
+    /**
+     * 全景标签
+     */
+    PanoTag = "PanoTag",
+    /**
+     * 全景文本标签
+     */
+    PanoTextLabel = "PanoTextLabel",
+    /**
+     * 提词器
+     */
+    Prompter = "Prompter",
+    /**
+     * 更新 VR 全景
+     */
+    UpdateVRPanorama = "UpdateVRPanorama",
+    /**
+     * 视频广告
+     */
+    ModelVideo = "ModelVideo",
+    /**
+     * 全景特效
+     */
+    PanoEffect = "PanoEffect",
+    /**
+     * 信息面板
+     */
+    InfoPanel = "InfoPanel",
+    /**
+     * 视频特效
+     */
+    VideoEffect = "VideoEffect",
+    /**
+     * 结束
+     */
+    Exit = "Exit"
+}
+/**
+ * 支持自定义剧本关键帧配置项
+ */
+export declare type VreoKeyframeConfigMap = {
+    PanoTag?: false;
+    PanoTextLabel?: false;
+    Prompter?: false;
+    InfoPanel?: false;
+};
+/**
+ * 剧本关键帧
+ */
+export interface VreoKeyframe {
+    type: VreoKeyframeEnum;
+    start: number;
+    end: number;
+    parsed?: boolean;
+    data: Record<string, any>;
+}
+/**
+ * 虚拟视频角色
+ */
+export interface VreoVideo {
+    duration: number;
+    start: number;
+    end: number;
+    url: string;
+}
+/**
+ * 剧本结构
+ */
+export interface VreoUnit {
+    categoryId: string;
+    categoryText: string;
+    frontRequestId: string;
+    index: string | number;
+    keyframes: VreoKeyframe[];
+    video: VreoVideo;
+}
+/**
+ * 剧本事件
+ */
+export declare type VreoKeyframeEvent = {
+    [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void;
+} & {
+    paused: () => void;
+    playing: () => void;
+};
+/**
+ * 相机运动
+ */
+export declare type CameraMovementData = {
+    effect: CameraMovementEffect;
+    mode: Mode;
+    panoIndex: number;
+    loop?: boolean;
+    rotateSpeed?: number;
+    rotation?: Rotation;
+} & Partial<Pose>;
+/**
+ * 提词器
+ */
+export declare type PrompterData = {
+    text: string;
+};
+/**
+ * VR 全景切换
+ */
+export declare type UpdateVRPanoramaData = {
+    panoIndex: number;
+    images: WorkCubeImage;
+};
+/**
+ * 顶点
+ */
+export interface Vertex {
+    x: number;
+    y: number;
+    z: number;
+}
+/**
+ * 四个顶点元组
+ */
+export declare type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex];
+/**
+ * 视频广告
+ */
+export declare type ModelVideoData = {
+    /**
+     * 视频素材
+     */
+    videoSrc: string;
+    /**
+     * 视频封面
+     */
+    videoPosterSrc: string;
+    /**
+     * 视频映射在模型中的顶点
+     */
+    vertexs: QuadrangleVertexs;
+};
+/**
+ * 全景文本标签
+ */
+export declare type PanoTextLabelData = {
+    text: string;
+    vertex: Vertex;
+    fontSize?: number;
+};
+/**
+ * 全景标签枚举
+ */
+export declare enum PanoTagEnum {
+    Text = "Text",
+    Image = "Image"
+}
+export declare type PanoTagData = {
+    type: PanoTagEnum;
+    text: string;
+    vertex: Vertex;
+    imgUrl?: string;
+};
+/**
+ * 全景特效枚举
+ */
+export declare enum PanoEffectEnum {
+    /**
+     * 两点距离
+     */
+    Distance = "Distance"
+}
+/**
+ * 全景特效
+ */
+export declare type PanoEffectData = {
+    effect: PanoEffectEnum;
+    twoVertexs: [Vertex, Vertex];
+};
+/**
+ * 信息面板类型枚举
+ */
+export declare enum InfoPanelTypeEnum {
+    Image = "Image",
+    Video = "Video"
+}
+/**
+ * 信息面板
+ */
+export declare type InfoPanelData = {
+    type: InfoPanelTypeEnum;
+    url: string;
+};
+/**
+ * 视频特效
+ */
+export declare type VideoEffectData = {
+    videoSrc: string;
+    panoIndex: number;
+    fov: number;
+    direction?: Vertex;
+    vector?: Pick<Pose, 'longitude' | 'latitude'>;
+};

package/lib/typings/VreoUnit.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = void 0;
+var VreoKeyframeEnum;
+/**
+ * 支持自定义剧本关键帧配置项
+ */
+
+exports.VreoKeyframeEnum = VreoKeyframeEnum;
+
+(function (VreoKeyframeEnum) {
+  VreoKeyframeEnum["CameraMovement"] = "CameraMovement";
+  VreoKeyframeEnum["PanoTag"] = "PanoTag";
+  VreoKeyframeEnum["PanoTextLabel"] = "PanoTextLabel";
+  VreoKeyframeEnum["Prompter"] = "Prompter";
+  VreoKeyframeEnum["UpdateVRPanorama"] = "UpdateVRPanorama";
+  VreoKeyframeEnum["ModelVideo"] = "ModelVideo";
+  VreoKeyframeEnum["PanoEffect"] = "PanoEffect";
+  VreoKeyframeEnum["InfoPanel"] = "InfoPanel";
+  VreoKeyframeEnum["VideoEffect"] = "VideoEffect";
+  VreoKeyframeEnum["Exit"] = "Exit";
+})(VreoKeyframeEnum || (exports.VreoKeyframeEnum = VreoKeyframeEnum = {}));
+
+/**
+ * 全景标签枚举
+ */
+var PanoTagEnum;
+exports.PanoTagEnum = PanoTagEnum;
+
+(function (PanoTagEnum) {
+  PanoTagEnum["Text"] = "Text";
+  PanoTagEnum["Image"] = "Image";
+})(PanoTagEnum || (exports.PanoTagEnum = PanoTagEnum = {}));
+
+/**
+ * 全景特效枚举
+ */
+var PanoEffectEnum;
+/**
+ * 全景特效
+ */
+
+exports.PanoEffectEnum = PanoEffectEnum;
+
+(function (PanoEffectEnum) {
+  PanoEffectEnum["Distance"] = "Distance";
+})(PanoEffectEnum || (exports.PanoEffectEnum = PanoEffectEnum = {}));
+
+/**
+ * 信息面板类型枚举
+ */
+var InfoPanelTypeEnum;
+/**
+ * 信息面板
+ */
+
+exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
+
+(function (InfoPanelTypeEnum) {
+  InfoPanelTypeEnum["Image"] = "Image";
+  InfoPanelTypeEnum["Video"] = "Video";
+})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@realsee/vreo",
+  "version": "0.1.0",
+  "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
+  "main": "lib/index.js",
+  "author": "BEIKE REALSEE TECHNOLOGY (HK) LIMITED",
+  "license": "MIT",
+  "private": false,
+  "files": [
+    "lib",
+    "resources",
+    "docs",
+    "stylesheets",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite --port=3088",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "docs": "npx typedoc",
+    "packages": "node ./dev-tools/build-packages.js"
+  },
+  "peerDependencies": {
+    "@realsee/five": "^5.0.0-alpha.53",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@realsee/five": "^5.0.0-alpha.57",
+    "@types/offscreencanvas": "^2019.6.4",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
+    "@vitejs/plugin-react": "^1.1.0",
+    "del": "^6.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "three": "^0.117.1",
+    "typedoc": "^0.22.10",
+    "typescript": "^4.5.2",
+    "vite": "^2.6.14"
+  },
+  "dependencies": {
+    "@tweenjs/tween.js": "18.6.4",
+    "classnames": "^2.3.1",
+    "mobx": "^6.3.7",
+    "mobx-react": "^7.2.1",
+    "react-transition-group": "^4.4.2"
+  }
+}