@realsee/vreo 0.2.0-alpha.2 → 0.2.0-alpha.21-beta

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'
 
@@ -20,7 +20,8 @@ function formatLatitude(rad: number) {
   return rad % PI_2
 }
 function formatLongitude(rad: number) {
-  return ((rad % PI_2) + PI_2) % PI_2
+  // return ((rad % PI_2) + PI_2) % PI_2
+  return rad % PI_2
 }
 
 const getLongitudeParams = (from: number, to: number, rotation: Rotation): { from: number; to: number } => {
@@ -29,9 +30,11 @@ const getLongitudeParams = (from: number, to: number, rotation: Rotation): { fro
   from = formatLongitude(from)
   to = formatLongitude(to)
   // 逆时针旋转，初始值必须是较大的值
-  if (rotation === Rotation.Anticlockwise && from < to) from += PI_2
+  if (rotation === Rotation.Anticlockwise && from > to) from += PI_2
+
   // 顺时针旋转，结束值必须是较大值
-  if (rotation === Rotation.Clockwise && to < from) to += PI_2
+  if (rotation === Rotation.Clockwise && to > from) to += PI_2
+
   // Loop 旋转，找锐角旋转
   // 如果 to 比 from 大 180°，逆时针转
   // 如果 from 比 to 大 180°，顺时针转
@@ -50,63 +53,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 (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 (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)
+              }
+            })
+          })
+          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 +167,7 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
         five.moveToPano(args.panoIndex, {
           moveEndCallback: () => resolve(true), // 移动结束
           moveCancelCallback: () => reject(false), // 移动开始
+          effect: 'fade',
         })
       })
     }
