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

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

@@ -1,99 +0,0 @@
-import * as React from 'react'
-import { parseWork, Work } from '@realsee/five'
-import { useController, useFiveInstance } from '../../../hooks'
-import { UpdateVRPanoramaData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-
-export function UpdateVRPanorama() {
-  const controller = useController()
-  const five = useFiveInstance()
-  const deafultWorkRef = React.useRef<string[] | null>(null)
-  const updateWorkRef = React.useRef<Work | null>(null)
-
-  // 恢复默认 VR
-  const restoreCallback = React.useCallback(() => {
-    // 先清理掉 之前的 VR 数据备份
-    updateWorkRef.current = null
-
-    if (deafultWorkRef.current) {
-      const work = parseWork(deafultWorkRef.current)
-      five.load(work)
-    }
-   
-  }, [])
-
-  // 暂停时： 恢复默认 VR 
-  const pausedCallback = React.useCallback(() => {
-    if (deafultWorkRef.current) {
-      const work = parseWork(deafultWorkRef.current)
-      Object.assign(window, {$rawWork: work})
-      five.load(work)
-    }
-  }, [])
-
-  // 播放时：如果暂停前有更新 VR 需要还原
-  const playingCallback = React.useCallback(() => {
-    if (!updateWorkRef.current) {
-      return
-    }
-    five.load(updateWorkRef.current)
-  }, [])
-
-  React.useEffect(() => {
-    const callback = (keyframe: VreoKeyframe) => {
-      if (!deafultWorkRef.current) {
-        deafultWorkRef.current = five.work.raw.works
-      }
-
-      const data = keyframe.data as UpdateVRPanoramaData
-
-      // 如果数据中有新 work 数据，则直接载入
-      if (data.work) {
-        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)
-        const panorama = lastWork.panorama
-        const index = data.dynamic_scene.images.index
-        panorama.list[index] = data.dynamic_scene.images
-        data.panorama = panorama
-        delete data.dynamic_scene
-      }
-
-      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)
-
-    // 离开 将之前的内容清空
-    controller.on(VreoKeyframeEnum.Exit, restoreCallback)
-  
-    // 新载入数据 将之前的内容清空
-    controller.on('loaded', restoreCallback)
-
-    // 暂停 回到默认状态
-    controller.on('paused', pausedCallback)
-    // 播放 回归暂停前状态
-    controller.on('playing', playingCallback)
-
-    return () => {
-      // 清理事件监听
-      controller.off(VreoKeyframeEnum.UpdateVRPanorama, callback)
-      controller.off(VreoKeyframeEnum.Exit, restoreCallback)
-      controller.off('loaded', restoreCallback)
-      controller.off('paused', pausedCallback)
-      controller.off('playing', playingCallback)
-    }
-  }, [])
-
-  return <></>
-}

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

