@realsee/vreo 0.2.0-alpha.2 → 0.2.0-alpha.20

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

@@ -2,12 +2,37 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { Five } from '@realsee/five'
 import { Raycaster, Vector3 } from 'three'
-import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
-import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
+import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween'
+import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '../../../fivePlugins/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
@@ -16,25 +41,34 @@ export interface SpatialScenePanelData {
     text: string
     icon: string
   }[]
-  position: { x: number; y: number; z: number }
-  quaternion: [number, number, number, number]
+  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 
+  // position: Vector3
+  // rotation?: Vector3
+  // quaternion: [number, number, number, number]
+  dom: HTMLDivElement
 }
 
-const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
+// 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'
@@ -48,16 +82,18 @@ const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
   const rightBottom = new Vector3(right, bottom)
 
   const points = [leftBottom, rightBottom, rightTop, leftTop].map((point) => {
-    point.setX((point.x / window.innerWidth) * 2 - 1)
-    point.setY(-(point.y / window.innerHeight) * 2 + 1)
+    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])))
 
-  const ratio = leftBottom.distanceTo(rightBottom) / 160
+  // 判断是手机 150
+  const ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120)
   return { points, ratio }
 }
 
@@ -66,12 +102,12 @@ const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
  * @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
     }
@@ -82,64 +118,103 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
       }
 
       const data = keyframe.data as SpatialScenePanelData
-      // const data = mockData as SpatialScenePanelData
 
+      // const data = mockData
       const { points, ratio } = searchV1({
         five: props.five,
-        position: new Vector3(data.position.x, data.position.y, data.position.z),
-        quaternion: data.quaternion,
-        dom: ref.current!
+        dom: ref.current!,
       })
 
-      console.log(points, ratio)
-
       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)
-            lastRotateY = needRotateY
-          })
-          .onStart(() => {
-            css3DObject?.rotateY(startRotateY)
-            render!()
-          })
-          .onDispose(() => {
-            panelRef.current?.classList.add('show')
-          })
-          .play()
-        const { start, end } = keyframe
-        setTimeout(() => {
-          panelRef.current?.classList.add('hide')
-          setTimeout(() => dispose?.(), 1500)
-        }, end - start)
+      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, {$SpatialScenePanelCallback: callback})
+    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">
-        <div className="SpatialScenePanel-bg"></div>
+        <SpatialScenePanelBg />
         <div className="SpatialScenePanel-header">
           <div className="SpatialScenePanel-title">{props.data?.title}</div>
           <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