@@ -166,7 +180,7 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
     return await new Promise<boolean>((resolve, reject) => {
       const onUpdate = ({ progress }: { progress: number }) => {
         const state: Record<string, number> = {}
-        state.longitude = progressNumber(from.longitude, to.longitude, progress)
+        state.longitude = progressNumber(from.longitude, to.longitude, progress) % PI_2
         state.latitude = progressNumber(from.latitude, to.latitude, progress)
         state.fov = progressNumber(from.fov, to.fov, progress)
         five.setState(state, true)

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

@@ -45,12 +45,16 @@ 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>
   /**
    * 播放。
    */
-  play: () => void
+  play: (currentTime?: number) => void
   /**
    * 暂停。
    */
@@ -77,7 +81,7 @@ export function useVreoAction() {
     [player]
   )
 
-  const play = React.useCallback(() => player.play(), [player])
+  const play = React.useCallback((currentTime?: number) => player.play(currentTime || 0), [player])
   const pause = React.useCallback(() => player.pause(), [player])
   const show = React.useCallback(() => player.show(), [player])
   const hide = React.useCallback(() => player.hide(), [player])

package/resources/shared-utils/AduioLike.ts

@@ -0,0 +1,108 @@
+import { Subscribe } from '@realsee/five'
+import { requestAnimationFrameInterval } from './animationFrame'
+
+/**
+ * 模拟 `<Audio>` 事件。
+ */
+export type AudioLikeEvent = {
+  // 播放
+  play: () => void
+  // 语音状态 播放 -> 暂停
+  pause: () => void
+  // 语音时间刷新
+  timeupdate: () => void
+  // 播放
+  ended: () => void
+}
+
+
+/**
+ * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
+ */
+export class AudioLike extends Subscribe<AudioLikeEvent> {
+  private $timestamp = 0
+  private $currentTime = 0
+  private $duration = 0
+  private stopInterval?: () => void
+  muted = false
+  src = ''
+
+  setAttribute(name: string, value: string) {
+    // nothing todo
+  }
+
+  constructor({ duration }: { duration?: number } = {}) {
+    super()
+    if (duration) {
+      this.$duration = duration
+    }
+  }
+
+  play() {
+    if (this.$timestamp === 0) {
+      this.$timestamp = performance.now()
+    }
+    if (this.$currentTime === this.$duration) {
+      this.$currentTime = 0
+    }
+    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
+    this.emit('play')
+  }
+
+  pause() {
+    if (this.stopInterval) {
+      this.stopInterval()
+      this.emit('pause')
+      this.stopInterval = undefined
+    }
+    this.$timestamp = 0
+  }
+
+  requestAnimationFrameLoop() {
+    const now = performance.now()
+    this.$currentTime = now - this.$timestamp
+    this.emit('timeupdate')
+    if (this.$currentTime >= this.$duration - 10) {
+      this.$currentTime = this.$duration
+      this.pause()
+      this.emit('ended')
+    }
+  }
+
+  get currentTime() {
+    return this.$currentTime / 1000
+  }
+
+  set currentTime(time: number) {
+    this.$currentTime = time
+  }
+
+  get duration() {
+    return this.$duration
+  }
+
+  set duration(duration: number) {
+    this.pause()
+    this.$duration = duration
+    this.$timestamp = 0
+    this.$currentTime = 0
+  }
+
+  get ended() {
+    return this.$currentTime === this.$duration
+  }
+
+  get paused() {
+    return !this.stopInterval
+  }
+
+  addEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.on(evtName, callback)
+  }
+
+  removeEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.off(evtName, callback)
+  }
+}
+
+export default AudioLike

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

@@ -65,7 +65,7 @@ export type VreoKeyframeConfigMap = {
  * 剧本关键帧
  */
 export interface VreoKeyframe {
-  uuid: string
+  uuid?: string
   type: VreoKeyframeEnum
   start: number
   end: number
@@ -104,18 +104,21 @@ export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyf
   // 新数据载入完成
   loaded: (vreoUnit: VreoUnit) => void
   // 语音状态 播放 -> 暂停
-  paused: () => void
+  paused: (ended?: boolean) => void
   // 语音状态 暂停 -> 播放
   playing: () => void
   // 未知的 剧本帧类型
   unknownKeyframeType: (keyframe: Record<string, any>) => void
+  // 一次播放完成（试用，只抛事件不做任何额外的逻辑处理）
+  ended: () => void
 }
 
 /**
  * 相机运动
  */
 export type CameraMovementData = {
-  effect: CameraMovementEffect
+  effect?: CameraMovementEffect
+  transEffect?: "fly" | "fade" | "instant"
   mode: Mode
   panoIndex: number
   loop?: boolean
@@ -163,9 +166,13 @@ export interface Vertex {
 }
 
 /**
- * 四个顶点元组
+ * 矩形顶点
  */
 export type QuadrangleVertexs = [Vertex, Vertex, Vertex, Vertex]
+/**
+ * 顶点数组
+ */
+export type Vertexs = Vertex[]
 
 /**
  * 视频广告
@@ -182,7 +189,18 @@ export type ModelVideoData = {
   /**
    * 视频映射在模型中的顶点
    */
-  vertexs: QuadrangleVertexs
+  vertexs: QuadrangleVertexs | Vertexs
+  matrixWorld?: number[]
+}
+
+/**
+ * 四元数
+ */
+export type Quaternion = {
+  x: number,
+  y: number,
+  z: number,
+  w: number
 }
 
 /**
@@ -191,6 +209,8 @@ export type ModelVideoData = {
 export type PanoTextLabelData = {
   text: string
   vertex: Vertex
+  normal?: Vertex
+  quaternion?: Quaternion
   fontSize?: number
 }
 
@@ -202,8 +222,23 @@ export enum PanoTagEnum {
   Image = 'Image',
 }
 
+/**
+ * 标签样式种类
+ */
+export enum PanoTagStyleEnum {
+  /**
+   * 生长动画：默认值
+   */
+  Growth = 'Growth',
+  /**
+   * 展开动画
+   */
+  Expand = 'Expand',
+}
+
 export type PanoTagData = {
   type: PanoTagEnum
+  style: PanoTagStyleEnum
   text: string
   vertex: Vertex
   imgUrl?: string
@@ -235,11 +270,17 @@ export enum InfoPanelTypeEnum {
   Video = 'Video',
 }
 
+export enum InfoPanelStyleEnum {
+  Drawer = 'Drawer',
+  PopUp = 'PopUp',
+}
+
 /**
  * 信息面板
  */
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
+  style?: InfoPanelStyleEnum
   url: string
   // 标题
   title?: string

package/stylesheets/custom/SpatialScenePanel.css

@@ -77,9 +77,15 @@
   background-image: url("//vrlab-static.ljcdn.com/release/web/VoiceAssistant/images/panel-min.7d9ba2b7.png");
   background-size: 340rem 13.4375rem;
   background-repeat: no-repeat;
-  animation: SpatialScenePanel-panel-sprites-animation 1.375s 0s steps(33) infinite normal
+  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;
@@ -89,7 +95,9 @@
   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;
-  padding-bottom: .25rem
+  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 {
@@ -97,7 +105,7 @@
   font-size: 1.0625rem;
   color: #ffe5b0;
   letter-spacing: 0;
-  line-height: 1.0625rem;
+  line-height: 1.125;
   text-shadow: 0 0 1.25rem rgba(0,0,0,0.15)
 }
 
@@ -106,7 +114,7 @@
   font-size: .625rem;
   color: rgba(255,229,176,0.6);
   letter-spacing: 0;
-  line-height: .625rem;
+  line-height: 1.25rem;
   text-shadow: 0 0 .625rem rgba(255,255,255,0.03);
   align-self: flex-end
 }
@@ -270,9 +278,7 @@
 
 .SpatialScenePanel.hide .SpatialScenePanel-show-area {
   transform: scale3d(0,1,1);
-  transition: -webkit-transform 500ms linear;
-  transition: transform 500ms linear;
-  transition: transform 500ms linear, -webkit-transform 500ms linear
+  transition: transform 150ms linear;
 }
 
 .SpatialScenePanel.hide .SpatialScenePanel-disappear-area {
@@ -298,6 +304,6 @@
   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 500ms steps(23) 1 normal
+  animation: SpatialScenePanel-line-sprites-animation 500ms 100ms steps(23) 1 normal
 }
 

package/stylesheets/default.css

@@ -2,8 +2,8 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -31,7 +31,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100vw;
+  width: 100%;
   height: 150px;
   color: white;
   transition: transform 0.5s;
@@ -131,36 +131,44 @@
   width: 250px;
   font-size: 14px;
   opacity: 1;
-  transition: opacity 0.5s;
+  transition: opacity 0.1s;
 }
+
 .vreo-prompter--audio {
   top: 72px;
   left: 64px;
 }
+
 .vreo-prompter-innerText {
   position: absolute;
   left: 0;
   top: 0;
   padding-right: 10px;
 }
+
+.vreo-prompter--audio .vreo-prompter-innerText {
+  padding-right: 0;
+  text-align: center;
+  width: 100%;
+}
 .vreo-prompter--hidden {
   opacity: 0;
 }
 
-.vreo-prompter-text-transition-enter-active {
+/* .vreo-prompter-text-transition-enter-active {
   opacity: 0;
-}
+} */
 
-.vreo-prompter-text-transition-enter-done {
+/* .vreo-prompter-text-transition-enter-done {
   opacity: 1;
   transition: opacity 1000ms;
-}
-
+} */
+/*
 .vreo-prompter-text-transition-exit-active,
 .vreo-prompter-text-transition-exit-done {
   opacity: 0;
   transition: opacity 500ms;
-}
+} */
 
 .VideoEffect {
   position: absolute;
@@ -187,6 +195,27 @@
   opacity: 0;
 }
 
+.PanoTag--expand {
+  transform: translate(-50%, -50%);
+  color: white;
+  min-width: 150px;
+  max-width: 200px;
+  margin-top: 4px;
+}
+
+.PanoTag--expand .PanoTag-box.PanoTag-box--Text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 4px;
+}
+
+.PanoTag-guideline {
+  width: 100%;
+  background: linear-gradient(45deg, transparent 20% ,white, transparent 80%);
+  height: 3px;
+}
+
 .PanoTag--notHidden {
   opacity: 1;
 }
@@ -401,7 +430,11 @@
   transform-style: preserve-3d;
   pointer-events: none;
   z-index: 999999;
-  transform: translate(-50%, -50%);
+}
+.__Dnalogel-plugin--CSS3DRenderPlugin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @keyframes straightPopPTL {
@@ -541,9 +574,80 @@
 
 .vreo-infoPanelVideo {
   max-width: 412px;
-} 
+}
 
 .vreo-panel--hidden .vreo-panel-inner {
   opacity: 0;
   transition: opacity 0.45s;
 }
+
+.vreo-PopUp {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 65%);
+  opacity: 0;
+  transition: opacity .45s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vreo-PopUp.vreo-PopUp-visible {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.vreo-PopUp-inner {
+  max-width: 100%;
+  max-height: 100%;
+  width: 339px;
+  height: 425px;
+  position: relative;
+}
+
+@media only screen and (min-width: 1080px) {
+  .vreo-PopUp-inner {
+    width: 678px;
+    height: 620px;
+    position: relative;
+  }
+  .vreo-infoPanelVideo {
+    max-width: 100%;
+  }
+  .vreo-infoPanelImg {
+    max-width: 100%;
+  }
+}
+
+.vreo-PopUp-inner .vreo-infoPanel {
+  background-color: initial;
+  justify-content: center;
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title {
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  z-index: 1;
+  flex-direction: column;
+  justify-content: end;
+  height: 200px;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t1 {
+  padding-left: 0;
+  font-size: 20px;
+  font-weight: 600;
+  padding-bottom: 14px;
+}
+
+.vreo-PopUp-inner .vreo-infoPanel-title .vreo-infoPanel-t2 {
+  padding: 0 0 24px 0;
+  font-size: 14px;
+  opacity: 0.85;
+}