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

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

@@ -1,6 +1,7 @@
 import * as THREE from 'three'
 import { Preloader } from '../../../shared-utils/Preloader'
 import { makeObservable, observable, runInAction } from 'mobx'
+import AudioLike from '../../../shared-utils/AduioLike'
 
 const vertexShader = `
 varying vec2 vUv;
@@ -63,7 +64,20 @@ const cacheInstance: {
 } = {}
 
 export interface VideoAgentMeshOptions {
+  /**
+   * 自定义视频实例。
+   */
   videoInstance?: HTMLVideoElement
+  /**
+   * 自定义音频实例。
+   */
+  audioInstance?: HTMLAudioElement
+  /**
+   * 是否开启音频预载能力。**仅对`.mp3`有效**。
+   *
+   * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音频文件下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音（`muted` 为 `false`，但是没有声音）。
+   */
+  preload?: boolean
 }
 
 /**
@@ -75,14 +89,21 @@ export class VideoAgentMesh extends THREE.Mesh {
   freeze: boolean
   paused: boolean
   audioInstance: HTMLAudioElement
+  audioLikeInstance: AudioLike
   $removeEventListener: () => void
 
-  get videoInstance(): HTMLAudioElement {
+  get videoInstance(): HTMLAudioElement | AudioLike {
+    if (!this.videoUrl) {
+      return this.audioLikeInstance
+    }
+
     if (this.videoUrl?.endsWith('mp3')) {
       return this.audioInstance
     }
+
     const uniforms = (this.material as THREE.ShaderMaterial).uniforms
     const videoInstance = uniforms.map.value.image as HTMLVideoElement
+
     return videoInstance
   }
 
@@ -99,7 +120,9 @@ export class VideoAgentMesh extends THREE.Mesh {
     height: number,
     widthSegments: number,
     heightSegments: number,
-    options: VideoAgentMeshOptions = {},
+    options: VideoAgentMeshOptions = {
+      preload: true
+    },
   ) {
     if (!options.videoInstance) {
       if (cacheInstance.videoInstance) {
@@ -134,10 +157,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,26 +173,42 @@ export class VideoAgentMesh extends THREE.Mesh {
         this.audioInstance = audioInstance
         cacheInstance.audioInstance = audioInstance
       }
-
+    } else {
+      this.audioInstance = options.audioInstance
     }
 
+    this.audioLikeInstance = new AudioLike()
+
     makeObservable(this, { paused: observable })
 
     const updatePaused = (paused: boolean) => runInAction(() => (this.paused = paused))
     const onPause = () => updatePaused(true)
     const onPlay = () => updatePaused(false)
+    const onEnded = () => {
+      console.log('vreo: video 播放结束')
+    }
 
-    this.videoInstance.addEventListener('pause', onPause)
-    this.videoInstance.addEventListener('play', onPlay)
+    this.audioInstance.addEventListener('pause', onPause)
+    this.audioInstance.addEventListener('play', onPlay)
+    this.options.videoInstance?.addEventListener('pause', onPause)
+    this.options.videoInstance?.addEventListener('play', onPlay)
+    this.audioLikeInstance.addEventListener('pause', onPause)
+    this.audioLikeInstance.addEventListener('play', onPlay)
+    this.options.videoInstance?.addEventListener('ended', onEnded)
 
     this.$removeEventListener = () => {
-      this.videoInstance.removeEventListener('pause', onPause)
-      this.videoInstance.removeEventListener('play', onPlay)
+      this.audioInstance.removeEventListener('pause', onPause)
+      this.audioInstance.removeEventListener('play', onPlay)
+      this.options.videoInstance?.removeEventListener('pause', onPause)
+      this.options.videoInstance?.removeEventListener('play', onPlay)
+      this.audioLikeInstance.removeEventListener('pause', onPause)
+      this.audioLikeInstance.removeEventListener('play', onPlay)
+      this.options.videoInstance?.removeEventListener('ended', onEnded)
     }
   }
 
-
   private async update(videoUrl: string) {
+
     if (this.videoUrl === videoUrl) {
       return
     }
@@ -181,7 +219,9 @@ export class VideoAgentMesh extends THREE.Mesh {
 
     const uniforms = (this.material as THREE.ShaderMaterial).uniforms
     this.videoInstance.muted = true
-    this.videoInstance.src = await URL.createObjectURL((await Preloader.blob(this.videoUrl)) as unknown as Blob)
+
+    this.videoInstance.src = (this.options.preload || this.options.preload === undefined || this.videoUrl.endsWith('.mp4')) ?
+      await URL.createObjectURL((await Preloader.blob(this.videoUrl)) as unknown as Blob) : this.videoUrl
     this.videoInstance.setAttribute('data-src', this.videoUrl)
 
     const onStart = () => {
@@ -190,21 +230,33 @@ export class VideoAgentMesh extends THREE.Mesh {
       this.videoInstance.muted = false
       uniforms.enable.value = this.videoUrl?.endsWith('.mp4') ? 1 : 0
       this.videoInstance.removeEventListener('timeupdate', onStart, false)
+
     }
 
     this.videoInstance.addEventListener('timeupdate', onStart, false)
   }
 
-  async play(videoUrl = '') {
+  async play(videoUrl = '', currentTime = 0, duration?: number) {
     videoUrl = videoUrl || ''
+    if (duration && !videoUrl) {
+      if (this.currentTime) {
+        this.videoInstance.currentTime = currentTime
+      }
+      (this.videoInstance as AudioLike).duration = duration
+      this.videoUrl = ''
+      this.videoInstance.play()
+      return true
+    }
+
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
       else console.warn('警告：视频资源未初始化。')
       return true
     }
 
+    console.log('play', videoUrl, this.videoUrl)
     if (videoUrl === this.videoUrl) {
-      this.videoInstance.currentTime = 0
+      this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()
       return true
     }
@@ -215,7 +267,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, preload?: boolean } = {}) {
     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)
@@ -37,7 +37,7 @@ export class VideoAgentScene {
     if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
       this.renderer.render(this.scene, this.camera)
     }
-
+    
     // 兼容非视频场景
     if (!this.videoAgentMesh.videoUrl?.endsWith('.mp4')) {
       if (domElement.style.display !== 'none') domElement.style.display = 'none'

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,6 +1,12 @@
 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 }) {
@@ -16,7 +22,9 @@ function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }
   return (
     <div className="vreo-infoPanel vreo-infoPanel--video">
       {children}
-      <div className="vreo-infoPanelWrapper"><video playsInline autoPlay className="vreo-infoPanelVideo" src={url} /></div>
+      <div className="vreo-infoPanelWrapper">
+        <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      </div>
     </div>
   )
 }
@@ -47,49 +55,86 @@ 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 } = infoPanelData
-      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',
-        })
-      }
-      timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
+      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)
+
+      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>
-    //         <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //     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'} />
-    //       </InfoPanelVideo>
-    //       ),
-    //       height: '60vh',
-    //     })
+    //       </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>
+    //     )
     //   },
     // })
 

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

@@ -1,7 +1,9 @@
 import * as React from 'react'
+import * as THREE from 'three'
+import { useController, useFiveInstance } from '../../../hooks'
 import { ModelTVVideoPlugin } from '../../../../fivePlugins/ModelTVVideoPlugin'
+import { createTransMatrix } from '../../../../shared-utils/createTransMatrix'
 import { ModelVideoData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
 
 export function ModelVideo() {
   const controller = useController()
@@ -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/PanoTag/index.tsx

@@ -2,13 +2,21 @@ import classNames from 'classnames'
 import * as React from 'react'
 import { Vector3 } from 'three'
 import { useController, useFiveInstance, useFiveProject2d } from '../../../hooks'
-import { PanoTagData, PanoTagEnum, Vertex, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
+import {
+  PanoTagData,
+  PanoTagEnum,
+  PanoTagStyleEnum,
+  Vertex,
+  VreoKeyframe,
+  VreoKeyframeEnum,
+} from '../../../../typings/VreoUnit'
 
 export function PanoTag() {
   const [state, setState] = React.useState<{
     vertex: Vertex
     text?: string
     type: PanoTagEnum
+    style?: PanoTagStyleEnum
     imgUrl?: string
   } | null>(null)
 
@@ -30,6 +38,7 @@ export function PanoTag() {
       const vertex = panoTagData.vertex
       const { x, y, z } = panoTagData.vertex
       const res = project2d(new Vector3(x, y, z))
+
       if (!res) return
       const { x: left, y: top } = res
       setState({
@@ -37,6 +46,7 @@ export function PanoTag() {
         text: panoTagData.text || PanoTagEnum.Text,
         type: panoTagData.type,
         imgUrl: panoTagData.imgUrl,
+        style: panoTagData.style || PanoTagStyleEnum.Growth,
       })
       setPos({ left, top })
       timeoutRef.current = setTimeout(() => {
@@ -92,6 +102,25 @@ export function PanoTag() {
     return undefined
   })()
 
+  if (state?.style === PanoTagStyleEnum.Expand) {
+    return (
+      <>
+        <div
+          className={classNames('PanoTag', {
+            'PanoTag--expand': true,
+            'PanoTag--notHidden': state,
+          })}
+          style={{
+            left: (pos?.left || 0) + 'px',
+            top: (pos?.top || 0) + 'px',
+          }}
+        >
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
+          <div className="PanoTag-guideline"></div>
+        </div>
+      </>
+    )
+  }
   return (
     <>
       <div
@@ -109,17 +138,7 @@ export function PanoTag() {
             <span className="PanoTag-slashline"></span>
             <span className="PanoTag-straightline"></span>
           </span>
-          <div
-            onClick={() => {
-              if (state?.imgUrl) {
-                // @TODO
-                // setDrawerVisible(true)
-              }
-            }}
-            className={'PanoTag-box PanoTag-box--' + (state?.type || '')}
-          >
-            {boxContent}
-          </div>
+          <div className={'PanoTag-box PanoTag-box--' + (state?.type || '')}>{boxContent}</div>
         </div>
       </div>
     </>