@realsee/vreo 0.2.0-alpha.1 → 0.2.0-alpha.10

package/resources/Player/modules/keyframes/InfoPanel/index.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react'
 import { ReactNode } from 'react'
-import { InfoPanelData, InfoPanelTypeEnum, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import {
+  InfoPanelData,
+  InfoPanelStyleEnum,
+  InfoPanelTypeEnum,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 import { useController } from '../../../hooks'
 
 function InfoPanelImg({ url, children }: { url: string; children?: ReactNode }) {
   return (
     <div className="vreo-infoPanel vreo-infoPanel--img">
       {children}
-      <div className="vreo-infoPanelImg" style={{backgroundImage: `url(${url})`}} ></div>
+      <div className="vreo-infoPanelImg" style={{ backgroundImage: `url(${url})` }}></div>
     </div>
   )
 }
@@ -16,7 +22,9 @@ function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }
   return (
     <div className="vreo-infoPanel vreo-infoPanel--video">
       {children}
-      <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      <div className="vreo-infoPanelWrapper">
+        <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      </div>
     </div>
   )
 }
@@ -31,10 +39,12 @@ const Title = (props: TitleProps) => {
     return null
   }
 
-  return <div className="vreo-infoPanel-title">
-    <div className="vreo-infoPanel-t1">{props.title}</div>
-    <div className="vreo-infoPanel-t2">{props.subTitle}</div>
-  </div>
+  return (
+    <div className="vreo-infoPanel-title">
+      <div className="vreo-infoPanel-t1">{props.title}</div>
+      <div className="vreo-infoPanel-t2">{props.subTitle}</div>
+    </div>
+  )
 }
 
 export function InfoPanel() {
@@ -45,31 +55,88 @@ export function InfoPanel() {
     if (controller.configs?.keyframeMap.InfoPanel === false) {
       return
     }
+
     const callback = (keyframe: VreoKeyframe) => {
       const { start, end, data } = keyframe
 
       const infoPanelData = data as InfoPanelData
-  
 
+      const { title, subTitle, style } = infoPanelData
+      do {
+        if (style === InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+            controller.openPopUp(
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            )
+          } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+            controller.openPopUp(
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            )
+          }
+          break
+        }
+        if (infoPanelData.type === InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelImg url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelImg>
+            ),
+            height: '60vh',
+          })
+        } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: (
+              <InfoPanelVideo url={infoPanelData.url}>
+                <Title title={title} subTitle={subTitle} />
+              </InfoPanelVideo>
+            ),
+            height: '60vh',
+          })
+        }
+      } while (false)
 
-      if (infoPanelData.type === InfoPanelTypeEnum.Image) {
-        controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
-      } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
-        controller.openDrawer({ content: <InfoPanelVideo url={infoPanelData.url} />, height: '60vh' })
-      }
-      timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
+      timeoutRef.current = setTimeout(() => {
+        controller.openDrawer(false)
+        controller.openPopUp(false)
+      }, end - start)
     }
     controller.on(VreoKeyframeEnum.InfoPanel, callback)
 
-    Object.assign(window, { $setInfoPanel: () => {
-      controller.openDrawer({ content: (
-        
-        // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-        <InfoPanelImg url='http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png'>
-          <Title title="场景联动抓拍图片" subTitle={"2022.02.17 14:00"} />
-        </InfoPanelImg>
-      ), height: '60vh' })
-    }})
+    // Object.assign(window, {
+    //   $setInfoPanel: () => {
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    // })
 
     return () => {
       controller.off(VreoKeyframeEnum.InfoPanel, callback)

package/resources/Player/modules/keyframes/ModelVideo/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+import * as THREE from 'three'
 import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
+import { createTransMatrix } from '../../../../shared-utils/createTransMatrix'
 import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 import { useController, useFiveInstance } from '../../../hooks'
 
@@ -15,14 +17,45 @@ export function ModelVideo() {
         ref.current = ModelTVVideoPlugin(five, {})
       }
       const { start, end } = keyframe
-      const { videoSrc, videoPosterSrc, vertexs } = keyframe.data as ModelVideoData
+      const { videoSrc, videoPosterSrc, vertexs, matrixWorld } = keyframe.data as ModelVideoData
+
+      const position = (() => {
+        if (vertexs.length < 4) {
+          throw new Error('ModelVideo: 顶点数据集合不够，无法组成矩形 ....')
+        }
+        if (vertexs.length === 4) {
+          return vertexs
+        }
+
+        const box = new THREE.Box3()
+        vertexs.forEach((v) => box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z)))
+        return [
+          new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+          new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+          new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+        ]
+      })()
+
+      const points = (() => {
+        if (matrixWorld) {
+          const transMatrix = createTransMatrix(matrixWorld)
+          return [
+            position.map((p) => {
+              const res = transMatrix([p.x, p.y, p.z])
+              return { x: res[0], y: res[1], z: res[2] }
+            }),
+          ]
+        }
+        return [position]
+      })()
 
       ref.current.disable()
       await ref.current.load(
         {
           video_src: videoSrc,
           video_poster_src: videoPosterSrc,
-          points: [vertexs],
+          points,
         },
         controller.configs?.videos?.modelTVVideo
       )

package/resources/Player/modules/keyframes/PanoTextLabel/index.tsx

