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

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -0,0 +1,264 @@
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import { Five } from '@realsee/five'
+import * as THREE from 'three'
+import { Object3D, Raycaster, Vector3 } from 'three'
+import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
+import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
+
+import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
+import { CustomVreoKeyframeProps } from '../../typings'
+
+// __debug__
+// const mockData: SpatialScenePanelData = {
+//   customType: 'SpatialScenePanel',
+//   "stateList": [
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___fc42f951076607a22fd5c54f005ba553.png",
+//       "text": "窗帘关闭"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___b331e7ad732debc07250a169a3393b13.png",
+//       "text": "摄像头休眠"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___2e425a81ac0ad88232d50d4e52a9abfa.png",
+//       "text": "氛围音乐"
+//     },
+//     {
+//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___bff48bb81cde37aa6a319d6f5d56e3a4.png",
+//       "text": "空调打开"
+//     }
+//   ],
+//   "temperature": "27",
+//   "title": "沉浸式回家"
+// }
+export interface SpatialScenePanelData {
+  customType: 'SpatialScenePanel'
+  title: string
+  temperature: string
+  stateList: {
+    text: string
+    icon: string
+  }[]
+  position?: { x: number; y: number; z: number }
+  quaternion?: [number, number, number, number]
+}
+
+interface SearchParams {
+  five: Five
+  // position: Vector3
+  // rotation?: Vector3
+  // quaternion: [number, number, number, number]
+  dom: HTMLDivElement
+}
+
+// const getSphere = (position: Vector3, color = 0xffff00) => {
+//   const geometry = new SphereGeometry(0.05, 32, 16)
+//   const material = new MeshBasicMaterial({ color })
+//   const sphere = new Mesh(geometry, material)
+//   sphere.position.copy(position)
+//   return sphere
+// }
+
+const searchV1 = ({ five, dom }: SearchParams) => {
+  const cameraDirection = new Vector3()
+  five.camera.getWorldDirection(cameraDirection)
+  const cameraPosition = five.camera.position
+  const [intersect] = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection))
+  const point = five.project2d(intersect.point)
+
+  const widescreen = window.innerWidth > 560 ? true : false
+  // const width = dom!.clientWidth
+  const height = dom!.clientHeight
+  dom!.style.left = point!.x + 'px'
+  dom!.style.top = point!.y - height / 2 + 'px'
+  const rect = dom!.getBoundingClientRect()
+  const { left, top, bottom, right } = rect
+
+  const leftBottom = new Vector3(left, bottom)
+  const leftTop = new Vector3(left, top)
+  const rightTop = new Vector3(right, top)
+  const rightBottom = new Vector3(right, bottom)
+
+  const points = [leftBottom, rightBottom, rightTop, leftTop].map((point) => {
+    point.setX((point.x / window.innerWidth) * 2 - (widescreen ? 1.25: 1.75))
+    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35: 1.125))
+    point.setZ(0.5)
+    return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2)
+  })
+
+  // __debug__
+  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
+  // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
+
+  // 判断是手机 150
+  const ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120)
+  return { points, ratio }
+}
+
+/**
+ * 空间场景面板
+ * @returns
+ */
+export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  const ref = React.useRef<HTMLDivElement>(null)
+  const panelRef = React.useRef<HTMLDivElement | null>(null)
+  const rendererRef = React.useRef<CSS3DRenderPluginExportType>(CSS3DRenderPlugin(props.five))
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const callback = (keyframe: VreoKeyframe) => {
+      if (keyframe.data.customType !== 'SpatialScenePanel') {
+        return
+      }
+
+      const data = keyframe.data as SpatialScenePanelData
+
+      // const data = mockData
+      const { points, ratio } = searchV1({
+        five: props.five,
+        dom: ref.current!,
+      })
+
+      const { container, dispose, css3DObject, render } =
+        rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
+
+      Object.assign(window, { $css3DObject: css3DObject })
+      if (!container) return
+
+      ReactDOM.render(<Panel ref={(ref) => (panelRef.current = ref)} data={data} />, container)
+      const startRotateY = -(Math.PI * 2) / 9
+      let lastRotateY = 0
+    
+      tweenProgress(1000)
+        .onUpdate(({ progress }) => {
+          const needRotateY = (Math.PI / 90) * 11 * progress
+          const rotateY = needRotateY - lastRotateY
+          css3DObject?.rotateY(rotateY)
+          // css3DObject?.rotateZ
+          lastRotateY = needRotateY
+        })
+        .onStart(() => {
+          css3DObject?.rotateY(startRotateY)
+          render!()
+        })
+        .onDispose(() => {
+          panelRef.current?.classList.add('show')
+        })
+        .play()
+
+    // Object.assign(window, {  $dispose: () => {
+    //   panelRef.current?.classList.add('hide')
+    //   setTimeout(() => dispose?.(), 1500)
+    // } })
+
+      const { start, end } = keyframe
+
+      timeoutRef.current = setTimeout(() => {
+        panelRef.current?.classList.add('hide')
+        timeoutRef.current = setTimeout(() => {
+          dispose?.()
+          timeoutRef.current = null
+        }, 1500)
+      }, end - start)
+    }
+
+    Object.assign(window, { $callback: callback })
+
+    // setTimeout(() => {callback()}, 8000)
+    props.subscribe.on(VreoKeyframeEnum.Custom, callback)
+
+    return () => {
+      props.subscribe.off(VreoKeyframeEnum.Custom, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return <div className="vreo-SpatialScenePanel" ref={ref}></div>
+}
+
+/** 背景动画：控制延迟 */
+function SpatialScenePanelBg() {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  React.useEffect(() => {
+    if (!ref.current) return
+
+    const listener = () => {
+      ref.current?.setAttribute('class', 'SpatialScenePanel-bg')
+
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation')
+        timeoutRef.current = null
+      }, 3000)
+    }
+
+    ref.current.addEventListener('animationend', listener)
+
+    return () => {
+      if (ref.current) ref.current.removeEventListener('animationend', listener)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+  return <div ref={ref} className="SpatialScenePanel-bg SpatialScenePanel-bg--animation"></div>
+}
+
+const Panel = React.forwardRef(
+  (props: { data: SpatialScenePanelData }, myRef: React.LegacyRef<HTMLDivElement> | undefined) => (
+    <div className="SpatialScenePanel" ref={myRef}>
+      <div className="SpatialScenePanel-show-area">
+        <SpatialScenePanelBg />
+        <div className="SpatialScenePanel-header">
+          <div className="SpatialScenePanel-title">{props.data?.title}</div>
+          <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
+        </div>
+        <div className="SpatialScenePanel-body">
+          {props.data?.stateList?.map((state, index) => (
+            <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+              <img className="SpatialScenePanel-icon" src={state.icon}></img>
+              <div className="SpatialScenePanel-text">{state.text}</div>
+              <div className="SpatialScenePanel-dot"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="SpatialScenePanel-disappear-area"></div>
+    </div>
+  )
+)
+
+
+// export function SpatialScenePanel() {
+//   // const data = mockData
+
+//   return (
+//     <div className="SpatialScenePanel" >
+//     <div className="SpatialScenePanel-show-area">
+//       <SpatialScenePanelBg />
+//       <div className="SpatialScenePanel-header">
+//         <div className="SpatialScenePanel-title">{data?.title}</div>
+//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
+//       </div>
+//       <div className="SpatialScenePanel-body">
+//         {data?.stateList?.map((state, index) => (
+//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
+//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
+//             <div className="SpatialScenePanel-text">{state.text}</div>
+//             <div className="SpatialScenePanel-dot"></div>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+
+//     <div className="SpatialScenePanel-disappear-area"></div>
+//   </div>
+//   )
+// }

package/resources/Player/index.tsx

@@ -4,10 +4,11 @@ import { Five, Subscribe } from '@realsee/five'
 
 import { App } from './App'
 import { Controller, ControllerContext } from './Controller'
-import { VreoKeyframeEvent, VreoKeyframeConfigMap, VreoUnit } from '../typings/VreoUnit'
+import { CameraMovementData, VreoKeyframeEnum, VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
+import { PopUp } from './modules/PopUp'
 
 export class Player extends Subscribe<VreoKeyframeEvent> {
   $five: Five
@@ -42,6 +43,19 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       <ControllerContext.Provider value={this.controller}>
         <App></App>
         <Drawer />
+        <PopUp />
+        {this.configs.customKeyframes &&
+          this.configs.customKeyframes.map((CustomCmpt, key) => (
+            <CustomCmpt
+              key={key}
+              subscribe={{
+                on: (name, callback) => this.on(name, callback),
+                once: (name, callback) => this.once(name, callback),
+                off: (name, callback) => this.off(name, callback),
+              }}
+              five={five}
+            />
+          ))}
       </ControllerContext.Provider>,
       configs.containter
     )
@@ -55,7 +69,10 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     )
   }
 
-  async load(vreoUnit: VreoUnit, currentTime = 0) {
+  async load(vreoUnit: VreoUnit, currentTime = 0, preload = false, force = false) {
+    if (force) {
+      vreoUnit = JSON.parse(JSON.stringify(vreoUnit))
+    }
     if (!this.controller.visible) {
       this.controller.setVisible(true)
       // 延迟 500ms 规避跟 DOM 动画冲突
@@ -72,13 +89,47 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     this.controller.vreoUnit = vreoUnit
     this.controller.videoInstance?.pause()
 
+    // 预载逻辑
+    // 是否降低图片分辨率
+    if (this.$five.imageOptions.size && this.configs.imageOptions?.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+      this.$five.imageOptions.size = this.configs.imageOptions.size
+    }
+    
+    // 预载数据中的点位
+    if (preload || (preload === undefined && this.configs.autoPreload)) {
+      const panoIndexMap = vreoUnit.keyframes.filter((vreoKeyframe) => {
+        if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+          return false
+        }
+  
+        const data = vreoKeyframe.data as CameraMovementData
+        if (data.panoIndex === undefined) {
+          return false
+        }
+        return true
+      }).reduce((accu: Record<number, boolean>, curr) => {
+        const panoIndex = curr.data.panoIndex as number
+        if (!accu[panoIndex]) {
+          accu[panoIndex] = true
+        }
+        return accu
+      }, {})
+  
+      const panoIndexs = Object.keys(panoIndexMap)
+      for (let i = 0; i < panoIndexs.length; i++) {
+        await this.$five.preloadPano(Number(panoIndexs[i]))
+      }
+    }
+    
     // 新数据载入就绪
     this.emit('loaded', vreoUnit)
+    this.controller.emit('loaded', vreoUnit)
+
     if (vreoUnit.video.url) {
       if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
         this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
       }
-      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url)
+      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000)
       this.play()
     }
     this.controller.run((type, keyframe) => this.emit(type, keyframe))
@@ -89,8 +140,12 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
     return !this.controller.playing
   }
 
-  play() {
+  play(currentTime?: number) {
     if (this.controller.playing) return true
+    if (currentTime && this.controller.videoInstance) {
+      // Object.assign(window, {$vreoController: this.controller})
+      this.controller.videoInstance.currentTime = currentTime / 1000
+    }
     this.controller.setPlaying(true)
     return true
   }

package/resources/Player/modules/PopUp/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import { observer } from 'mobx-react'
+import { Controller } from '../../Controller'
+import { useController } from '../../hooks'
+
+const PopUpView = observer(({ controller }: { controller: Controller }) => {
+
+  return (
+    <div
+      className={classNames('vreo-PopUp', {
+        'vreo-PopUp-visible': controller.popUp,
+      })}
+      onClick={() => controller.openPopUp(false)}
+    >
+      <div className="vreo-PopUp-inner">
+        {controller.popUp ||  ''}
+      </div>
+    </div>
+  )
+})
+
+export function PopUp() {
+  const controller = useController()
+  return <PopUpView controller={controller} />
+}

package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts

@@ -64,6 +64,7 @@ const cacheInstance: {
 
 export interface VideoAgentMeshOptions {
   videoInstance?: HTMLVideoElement
+  audioInstance?: HTMLAudioElement
 }
 
 /**
@@ -134,10 +135,9 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.freeze = false
     this.paused = true
 
-    {
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         this.audioInstance = cacheInstance.audioInstance
-
       } else {
         const audioInstance = document.createElement('audio')
         audioInstance.crossOrigin = ''
@@ -151,7 +151,8 @@ export class VideoAgentMesh extends THREE.Mesh {
         this.audioInstance = audioInstance
         cacheInstance.audioInstance = audioInstance
       }
-
+    } else {
+      this.audioInstance = options.audioInstance
     }
 
     makeObservable(this, { paused: observable })
@@ -195,7 +196,7 @@ export class VideoAgentMesh extends THREE.Mesh {
     this.videoInstance.addEventListener('timeupdate', onStart, false)
   }
 
-  async play(videoUrl = '') {
+  async play(videoUrl = '', currentTime = 0) {
     videoUrl = videoUrl || ''
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
@@ -204,7 +205,7 @@ export class VideoAgentMesh extends THREE.Mesh {
     }
 
     if (videoUrl === this.videoUrl) {
-      this.videoInstance.currentTime = 0
+      this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()
       return true
     }
@@ -215,7 +216,7 @@ export class VideoAgentMesh extends THREE.Mesh {
 
     return await new Promise((resolve) =>
       setTimeout(async () => {
-        this.videoInstance.currentTime = 0
+        this.videoInstance.currentTime = currentTime
         await this.videoInstance.play()
         resolve(true)
       }, 20),

package/resources/Player/modules/VideoAgent/VideoAgentScene.ts

@@ -9,7 +9,7 @@ export class VideoAgentScene {
   renderer = new THREE.WebGLRenderer({ alpha: true })
   container: HTMLElement
 
-  constructor(container: HTMLElement, needRender = true) {
+  constructor(container: HTMLElement, needRender = true, options: { videoInstance?: HTMLVideoElement, audioInstance?: HTMLAudioElement } = {}) {
     this.container = container
     this.camera.position.set(0, 0, 10)
     this.camera.lookAt(0, 0, 0)
@@ -22,7 +22,7 @@ export class VideoAgentScene {
     this.renderer.setSize(state.width * window.devicePixelRatio, state.height * window.devicePixelRatio)
     domElement.setAttribute('style', `width: ${state.width}px;height: ${state.height}px;`)
 
-    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1)
+    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
     if (needRender) {
       container.append(domElement)
       this.scene.add(this.videoAgentMesh)

package/resources/Player/modules/VideoAgent/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { useController } from '../../hooks'
+import { VideoAgentMeshOptions } from './VideoAgentMesh'
 import { VideoAgentScene } from './VideoAgentScene'
 
-export function VideoAgent(props: { onClick?: () => void }) {
+export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
   const ref = React.useRef<HTMLDivElement>(null)
   const controller = useController()
 
@@ -12,7 +13,7 @@ export function VideoAgent(props: { onClick?: () => void }) {
       console.warn('"VideoAgentScene" 重复初始化，已被过滤 ...')
       return
     }
-    const videoAgentScene = new VideoAgentScene(ref.current)
+    const videoAgentScene = new VideoAgentScene(ref.current, true, props.options || {})
     controller.videoAgentScene = videoAgentScene
 
     return () => {

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CameraMovementPlugin } from '../../../../fivePlugins/CameraMovementPlugin'
-import { CameraMovementEffect, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
+import { CameraMovementEffect, MoveArgs, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
 import { CameraMovementData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
 import { useController, useFiveInstance } from '../../../hooks'
 
@@ -18,9 +18,13 @@ export function CameraMovement() {
       const cameraMovementData = data as CameraMovementData
       const effect = cameraMovementData.effect
       if (effect === CameraMovementEffect.Rotate) {
-        ref.current.rotate(data as RotateArgs, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
+      } else if (effect === CameraMovementEffect.Move) {
+        await ref.current.move(data as MoveArgs, end - start)
+      } else if (cameraMovementData.panoIndex !== undefined && cameraMovementData.panoIndex !== five.panoIndex) {
+        await ref.current.move(data as MoveArgs, end - start)
       } else {
-        ref.current.move(data, end - start)
+        await ref.current.rotate(data as RotateArgs, end - start)
       }
     }
 

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)