@realsee/vreo 1.0.0-alpha.9 → 1.1.0-dev.0

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

@@ -1,165 +0,0 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-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-container">
-      <div className="vreo-infoPanel vreo-infoPanel--img">
-        <div className="ratio-4-5 vreo-infoPanel-wrapper">
-          <div className="vreo-infoPanel-inner">
-            {children}
-            <img className="vreo-infoPanelImg" src={url}></img>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }) {
-  return (
-    <div className="vreo-infoPanel-container">
-      <div className="vreo-infoPanel vreo-infoPanel--video">
-        <div className="ratio-4-5 vreo-infoPanel-wrapper">
-          <div className="vreo-infoPanel-inner">
-            {children}
-            <div className="vreo-infoPanelVideo">
-              <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface TitleProps {
-  title?: string
-  subTitle?: string
-}
-
-const Title = (props: TitleProps) => {
-  if (!props.title && !props.subTitle) {
-    return null
-  }
-
-  return (
-    <>
-      <div className="vreo-infoPanel-title-shadow"></div>
-      <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() {
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-  const controller = useController()
-
-  React.useEffect(() => {
-    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)
-
-      timeoutRef.current = setTimeout(() => {
-        controller.openDrawer(false)
-        controller.openPopUp(false)
-      }, end - start)
-    }
-    controller.on(VreoKeyframeEnum.InfoPanel, callback)
-
-    // 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)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [controller])
-
-  return <></>
-}

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

@@ -1,77 +0,0 @@
-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'
-
-export function ModelVideo() {
-  const controller = useController()
-  const five = useFiveInstance()
-  const ref = React.useRef<ReturnType<typeof ModelTVVideoPlugin>>()
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-
-  React.useEffect(() => {
-    const callback = async (keyframe: VreoKeyframe) => {
-      if (!ref.current) {
-        ref.current = ModelTVVideoPlugin(five, {})
-      }
-      const { start, end } = keyframe
-      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,
-        },
-        controller.configs?.videos?.modelTVVideo
-      )
-
-      ref.current.enable()
-      timeoutRef.current = setTimeout(() => ref.current?.disable(), end - start)
-    }
-
-    controller.on(VreoKeyframeEnum.ModelVideo, callback)
-    return () => {
-      controller.off(VreoKeyframeEnum.ModelVideo, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [controller])
-
-  return <></>
-}

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

@@ -1,99 +0,0 @@
-import * as React from 'react'
-import { Vector3 } from 'three'
-import classNames from 'classnames'
-
-import lineAnime from './lineAnime'
-import { useController, useFiveInstance, useFiveProject2d } from '../../../hooks'
-import { BetterTween } from '../../../../shared-utils/animationFrame/BetterTween'
-import { PanoEffectData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-
-export function PanoEffect() {
-  const [state, setState] = React.useState<{
-    center: Vector3
-    distance: number
-  } | null>(null)
-
-  const five = useFiveInstance()
-  const lineRef = React.useRef<BetterTween<{ progress: number }> | null>(null)
-  const [pos, setPos] = React.useState<{ left: number; top: number } | null>(null)
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-
-  const controller = useController()
-  const project2d = useFiveProject2d()
-
-  const delLine = () => {
-    if (lineRef.current) {
-      lineRef.current.dispose()
-    }
-  }
-
-  React.useEffect(() => {
-    const callback = (keyframe: VreoKeyframe) => {
-      const { start, end, data } = keyframe
-
-      const videoEffectData = data as PanoEffectData
-
-      const [v1, v2] = videoEffectData.twoVertexs
-      const p1 = new Vector3(v1.x, v1.y, v1.z)
-      const p2 = new Vector3(v2.x, v2.y, v2.z)
-
-      lineRef.current = lineAnime(five, p1.clone(), p2.clone())
-      lineRef.current.play()
-
-      const center = p1.lerp(p2, 0.5)
-      const distance = p1.distanceTo(p2)
-
-      const p = project2d(center)
-      if (!p) return
-      const { x: left, y: top } = p
-      setState({ center, distance })
-      setPos({ left, top })
-      timeoutRef.current = setTimeout(() => {
-        setState(null)
-        setPos(null)
-        delLine()
-      }, end - start)
-    }
-
-    controller.on(VreoKeyframeEnum.PanoEffect, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.PanoEffect, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-      delLine()
-    }
-  }, [controller])
-
-  React.useEffect(() => {
-    const callback = () => {
-      if (!state?.center) return
-      const { x, y, z } = state.center
-      const res = project2d(new Vector3(x, y, z))
-      if (!res) return
-      const { x: left, y: top } = res
-      setPos({ left, top })
-    }
-    five.on('currentStateChange', callback)
-    return () => {
-      five.off('currentStateChange', callback)
-    }
-  }, [state?.center])
-
-  return (
-    <>
-      <div
-        className={classNames('PanoEffect', {
-          'PanoEffect--notHidden': state,
-        })}
-        style={{
-          left: (pos?.left || 0) + 'px',
-          top: (pos?.top || 0) + 'px',
-        }}
-      >
-        {state?.distance.toFixed(4) + 'm'}
-      </div>
-    </>
-  )
-}

package/resources/Player/modules/keyframes/PanoEffect/lineAnime.ts

@@ -1,31 +0,0 @@
-import * as THREE from 'three'
-import { Five } from '@realsee/five'
-import { Line as FiveLine } from '@realsee/five/line'
-import { tweenProgress } from '../../../../shared-utils/animationFrame/BetterTween'
-
-export default function lineAnime(five: Five, startPoint: THREE.Vector3, endPoint: THREE.Vector3) {
-  const pointImage =
-    'data:image/png;base64,' +
-    'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg=='
-  const pointTexture = new THREE.TextureLoader().load(pointImage)
-  const color = new THREE.Color(0xffffff) as any
-  const line = new FiveLine()
-  line.setMaterial({ linewidth: 2, color })
-  const pointMaterial = line.points.material as THREE.PointsMaterial
-  pointMaterial.map = pointTexture
-  pointMaterial.color.set(color)
-  line.line.material.depthTest = false
-  return tweenProgress()
-    .onUpdate(({ progress }) => {
-      const lerpLeft = 0.5 - progress / 2
-      const lerpRight = 0.5 + progress / 2
-      const leftPoint = startPoint.clone().lerp(endPoint, lerpLeft)
-      const rightPoint = startPoint.clone().lerp(endPoint, lerpRight)
-      line.setPoints(leftPoint, rightPoint)
-    })
-    .onStart(() => five.scene.add(line))
-    .onDispose(() => {
-      five.scene.remove(line)
-      five.needsRender = true
-    })
-}

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

@@ -1,82 +0,0 @@
-import * as React from 'react'
-import { useController, useFiveInstance } from '../../../hooks'
-import { PanoTagData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-
-import { ContentType, DimensionType, PanoTagPlugin, PointType, Tag } from '@realsee/dnalogel'
-
-export function PanoTag() {
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-  const controller = useController()
-  const five = useFiveInstance()
-  const panoTagPlugin = React.useRef(PanoTagPlugin(five as any, {
-    config: {
-      globalConfig: {
-        visibleConfig: {
-          keep: 'visible'
-        },
-        unfoldedConfig: {
-          autoUnfold: {
-            strategy: 'MinimumDistance'
-          },
-          unfoldDistance: { max: 100 }
-        }
-      }
-    }
-  }))
-
-  React.useEffect(() => {
-    if (controller.configs?.keyframeMap.PanoTag === false) {
-      return
-    }
-    const callback = (keyframe: VreoKeyframe) => {
-      if (!panoTagPlugin.current) return
-
-      const { start, end, data } = keyframe
-
-      const panoTagData = data as PanoTagData
-
-      const id = Date.now().toString()
-      const pointType = PointType.PointTag
-      const dimensionType = DimensionType.Two
-      const position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z]
-      const tag: Tag = (() => {
-        if (panoTagData.imgUrl) {
-          return { id, pointType, position, dimensionType, contentType: ContentType.ImageText, data: { text: panoTagData.text, mediaData: [{ type: 'Image',  url: panoTagData.imgUrl }] }}
-        } else {
-          return { id, pointType, position, dimensionType, contentType: ContentType.Text, data: { text: panoTagData.text }}
-        }
-      })()
-
-      // show
-      panoTagPlugin.current.load({ tagList: [tag] })
-
-      timeoutRef.current = setTimeout(() => {
-        // clear
-        const tag = panoTagPlugin.current.getTagById(id)
-        if (tag.state) {
-          tag.state.unfolded = false
-          ;(panoTagPlugin.current as any).updateRenderAllTags()
-        }
-        tag.hooks?.on('folded', () => {
-          setTimeout(() => {
-            if (tag.state) {
-              tag.state.visible = false
-              panoTagPlugin.current.destroyTagById(id)
-            }
-          }, 1500)
-        })
-      }, end - start)
-    }
-
-    controller.on(VreoKeyframeEnum.PanoTag, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.PanoTag, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [controller])
-
-  return null
-}

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

@@ -1,117 +0,0 @@
-import * as React from 'react'
-import * as THREE from 'three'
-import ReactDOM from 'react-dom'
-import { Vector3, Quaternion } from 'three'
-
-import { useController, useFiveInstance } from '../../../hooks'
-import { CSS3DRenderPlugin } from '../../../../fivePlugins/CSS3DRenderPlugin'
-import { PanoTextLabelData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-
-/**
- * 通过传入中心点确定矩形框架容器的四个点：
- *  1. 已知矩形长宽和中心点
- *  2. 借助planeGeometry生成垂直相机视角的平面上的四个点
- *  3. 通过向量相加，平行四边形法则获取到移动position后的面上四个点
- */
-const calcPoints = (
-  centerPoint: Vector3,
-  normal: THREE.Vector3 | undefined,
-  wrapperLength: number,
-  wrapperWidth: number
-) => {
-  // 375px 对应 1m
-  const length = wrapperLength / 375
-  const width = wrapperWidth / 375
-
-  const geometry = new THREE.PlaneGeometry(length, width)
-  if (normal) {
-    const lookPoint = new THREE.Vector3(normal.x + centerPoint.x, normal.y + centerPoint.y, normal.z + centerPoint.z)
-    geometry.lookAt(lookPoint)
-  }
-  // const pointgeometry = new THREE.Geometry()
-  // pointgeometry.vertices.push(cameraPosition)
-  // const pointmaterial = new THREE.PointsMaterial({
-  //   color: 0xffffff,
-  //   size: 0.4,
-  // })
-  // _point = new THREE.Points(pointgeometry, pointmaterial)
-
-  const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide })
-  const plane = new THREE.Mesh(geometry, material)
-  const v0 = centerPoint.clone()
-  plane.position.copy(v0)
-
-  // 计算传入的四个点的坐标
-  const [v1, v2, v3, v4] = plane.geometry.vertices
-  const downLeft = v0.clone().add(v4)
-  const downRight = v0.clone().add(v3)
-  const upLeft = v0.clone().add(v2)
-  const upRight = v0.clone().add(v1)
-
-  // 插件使用要求：矩形四个点位数据，顺序为**必须**为左下、右下、右上、左上
-  return [downLeft, downRight, upRight, upLeft]
-}
-
-/**
- * 空间文本标签。
- */
-export function PanoTextLabel() {
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-  const controller = useController()
-  const five = useFiveInstance()
-  const ref = React.useRef<ReturnType<typeof CSS3DRenderPlugin>>()
-
-  React.useEffect(() => {
-    if (controller.configs?.keyframeMap.PanoTextLabel === false) {
-      return
-    }
-    const callback = (keyframe: VreoKeyframe) => {
-      const { start, end, data } = keyframe
-      const panoTextLabelData = data as PanoTextLabelData
-      // 增加无文本情况的判断
-      if (data.text === '') return
-
-      const { x, y, z } = panoTextLabelData.vertex
-      const centerPoint = new Vector3(x, y, z)
-      const normal = new Vector3(panoTextLabelData.normal?.x, panoTextLabelData.normal?.y, panoTextLabelData.normal?.z)
-      // 生成传入的四个点，将文本框最大宽度定在200px，最高高度在30px
-      const wrapperLength = 200
-      const wrapperWidth = 30
-      const points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth)
-
-      if (!ref.current) ref.current = CSS3DRenderPlugin(five)
-      const container = ref.current.create3DDomContainer(points)
-      const css3DObject = container?.css3DObject
-      // 将获取的mesh进行旋转操作，根据欧拉角去进行mesh的变换
-      if (data.quaternion) {
-        const quaternion = new Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w)
-        css3DObject?.quaternion.copy(quaternion)
-      }
-      if (container?.container)
-        ReactDOM.render(
-          <div className="PanoTextLabel PanoTextLabel--notHidden">
-            <div className="PanoTextLabel-wrapper">
-              <div style={{ fontSize: `${data.fontSize || 16}px` }} className="PanoText-innerText">
-                {data.text || ''}
-              </div>
-            </div>
-          </div>,
-          container?.container
-        )
-
-      timeoutRef.current = setTimeout(() => {
-        ref.current?.disposeAll()
-      }, end - start)
-    }
-    controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [controller])
-
-  return <></>
-}

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

@@ -1,56 +0,0 @@
-import * as React from 'react'
-import classNames from 'classnames'
-import { useController } from '../../../hooks'
-
-import { VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-
-export function Prompter() {
-  const [text, setText] = React.useState<string>('')
-  const [hidden, setHidden] = React.useState<boolean>(true)
-  const ref = React.useRef<NodeJS.Timeout | null>(null)
-  const controller = useController()
-
-  React.useEffect(() => {
-    if (controller.configs?.keyframeMap.Prompter === false) {
-      return
-    }
-    const callback = (keyframe: VreoKeyframe) => {
-      const { start, end, data } = keyframe
-      setText(data.text)
-      setHidden(false)
-
-      if (ref.current) {
-        clearTimeout(ref.current)
-        ref.current = null
-      }
-
-      ref.current = setTimeout(() => {
-        setHidden(true)
-        setText('')
-        // setTimeout(() => setText(''), 500)
-
-        if (ref.current) clearTimeout(ref.current)
-        ref.current = null
-      }, end - start)
-    }
-
-    controller.on(VreoKeyframeEnum.Prompter, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.Prompter, callback)
-    }
-  }, [controller])
-
-  return (
-    <div
-      className={classNames('vreo-prompter', {
-        'vreo-prompter--hidden': hidden,
-        [`vreo-prompter-left--${controller.agentType}`]: true,
-      })}
-    >
-      <div className="vreo-prompter-text">
-        <div className="vreo-prompter-innerText">{text}</div>
-      </div>
-    </div>
-  )
-}