@realsee/vreo 0.1.6 → 0.2.0-alpha.11

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -1,4 +1,4 @@
-import { Five } from '@realsee/five'
+import { Five, MovePanoOptions } from '@realsee/five'
 import type { FivePlugin } from '@realsee/five'
 import * as TWEEN from '@tweenjs/tween.js'
 
@@ -50,63 +50,73 @@ function progressNumber(from: number, to: number, pst: number) {
 export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType> = (
   five: Five,
 ) => {
-  const move = async (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
-    if (opts.asyncStartCallback) {
-      opts.asyncStartCallback()
-    }
+  const move = (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
+    return new Promise<boolean>(async (resolve, reject) => {
+
+      if (opts.asyncStartCallback) {
+        opts.asyncStartCallback()
+      }
+
+      if (five.panoIndex === undefined) {
+        return reject(false)
+      }
 
-    if (args.mode && args.mode !== five.currentMode) {
-      await new Promise((resolve) => {
-        if (!args.mode) return
-        five.once('modeChange', (mode) => {
-          five.once('initAnimationEnded', () => {
-            if (mode === args.mode) {
-              resolve(true)
-            }
+      if (args.mode && args.mode !== five.currentMode) {
+        await new Promise((resolve) => {
+          if (!args.mode) return
+          five.once('modeChange', (mode) => {
+            five.once('initAnimationEnded', () => {
+              if (mode === args.mode) {
+                resolve(true)
+              }
+            })
+          })
+          five.changeMode(args.mode, {
+            fov: args.fov || undefined,
+            latitude: args.latitude || undefined,
+            longitude: args.longitude || undefined,
+            panoIndex: args.panoIndex || undefined,
           })
         })
-        five.changeMode(args.mode, {
-          fov: args.fov || undefined,
-          latitude: args.latitude || undefined,
-          longitude: args.longitude || undefined,
-          panoIndex: args.panoIndex || undefined,
-        })
-      })
-    }
+      }
 
-    if (args.mode === Five.Mode.Floorplan) {
-      return true
-    }
+      if (args.mode === Five.Mode.Floorplan) {
+        return resolve(true)
+      }
 
-    if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
-      await five.preloadPano(args.panoIndex)
-    }
+      if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+        await five.preloadPano(args.panoIndex)
+      }
+
+      if (opts.asyncEndCallback) {
+        opts.asyncEndCallback()
+      }
+
+      if (
+        args.panoIndex === undefined &&
+        args.fov === undefined &&
+        args.latitude === undefined &&
+        args.longitude === undefined
+      ) {
+        return resolve(true)
+      }
 
-    if (opts.asyncEndCallback) {
-      opts.asyncEndCallback()
-    }
 
-    if (
-      args.panoIndex === undefined &&
-      args.fov === undefined &&
-      args.latitude === undefined &&
-      args.longitude === undefined
-    ) {
-      return true
-    }
-    return await new Promise<boolean>((resolve, reject) => {
       const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex
+
       if (panoIndex !== undefined) {
-        five.moveToPano(
+        const movePanoOptions: MovePanoOptions = Object.assign(args, {
+          duration, // 移动耗时
+          moveEndCallback: () => resolve(true), // 移动结束
+          moveCancelCallback: () => {
+            resolve(true)
+          }, // 移动开始
+          // effect: args.transEffect || 'fade',
+        })
+
+        await five.moveToPano(
           panoIndex,
-          Object.assign(
-            {
-              duration, // 移动耗时
-              moveEndCallback: () => resolve(true), // 移动结束
-              moveCancelCallback: () => reject(false), // 移动开始
-            },
-            args,
-          ),
+          movePanoOptions,
         )
       } else {
         reject(false)
@@ -154,6 +164,7 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
         five.moveToPano(args.panoIndex, {
           moveEndCallback: () => resolve(true), // 移动结束
           moveCancelCallback: () => reject(false), // 移动开始
+          effect: 'fade',
         })
       })
     }

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-import { Mode, Pose } from '@realsee/five'
+import { Mode, MovePanoOptions, Pose } from '@realsee/five'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface CameraMovementPluginParameterType { }
@@ -39,6 +39,7 @@ export interface CameraMovementOptsCallback {
 export type MoveArgs = {
   mode: Mode
   panoIndex: number
+  transEffect?: "fly" | "fade" | "instant"
 } & Pose
 
 export type MoveOpts = {

package/resources/react/index.tsx

@@ -1,18 +1,23 @@
 import { unsafe__useFiveInstance } from '@realsee/five/react'
 import * as React from 'react'
 import { Player } from '../Player'
+import { PlayerConfigs } from '../Player/typings'
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 
 const VreoContext = React.createContext<Player | null>(null)
 
-export const VreoProvider: React.FC = (props) => {
+export interface VreoProviderProps {
+  configs?: Partial<PlayerConfigs>
+} 
+
+export const VreoProvider: React.FC<VreoProviderProps> = (props ) => {
   const five = unsafe__useFiveInstance()
 
   const [player, setPlayer] = React.useState<Player | null>(null)
   const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    playerRef.current = new Player(five)
+    playerRef.current = new Player(five, props.configs || {})
     setPlayer(playerRef.current)
 
     return () => {
@@ -40,8 +45,12 @@ function useVreoInstance() {
 export interface VreoActionCallbacks {
   /**
    * 载入剧本数据。
+   * @param vreoUnit 剧本数据
+   * @param currentTime 开始时间戳
+   * @param preload 是否开启预载
+   * @param force 是否强制载入
    */
-  load: (vreoUnit: VreoUnit, currentTime?: number) => Promise<boolean>
+  load: (vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean) => Promise<boolean>
   /**
    * 播放。
    */

package/resources/shared-utils/createTransMatrix.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three'
+
+export function createTransMatrix(arr1: number[]) {
+  const matrix4 = new THREE.Matrix4()
+  matrix4.fromArray(arr1)
+
+  return (arr2: number[]) => {
+    const vector3 = new THREE.Vector3(...arr2)
+    vector3.applyMatrix4(matrix4)
+    return vector3.toArray()
+  }
+}

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage } from '@realsee/five'
+import { Mode, MovePanoOptions, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -36,6 +36,10 @@ export enum VreoKeyframeEnum {
    * 视频特效
    */
   VideoEffect = 'VideoEffect',
+  /**
+   * 背景音乐
+   */
+  BgMusic = 'BgMusic',
   /**
    * 结束
    */
@@ -61,6 +65,7 @@ export type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
+  uuid?: string
   type: VreoKeyframeEnum
   start: number
   end: number
@@ -96,15 +101,22 @@ export interface VreoUnit {
  * 剧本事件
  */
 export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void } & {
-  paused: () => void
+  // 新数据载入完成
+  loaded: (vreoUnit: VreoUnit) => void
+  // 语音状态 播放 -> 暂停
+  paused: (ended?: boolean) => void
+  // 语音状态 暂停 -> 播放
   playing: () => void
+  // 未知的 剧本帧类型
+  unknownKeyframeType: (keyframe: Record<string, any>) => void
 }
 
 /**
  * 相机运动
  */
 export type CameraMovementData = {
-  effect: CameraMovementEffect
+  effect?: CameraMovementEffect
+  transEffect?: "fly" | "fade" | "instant"
   mode: Mode
   panoIndex: number
   loop?: boolean
@@ -123,8 +135,23 @@ export type PrompterData = {
  * VR 全景切换
  */
 export type UpdateVRPanoramaData = {
-  panoIndex: number
-  images: WorkCubeImage
+  _signature: string
+  allow_hosts: string[]
+  certificate: string
+  expire_at: string
+  // 动态场景
+  dynamic_scene?: {
+    images: {
+      index: number
+      right: string
+      left: string
+      up: string
+      down: string
+      front: string
+      back: string
+    }
+  }
+  [key: string]: any
 }
 
 /**
@@ -137,9 +164,13 @@ export interface Vertex {
 }
 
 /**
- * 四个顶点元组
+ * 矩形顶点
  */
 export type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex]
+/**
+ * 顶点数组
+ */
+export type Vertexs = Vertex[]
 
 /**
  * 视频广告
@@ -156,7 +187,8 @@ export type ModelVideoData = {
   /**
    * 视频映射在模型中的顶点
    */
-  vertexs: QuadrangleVertexs
+  vertexs: QuadrangleVertexs | Vertexs
+  matrixWorld?: number[]
 }
 
 /**
@@ -209,12 +241,22 @@ export enum InfoPanelTypeEnum {
   Video = 'Video',
 }
 
+export enum InfoPanelStyleEnum {
+  Drawer = 'Drawer',
+  PopUp = 'PopUp',
+}
+
 /**
  * 信息面板
  */
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
+  style?: InfoPanelStyleEnum
   url: string
+  // 标题
+  title?: string
+  // 副标题
+  subTitle?: string
 }
 
 /**
@@ -228,5 +270,12 @@ export type VideoEffectData = {
   vector?: Pick<Pose, 'longitude' | 'latitude'>
 }
 
+/**
+ * 背景音乐
+ */
+export type BgMusicData = {
+  url: string
+}
+
 /** 自定义序列帧 */
 export type CustomData = Record<string, any>

package/stylesheets/custom/SpatialScenePanel.css

@@ -0,0 +1,309 @@
+@keyframes SpatialScenePanel-panel-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -330rem 0
+  }
+}
+
+
+@keyframes SpatialScenePanel-opacity-animation {
+  0% {
+      opacity: .3
+  }
+
+  100% {
+      opacity: 1
+  }
+}
+
+@keyframes SpatialScenePanel-dot-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -31.25rem 0
+  }
+}
+
+@keyframes SpatialScenePanel-line-sprites-animation {
+  0% {
+      background-position: 0 0
+  }
+
+  100% {
+      background-position: -9.583333333333334rem 0
+  }
+}
+
+.vreo-SpatialScenePanel {
+  width: 10rem;
+  height: 13.4375rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  user-select: none
+}
+
+.SpatialScenePanel {
+  width: 10rem;
+  height: 13.4375rem;
+  transform: scale3d(1,1,1);
+  transform-origin: center;
+  position: fixed;
+  left: 3rem;
+  top: 3rem;
+}
+
+.SpatialScenePanel-show-area {
+  width: 100%;
+  height: 100%;
+  transform: scale3d(1,1,1);
+  transform-origin: center;
+  position: absolute
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-bg {
+  width: 10rem;
+  height: 13.4375rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
+  background-size: 340rem 13.4375rem;
+  background-repeat: no-repeat;
+  z-index: -1;
+}
+
+.SpatialScenePanel-bg--animation {
+  /* animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal; */
+  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0.5s steps(33) normal;
+}
+
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header {
+  width: 7.5rem;
+  height: 1.375rem;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/title-bg.377af865.png");
+  background-size: 100%;
+  margin: 1.875rem auto 1.25rem auto;
+  background-image: linear-gradient(to left, rgba(234, 208, 154, 0), rgb(255 229 176 / 21%) 47%, rgba(234, 208, 154, 0));
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 2px;
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-title {
+  font-family: PingFangSC-Medium;
+  font-size: 1.0625rem;
+  color: #ffe5b0;
+  letter-spacing: 0;
+  line-height: 1.125;
+  text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-header .SpatialScenePanel-temperature {
+  font-family: PingFangSC-Semibold;
+  font-size: .625rem;
+  color: rgba(255,229,176,0.6);
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
+  align-self: flex-end
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body {
+  position: relative;
+  padding: 0 1.25rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  width: 100%
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-text {
+  opacity: .3;
+  font-family: PingFangSC-Regular;
+  font-size: .75rem;
+  color: #fff;
+  letter-spacing: 0;
+  line-height: .75rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-icon {
+  opacity: .3;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  flex-shrink: 0
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot {
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: -.625rem
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot::before {
+  display: block;
+  position: absolute;
+  width: .25rem;
+  height: .25rem;
+  background: #c3d5ff;
+  opacity: .3;
+  content: '';
+  z-index: 1;
+  border-radius: 100%
+}
+
+.SpatialScenePanel-show-area .SpatialScenePanel-body .SpatialScenePanel-dot::after {
+  display: block;
+  position: absolute;
+  content: '';
+  z-index: 2
+}
+
+.SpatialScenePanel.show .SpatialScenePanel-disappear-area {
+  display: none
+}
+
+.SpatialScenePanel.show .SpatialScenePanel-show-area {
+  transform: scale3d(1,1,1);
+  transition: -webkit-transform 1s linear;
+  transition: transform 1s linear;
+  transition: transform 1s linear, -webkit-transform 1s linear
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 1s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 1s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_0 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 1s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 2s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 2s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_1 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 2s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 3s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 3s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_2 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 3s steps(15) 1 normal
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-text,.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-icon {
+  animation: SpatialScenePanel-opacity-animation 1s 4s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-dot::before {
+  animation: SpatialScenePanel-opacity-animation 1s 4s 1 normal forwards
+}
+
+.SpatialScenePanel .SpatialScenePanel-body .SpatialScenePanel-item.index_3 .SpatialScenePanel-dot::after {
+  width: 2.083333333333333rem;
+  height: 2.083333333333333rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/dot.54b5e078.png");
+  background-size: 33.333333333333336rem 2.083333333333333rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-dot-sprites-animation 1s 4s steps(15) 1 normal
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-show-area {
+  transform: scale3d(0,1,1);
+  transition: transform 150ms linear;
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
+  display: -ms-flexbox;
+  display: flex;
+  width: 1.25rem;
+  height: 13.4375rem;
+  justify-content: center;
+  align-items: center
+}
+
+.SpatialScenePanel.hide .SpatialScenePanel-disappear-area::after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  width: .4166666666666667rem;
+  height: 11.666666666666666rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/line.4ac1c0bb.png");
+  background-size: 10rem 11.666666666666666rem;
+  background-repeat: no-repeat;
+  animation: SpatialScenePanel-line-sprites-animation 500ms 100ms steps(23) 1 normal
+}
+