@@ -30,13 +30,13 @@ export function PanoTextLabel() {
       if (!res) return
       const { x: left, y: top } = res
 
-      Object.assign(window, { $PanoTextLabel: { setState } })
+      // Object.assign(window, { $PanoTextLabel: { setState } })
       setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
       timeoutRef.current = setTimeout(() => setState(null), end - start)
     }
     controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
 
-    Object.assign(window, { $panoTextLabel: { setState } })
+    // Object.assign(window, { $panoTextLabel: { setState } })
     return () => {
       controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
       if (timeoutRef.current) {

package/resources/Player/modules/keyframes/Prompter/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { useController } from '../../../hooks'
 
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 
 export function Prompter() {
@@ -48,19 +47,9 @@ export function Prompter() {
         'vreo-prompter--audio': controller.isAudio,
       })}
     >
-      {text ? (
-        /* @warning "index.js:1 Warning: findDOMNode is deprecated in StrictMode." */
-        <TransitionGroup className="vreo-prompter-text">
-          <CSSTransition
-            key={text}
-            classNames="vreo-prompter-text-transition"
-            timeout={500}
-            addEndListener={(node, done) => node.addEventListener('transitionend', done, false)}
-          >
-            <div className="vreo-prompter-innerText">{text}</div>
-          </CSSTransition>
-        </TransitionGroup>
-      ) : undefined}
+      <div className="vreo-prompter-text">
+        <div className="vreo-prompter-innerText">{text}</div>
+      </div>
     </div>
   )
 }

package/resources/Player/modules/keyframes/UpdateVRPanorama/index.tsx

@@ -6,49 +6,56 @@ import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../.
 export function UpdateVRPanorama() {
   const controller = useController()
   const five = useFiveInstance()
-  const rawRef = React.useRef<string[] | null>(null)
-  const workRef = React.useRef<Work | null>(null)
+  const deafultWorkRef = React.useRef<string[] | null>(null)
+  const updateWorkRef = React.useRef<Work | null>(null)
 
+  // 恢复默认 VR
   const restoreCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+    // 先清理掉 之前的 VR 数据备份
+    updateWorkRef.current = null
+
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
       five.load(work)
     }
    
-    workRef.current = null
   }, [])
 
+  // 暂停时： 恢复默认 VR 
   const pausedCallback = React.useCallback(() => {
-    if (rawRef.current) {
-      const work = parseWork(rawRef.current)
+    if (deafultWorkRef.current) {
+      const work = parseWork(deafultWorkRef.current)
+      Object.assign(window, {$rawWork: work})
       five.load(work)
     }
   }, [])
 
+  // 播放时：如果暂停前有更新 VR 需要还原
   const playingCallback = React.useCallback(() => {
-    if (!workRef.current) {
+    if (!updateWorkRef.current) {
       return
     }
-    five.load(workRef.current)
+    five.load(updateWorkRef.current)
   }, [])
 
   React.useEffect(() => {
     const callback = (keyframe: VreoKeyframe) => {
-      if (!rawRef.current) {
-        rawRef.current = five.work.raw.works
+      if (!deafultWorkRef.current) {
+        deafultWorkRef.current = five.work.raw.works
       }
 
       const data = keyframe.data as UpdateVRPanoramaData
 
       // 如果数据中有新 work 数据，则直接载入
       if (data.work) {
-        workRef.current = parseWork(data.work)
-        five.load(workRef.current)
+        updateWorkRef.current = parseWork(data.work)
+        five.load(updateWorkRef.current)
         return
       }
 
       const lastRawWork = five.work?.raw.works[0]
 
+
       // 动态场景：不提供完成的签名数据，需重新整理
       if (data.dynamic_scene && !data.panorama) {
         const lastWork = JSON.parse(lastRawWork)
@@ -59,8 +66,10 @@ export function UpdateVRPanorama() {
         delete data.dynamic_scene
       }
 
-      workRef.current = parseWork([lastRawWork, data])
-      five.load(workRef.current)
+      Object.assign(window, {$work1: JSON.parse(lastRawWork), $work2: data, parseWork: parseWork})
+
+      updateWorkRef.current = parseWork([lastRawWork, data])
+      five.load(updateWorkRef.current)
     }
 
     controller.on(VreoKeyframeEnum.UpdateVRPanorama, callback)
@@ -84,7 +93,7 @@ export function UpdateVRPanorama() {
       controller.off('paused', pausedCallback)
       controller.off('playing', playingCallback)
     }
-  }, [controller])
+  }, [])
 
   return <></>
 }

package/resources/Player/typings.ts

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
-import { VreoKeyframeConfigMap } from '../typings/VreoUnit'
+import React, { ReactNode } from 'react';
+import { Subscribe, Five } from '@realsee/five';
+
+import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit'
+import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 
 export interface PlayerConfigs {
   containter?: ReactDOM.Container
@@ -13,8 +16,20 @@ export interface PlayerConfigs {
     videoEffect?: HTMLVideoElement
     modelTVVideo?: HTMLVideoElement
   }
+
+  videoAgentMeshOptions?: VideoAgentMeshOptions
   /**
    * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
    */
   customPanelChildren?: ReactNode
+  customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
+  imageOptions?: { size: number }
+  autoPreload?: boolean
+}
+
+export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>
+
+export interface CustomVreoKeyframeProps {
+  subscribe: VreoSubscribe
+  five: Five
 }

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()
+  }
+}