@@ -157,5 +232,33 @@ const Panel = React.forwardRef(
 
       <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,129 +4,205 @@ import { Five, Subscribe } from '@realsee/five'
 
 import { App } from './App'
 import { Controller, ControllerContext } from './Controller'
-import { VreoKeyframeEvent, 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
-  private controller: Controller
-  configs: Readonly<PlayerConfigs>
-
-  constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
-    super()
-    this.controller = new Controller()
-    this.$five = this.controller.$five = five
-
-    if (!configs.containter) {
-      const containter = document.querySelector('#vreo-app') || document.createElement('div')
-      ReactDOM.unmountComponentAtNode(containter)
-      containter.setAttribute('id', 'vreo-app')
-      configs.containter = containter
-      document.body.append(containter)
+    $five: Five
+    private controller: Controller
+    configs: Readonly<PlayerConfigs>
+
+    constructor(five: Five, configs: Partial<PlayerConfigs> = {}) {
+        super()
+        this.controller = new Controller()
+        this.$five = this.controller.$five = five
+
+        if (!configs.containter) {
+            const containter = document.getElementById('vreo-app') || document.createElement('div')
+            ReactDOM.unmountComponentAtNode(containter)
+            containter.setAttribute('id', 'vreo-app')
+            configs.containter = containter
+            const fiveCanvasDomParent = five.getElement()?.parentNode
+            if (fiveCanvasDomParent) {
+                fiveCanvasDomParent.append(containter)
+            } else {
+                document.body.append(containter)
+            }
+            // document.body.append(containter)
+        }
+
+        this.configs = Object.freeze(
+            Object.assign(
+                {
+                    keyframeMap: {},
+                },
+                configs
+            )
+        )
+
+        this.controller.configs = this.configs
+
+        ReactDOM.render(
+            <ControllerContext.Provider value={this.controller}>
+                <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
+        )
+
+        // 监听播放情况：抛出触发时机
+        reaction(
+            () => this.controller.ended,
+            (ended) => {
+                if (ended) {
+                    this.emit('paused', true)
+                }
+            }
+        )
+
+        reaction(
+            () => this.controller.playing,
+            (playing) => {
+                if (!this.controller.ended) {
+                    this.emit(playing ? 'playing' : 'paused')
+                }
+            }
+        )
     }
 
-    this.configs = Object.freeze(
-      Object.assign(
-        {
-          keyframeMap: {},
-        },
-        configs
-      )
-    )
-
-    this.controller.configs = this.configs
-
-    ReactDOM.render(
-      <ControllerContext.Provider value={this.controller}>
-        <App></App>
-        <Drawer />
-        {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
-    )
-
-    // 监听播放情况：抛出触发时机
-    reaction(
-      () => this.controller.playing,
-      (playing) => {
-        this.emit(playing ? 'playing' : 'paused')
-      }
-    )
-  }
-
-  async load(vreoUnit: VreoUnit, currentTime = 0) {
-    if (!this.controller.visible) {
-      this.controller.setVisible(true)
-      // 延迟 500ms 规避跟 DOM 动画冲突
-      await new Promise((resolve) => {
-        setTimeout(() => resolve(true), 500)
-      })
+    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 动画冲突
+            await new Promise((resolve) => {
+                setTimeout(() => resolve(true), 500)
+            })
+        }
+
+        if (this.controller.stopInterval) {
+            this.controller.stopInterval()
+            this.controller.stopInterval = undefined
+        }
+
+        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 (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+            this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
+        }
+        await this.controller.videoAgentScene?.videoAgentMesh.play(
+            vreoUnit.video.url,
+            currentTime / 1000,
+            vreoUnit.video.duration
+        )
+
+        this.controller.setEnded(false)
+        this.play()
+
+        this.controller.run((type, keyframe) => this.emit(type, keyframe))
+        return true
     }
 
-    if (this.controller.stopInterval) {
-      this.controller.stopInterval()
-      this.controller.stopInterval = undefined
+    get paused() {
+        return !this.controller.playing
     }
 
-    this.controller.vreoUnit = vreoUnit
-    this.controller.videoInstance?.pause()
-
-    // 新数据载入就绪
-    this.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)
-      this.play()
+    play(currentTime?: number) {
+        if (this.controller.playing) return true
+        if (currentTime && this.controller.videoInstance) {
+            this.controller.videoInstance.currentTime = currentTime / 1000
+        }
+        Object.assign(window, { $vreoController: this.controller })
+
+        this.controller.setPlaying(true)
+        return true
+    }
+
+    pause() {
+        this.controller.setPlaying(false)
     }
-    this.controller.run((type, keyframe) => this.emit(type, keyframe))
-    return true
-  }
-
-  get paused() {
-    return !this.controller.playing
-  }
-
-  play() {
-    if (this.controller.playing) return true
-    this.controller.setPlaying(true)
-    return true
-  }
-
-  pause() {
-    this.controller.setPlaying(false)
-  }
-
-  show() {
-    this.controller.setVisible(true)
-  }
-
-  hide() {
-    this.controller.setVisible(false)
-  }
-
-  dispose() {
-    this.pause()
-    this.controller.dispose()
-
-    if (this.configs.containter) {
-      ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+
+    show() {
+        this.controller.setVisible(true)
+    }
+
+    hide() {
+        this.controller.setVisible(false)
+    }
+
+    getCurrentTime() {
+        return this.controller.currentTime
+    }
+
+    dispose() {
+        this.pause()
+        this.controller.dispose()
+
+        if (this.configs.containter) {
+            ReactDOM.unmountComponentAtNode(this.configs.containter as Element)
+        }
     }
-  }
 }
 
 console.log(`

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} />
+}