@realsee/vreo 0.1.0

package/resources/shared-utils/animationFrame/index.ts

@@ -0,0 +1,48 @@
+const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16))
+
+const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout
+
+export default _requestAnimationFrame
+
+export function nextFrame(fn: FrameRequestCallback, delay = 0) {
+  if (delay <= 0) _requestAnimationFrame(fn)
+  else _requestAnimationFrame(() => nextFrame(fn, delay - 1))
+}
+
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+export function requestAnimationFrameInterval(callback?: (time: number) => any, frame = 60) {
+  let index = -1
+  let oldTime = 0
+  let startTime = -1
+  const minDeltaTime = 1000 / frame
+  function loop(time: number) {
+    startTime === -1 && (startTime = time)
+    index = _requestAnimationFrame(loop)
+    const 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 间隔的时间
+ */
+export function getFrameTime() {
+  const start = Date.now()
+  return new Promise((resolve) => {
+    _requestAnimationFrame(() => {
+      resolve(Date.now() - start)
+    })
+  })
+}

package/resources/shared-utils/animationFrame/tween.ts

@@ -0,0 +1,51 @@
+import * as TWEEN from '@tweenjs/tween.js'
+import { nextFrame, requestAnimationFrameInterval } from './index'
+
+export const Easing = TWEEN.Easing
+
+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 = Easing.Linear.None) {
+  const tween = new TWEEN.Tween(from).to(to, duration).easing(easing) as ITween<T>
+  // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
+  nextFrame(() => tween.start(0))
+
+  const cancelAnimationFrame = requestAnimationFrameInterval((time) => {
+    if (tween.update(time) === false) cancelAnimationFrame()
+  })
+  const destroyMethods: ((...params: any) => any)[] = []
+  tween.onDestroy = (fn) => {
+    destroyMethods.push(fn)
+    return tween
+  }
+  tween.destroy = function () {
+    this.stop()
+    Object.assign(tween, {
+      _onStartCallback: null,
+      _onUpdateCallback: null,
+      _onCompleteCallback: null,
+      _onStopCallbackL: null,
+    })
+    let destroyMethod: undefined | ((...params: any) => any)
+    while ((destroyMethod = destroyMethods.shift())) destroyMethod()
+    cancelAnimationFrame()
+  }
+  return tween
+}
+
+export function tweenProgress(duration: number, easing: typeof Easing.Linear.None) {
+  return tween({ progress: 0 }, { progress: 1 }, duration, easing)
+}

package/resources/typings/VreoUnit.ts

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