@@ -1,115 +0,0 @@
-import classNames from 'classnames'
-import * as React from 'react'
-// import { Preloader } from '../../../../shared-utils/Preloader'
-import { VideoEffectData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
-
-const inlinePlay = (videoInstance?: HTMLVideoElement | null) => {
-  if (!videoInstance) return
-  const canplaythrough = () => {
-    videoInstance.removeEventListener('canplaythrough', canplaythrough)
-    try {
-      videoInstance.play()
-    } catch (error) {}
-  }
-  videoInstance.addEventListener('canplaythrough', canplaythrough)
-  videoInstance.load()
-}
-
-// const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
-const PI = Math.PI
-const PI_2 = PI * 2
-
-export function VideoEffect() {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const videoRef = React.useRef<HTMLVideoElement | null>()
-  const controller = useController()
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>()
-
-  const [visible, setVisible] = React.useState(false)
-  const five = useFiveInstance()
-  const setBlobSrc = (blob: string) => {
-    if (!videoRef.current) return
-
-    videoRef.current.src = blob
-  }
-
-  React.useEffect(() => {
-    const callback = async (keyframe: VreoKeyframe) => {
-      const { start, end } = keyframe
-      const { videoSrc, fov, direction, panoIndex, vector } = keyframe.data as VideoEffectData
-      const [longitude, latitude] = (() => {
-        if (vector) {
-          return [vector.longitude, vector.latitude]
-        }
-        if (!direction) {
-          return [0, 0]
-        }
-
-        let longitude = -Math.atan2(direction.x, -direction.z)
-        longitude = ((longitude % PI_2) + PI_2) % PI_2
-        const latitude = -Math.asin(direction.y / 1)
-        return [longitude, latitude]
-      })()
-
-      five.setState({ fov, panoIndex, longitude, latitude }, true)
-      setBlobSrc(videoSrc)
-
-      inlinePlay(videoRef.current)
-      setVisible(true)
-
-      timeoutRef.current = setTimeout(() => {
-        if (!videoRef.current?.paused) {
-          videoRef.current?.pause()
-        }
-        setVisible(false)
-        setBlobSrc('')
-      }, end - start)
-    }
-
-    controller.on(VreoKeyframeEnum.VideoEffect, callback)
-    return () => {
-      controller.off(VreoKeyframeEnum.VideoEffect, callback)
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [controller])
-
-  React.useEffect(() => {
-    if (!ref.current) return
-    const video = controller.configs?.videos?.videoEffect || document.createElement('video')
-    // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
-    video.setAttribute('playsinline', 'true')
-    video.setAttribute('webkit-playsinline', 'true')
-    video.setAttribute('autoplay', 'true')
-    video.setAttribute('key', 'VideoEffect-video')
-    video.setAttribute('class', 'VideoEffect-video')
-
-    videoRef.current = video
-    ref.current.append(videoRef.current)
-    document.addEventListener(
-      'WeixinJSBridgeReady',
-      function () {
-        videoRef.current?.play()
-      },
-      false
-    )
-
-    if (!ref.current) return
-    // const asyncfunc = async () => {
-    //   setBlobSrc(await URL.createObjectURL(await Preloader.blob(emptyVideo)))
-    //   inlinePlay(videoRef.current)
-    // }
-    // asyncfunc()
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      className={classNames('VideoEffect', {
-        'VideoEffect--visible': visible,
-      })}
-    ></div>
-  )
-}

package/resources/Player/typings.ts

@@ -1,49 +0,0 @@
-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 {
-/**
- * @deprecated rename to container
- */
-  containter?: Element
-  container?: Element
-  keyframeMap: VreoKeyframeConfigMap
-  /**
-   * 微信端自动播放功能实现需要提前初始化 Video 实例。
-   *
-   * 如果需要支持微信浏览器端自动播放需要接入微信SDK及提前初始化好相关 Video 实例。
-   */
-  videos?: {
-    videoEffect?: HTMLVideoElement
-    modelTVVideo?: HTMLVideoElement
-  }
-
-  videoAgentMeshOptions?: VideoAgentMeshOptions
-  /**
-   * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
-   */
-  customPanelChildren?: ReactNode
-  customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
-  imageOptions?: { size: number }
-  autoPreload?: boolean
-  appSize?: AppSize
-  appearance?: Appearance
-}
-
-export type AppSize = 'S' | 'M' | 'L' | 'XL'
-
-export type WaveAppearance = 'single' | 'double' | 'solid' | 'swap' | 'expand'
-
-export interface Appearance {
-  waveStyle?: 'wave' | 'solid'
-}
-
-export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>
-
-export interface CustomVreoKeyframeProps {
-  subscribe: VreoSubscribe
-  five: Five
-}

package/resources/fivePlugins/CSS3DRenderPlugin/centerPoint.ts

@@ -1,5 +0,0 @@
-import { Vector3 } from 'three'
-
-export default function centerPoint(point1: Vector3, point2: Vector3): Vector3 {
-  return new Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2)
-}

package/resources/fivePlugins/CSS3DRenderPlugin/createResizeObserver.ts

@@ -1,17 +0,0 @@
-/**
- * @description: 简陋的 ResizeObserver polyfill
- */
- export default function createResizeObserver(func: () => any, element?: HTMLElement) {
-  if (!element || typeof ResizeObserver === 'undefined') {
-    return {
-      observe: () => window.addEventListener('resize', func),
-      unobserve: () => window.removeEventListener('resize', func),
-    }
-  } else {
-    const observer = new ResizeObserver(func)
-    return {
-      observe: () => observer.observe(element),
-      unobserve: () => observer.unobserve(element),
-    }
-  }
-}

package/resources/fivePlugins/CSS3DRenderPlugin/evenNumber.ts

@@ -1,4 +0,0 @@
-export default function evenNumber(num: number, config?: { smaller?: boolean }): number {
-  const roundNum = Math.round(num)
-  return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.smaller ? -1 : 1)
-}

package/resources/fivePlugins/CSS3DRenderPlugin/index.ts

@@ -1,254 +0,0 @@
-import { FivePlugin } from '@realsee/five'
-import * as THREE from 'three'
-import { Scene, Vector3 } from 'three'
-import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
-import evenNumber from './evenNumber'
-import centerPoint from './centerPoint'
-import transformPositionToVector3 from './transformPositionToVector3'
-import createResizeObserver from './createResizeObserver'
-
-/**
- * 三维向量
- */
- export interface Vector3Position {
-  x: number
-  y: number
-  z: number
-}
-
-export type CSS3DRenderPluginParameterType = undefined
-export interface CSS3DRenderPluginExportType {
-  /**
-   * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-   * @param {Five} five
-   * @param {Vector3[] | Vector3Position[]} points: 矩形四个点坐标
-   * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
-   * @param {number} config.dpr: dpr, 默认为1
-   * @param {HTMLElement} config.container: HTMLElement
-   * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
-   * @param {'front' | 'behind'} config.mode: 两种模式
-   * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
-   * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
-   */
-  create3DDomContainer: (
-    points: Vector3[] | Vector3Position[],
-    config?: { ratio?: number; dpr?: number; autoRender?: boolean; container?: HTMLElement; [key: string]: any } & (
-      | { mode?: 'front' }
-      | { mode: 'behind'; behindFiveContainer: HTMLElement }
-    ),
-  ) => { container: HTMLElement; dispose: () => void; css3DObject: CSS3DObject; render?: () => void } | void
-
-  /**
-   * @description: 销毁所有的渲染内容
-   * @return {void}
-   */
-  disposeAll: () => void
-}
-
-type Create3DDomContainerInterface = CSS3DRenderPluginExportType['create3DDomContainer']
-type Create3DDomContainerConfigInterface = NonNullable<Parameters<Create3DDomContainerInterface>[1]>
-interface CSS3DRenderPluginState {
-  disposeCallbacks: (() => boolean)[]
-  frontMode?: {
-    scene: Scene
-    css3DRenderer: CSS3DRenderer
-  }
-  behindMode?: {
-    scene: Scene
-    css3DRenderer: CSS3DRenderer
-  }
-}
-
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export const CSS3DRenderPlugin: FivePlugin<CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType> = (five) => {
-  const state: CSS3DRenderPluginState = { disposeCallbacks: [] }
-  const create3DDomContainer = (
-    ...params: Parameters<Create3DDomContainerInterface>
-  ): ReturnType<Create3DDomContainerInterface> => {
-    const points = params[0].map((point) => (point instanceof Vector3 ? point : transformPositionToVector3(point)))
-    const config = params[1]
-    if (points?.length < 4) return console.error('points must be equal or greater than than 4')
-    if (!five?.model?.loaded) return console.error('five.model.loaded is: ', five?.model?.loaded)
-    const fiveElement = five.getElement()
-    if (!fiveElement) return console.error('five.getElement() is ' + fiveElement)
-
-    const disposers: any[] = []
-    const ratio = config?.ratio || 0.00216
-    if (ratio <= 0.00215) console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215')
-    const dpr = config?.dpr || 1
-    const mode = config?.mode || 'front'
-    const autoRender = config?.autoRender ?? true
-    const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body
-    const container = config?.container || document.createElement('div')
-    container.classList.add('__Vreo-plugin--CSS3DRenderPlugin')
-
-    // 获取css3DObject, 如果mode为behind的话，一起获取mesh
-    const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode })
-
-    // ======= INIT START =======
-    let resizeObserver:
-      | {
-          observe?: () => void
-          unobserve?: () => void
-        }
-      | undefined
-    const frontModeUnInited = mode === 'front' && !state.frontMode
-    const behindModeUnInited = mode === 'behind' && !state.behindMode
-    const inited = !(frontModeUnInited || behindModeUnInited)
-    let stopRenderFlag = false
-    let requestAnimationFrameId: number | null = null
-
-    if (behindModeUnInited) {
-      state.behindMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() }
-    }
-    if (frontModeUnInited) {
-      state.frontMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() }
-    }
-    const { scene, css3DRenderer } = mode === 'behind' ? state.behindMode! : state.frontMode!
-
-    const render = (() => {
-      if (!inited) {
-        const css3DRendererSetSize = () => {
-          // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-          // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-          const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true })
-          const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true })
-          css3DRenderer.setSize(rendererWidth, rendererHeight)
-        }
-        css3DRendererSetSize()
-        resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement)
-        css3DRenderer.domElement.style.position = 'absolute'
-        css3DRenderer.domElement.style.top = '0'
-        css3DRenderer.domElement.style.userSelect = 'none'
-        css3DRenderer.domElement.style.pointerEvents = 'none'
-
-        const renderEveryFrame = () => {
-          if (stopRenderFlag) return
-          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame)
-          css3DRenderer.render(scene!, five.camera)
-        }
-        return () => {
-          scene.add(css3DObject)
-          resizeObserver?.observe?.()
-          renderEveryFrame()
-          if (mode === 'behind' && mesh) {
-            five.scene.add(mesh)
-            disposers.push(() => mesh && five.scene.remove(mesh))
-          }
-        }
-      } else {
-        return () => {
-          scene.add(css3DObject)
-        }
-      }
-    })()
-    if (frontModeUnInited) {
-      const wrapper = fiveElement.parentElement || document.body
-      wrapper.appendChild(css3DRenderer.domElement)
-    }
-    if (behindModeUnInited) {
-      const wrapper = behindFiveContainer
-      wrapper.appendChild(css3DRenderer.domElement)
-    }
-    // ======= INIT END =======
-
-    const dispose = () => {
-      stopRenderFlag = true
-      disposers.forEach((d) => d?.())
-      scene.remove(css3DObject)
-      if (typeof requestAnimationFrameId === 'number') cancelAnimationFrame(requestAnimationFrameId)
-      if (scene.children.length === 0) {
-        css3DRenderer.domElement.remove()
-        if (mode === 'front') state.frontMode = undefined
-        if (mode === 'behind') state.behindMode = undefined
-        if (!state.behindMode && !state.frontMode) {
-          resizeObserver?.unobserve?.()
-        }
-      }
-      return true
-    }
-    const idx = state.disposeCallbacks.findIndex((item) => item === dispose)
-    if (idx !== -1) {
-      state.disposeCallbacks.splice(idx, 1)
-    } else {
-      state.disposeCallbacks.push(dispose)
-    }
-
-    if (autoRender) render()
-    return { container, dispose, css3DObject, render: autoRender ? undefined : render }
-  }
-
-  const createObject = (
-    points: Vector3[],
-    config: Required<Pick<Create3DDomContainerConfigInterface, 'ratio' | 'dpr' | 'container'>> &
-      Pick<Create3DDomContainerConfigInterface, 'mode'>,
-  ) => {
-    const { ratio, dpr, container: element, mode } = config
-    const planeWidth = points[0].distanceTo(points[1])
-    const planeHeight = points[1].distanceTo(points[2])
-    const domWidthPx = evenNumber((planeWidth / ratio) * dpr)
-    const domHeightPx = evenNumber((planeHeight / ratio) * dpr)
-
-    const css3DObject = new CSS3DObject(element)
-    css3DObject.scale.set(ratio, ratio, ratio)
-    element.style.width = domWidthPx + 'px'
-    element.style.height = domHeightPx + 'px'
-    element.style.pointerEvents = 'none'
-
-    const centerPosition = centerPoint(points[0], points[2])
-
-    const vector01 = points[1].clone().sub(points[0]) // 点0 -> 点1 的向量
-    const vector12 = points[2].clone().sub(points[1]) // 点1 -> 点2 的向量
-
-    // 旋转
-    const rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z))
-    const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z))
-    const rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z))
-    /**
-     * [0,1,0] => [0,0,1]  为rolate Worldx正方向
-     * [0,0,1] => [0,1,0]  为rolate Worldy正方向
-     * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
-     */
-    const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle
-    const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle
-    const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle
-
-    css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX) // x
-    css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY) // y
-    css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ) // z
-
-    css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z)
-
-    let mesh: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial> | undefined
-    if (mode === 'behind') {
-      const material = new THREE.MeshBasicMaterial({
-        opacity: 0,
-        transparent: false,
-        side: THREE.DoubleSide,
-      })
-      const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx)
-      mesh = new THREE.Mesh(geometry, material)
-      mesh.name = 'CSS3DRenderPlugin-mesh'
-      mesh.position.copy(css3DObject.position)
-      mesh.rotation.copy(css3DObject.rotation)
-      mesh.scale.copy(css3DObject.scale)
-    }
-
-    return { css3DObject, mesh }
-  }
-
-  return {
-    create3DDomContainer,
-    disposeAll: () => {
-      state.disposeCallbacks.forEach((d) => d?.())
-      state.disposeCallbacks = []
-    },
-  }
-}
-
-export default CSS3DRenderPlugin

package/resources/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.ts

@@ -1,5 +0,0 @@
-import { Vector3 } from 'three'
-
-const transformPositionToVector3 = ({ x, y, z }: { x: number; y: number; z: number }) => new Vector3(x, y, z)
-
-export default transformPositionToVector3