@realsee/vreo 1.0.0-alpha.19 → 1.0.0-alpha.20

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

@@ -1,302 +0,0 @@
-import * as THREE from 'three'
-import { Preloader } from '../../../shared-utils/Preloader'
-import { makeObservable, observable, runInAction } from 'mobx'
-import AudioLike from '../../../shared-utils/AudioLike'
-import { getMediaType } from '../../../shared-utils/getMediaInfo'
-
-const vertexShader = `
-varying vec2 vUv;
-varying vec2 vColorUv;
-varying vec2 vMaskUv;
-void main(){
-  vUv = uv;
-  vColorUv = vec2(uv.x / 2.0, uv.y);
-  vMaskUv = vec2(0.5 + uv.x / 2.0, uv.y);
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`
-const fragmentShaderTpl = () => `
-uniform int enable;
-uniform sampler2D map;
-varying vec2 vUv;
-varying vec2 vColorUv;
-varying vec2 vMaskUv;
-
-vec3 hsv2rgb(vec3 c) {
-  const vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
-  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
-  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}
-
-vec3 rgb2hsv(vec3 c) {
-  const vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
-  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
-
-  float d = q.x - min(q.w, q.y);
-  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + 0.001)), d / (q.x + 0.001), q.x);
-}
-
-void main(void) {
-  vec3 color = texture2D(map, vUv).xyz;
-  float amask = 1.0;
-
-  float ref = color.r;
-  if (ref < color.b) ref = color.b;
-  amask = color.g - ref + 0.1;
-  amask = smoothstep(0.1, 0.3, amask);
-  amask = 1.0 - amask;
-
-  vec3 target = rgb2hsv(vec3(0.0 / 255.0, 255.0 / 255.0, 0.0 / 255.0));
-  vec3 hsv = rgb2hsv(color);
-  float distance = abs(hsv.x - target.x);
-  if (distance < 0.15) {
-    hsv.y = 0.0;
-  }
-  color = hsv2rgb(hsv);
-
-  gl_FragColor = vec4(color.rgb, amask * float(enable));
-}
-`
-
-const cacheInstance: {
-  videoInstance?: HTMLVideoElement
-  audioInstance?: HTMLAudioElement
-} = {}
-
-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
-}
-
-/**
- * 视频经纪人MESH
- */
-export class VideoAgentMesh extends THREE.Mesh {
-  options: VideoAgentMeshOptions
-  videoUrl?: string
-  freeze: boolean 
-  paused: boolean
-  audioInstance: HTMLAudioElement
-  audioLikeInstance: AudioLike
-  $removeEventListener: () => void
-
-  get mediaInstance(): HTMLAudioElement | HTMLVideoElement | AudioLike {
-    if (!this.videoUrl) {
-      return this.audioLikeInstance
-    }
-
-    if (getMediaType(this.videoUrl) === 'audio') {
-      return this.audioInstance
-    }
-
-    const uniforms = (this.material as THREE.ShaderMaterial).uniforms
-    const videoInstance = uniforms.map.value.image as HTMLVideoElement
-
-    return videoInstance
-  }
-
-  /**
-   *
-   * @param width
-   * @param height
-   * @param widthSegments
-   * @param heightSegments
-   * @param options
-   */
-  constructor(
-    width: number,
-    height: number,
-    widthSegments: number,
-    heightSegments: number,
-    options: VideoAgentMeshOptions = {
-      preload: true
-    },
-  ) {
-    if (!options.videoInstance) {
-      if (cacheInstance.videoInstance) {
-        options.videoInstance = cacheInstance.videoInstance
-      } else {
-        const videoInstance = document.createElement('video')
-        videoInstance.style.opacity = '0'
-        videoInstance.style.pointerEvents = 'none'
-        videoInstance.style.display = 'none'
-        document.body.append(videoInstance)
-        options.videoInstance = videoInstance
-        cacheInstance.videoInstance = videoInstance
-        videoInstance.playsInline = true
-        videoInstance.controls = false
-      }
-    }
-
-    const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
-    const videoTexture = new THREE.VideoTexture(options.videoInstance)
-    const material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: { value: videoTexture },
-        enable: { value: 0 },
-      },
-      vertexShader,
-      fragmentShader: fragmentShaderTpl(),
-      transparent: true,
-    })
-
-    super(geometry, material)
-    this.options = options
-    this.freeze = false
-    this.paused = true
-
-    if (!options.audioInstance) {
-      if (cacheInstance.audioInstance) {
-        this.audioInstance = cacheInstance.audioInstance
-      } else {
-        const audioInstance = document.createElement('audio')
-        audioInstance.crossOrigin = ''
-        // videoInstance.muted = true
-        audioInstance.muted = false
-        audioInstance.autoplay = false
-        audioInstance.style.display = 'none'
-        document.body.appendChild(audioInstance)
-        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.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.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
-    }
-
-    this.videoUrl = videoUrl
-
-    // // 兼容非视频场景
-    // if (this.mediaInstance instanceof HTMLAudioElement) {
-    //   this.mediaInstance.style.display = 'none'
-    // } else if (this.mediaInstance instanceof HTMLVideoElement) {
-    //   this.mediaInstance.style.display = 'block'
-    // }
-
-    this.freeze = true
-    await this.mediaInstance.pause()
-
-    const uniforms = (this.material as THREE.ShaderMaterial).uniforms
-    this.mediaInstance.muted = true
-
-    this.mediaInstance.src = (this.options.preload || this.options.preload === undefined || getMediaType(this.videoUrl) === 'video') ?
-      await URL.createObjectURL((await Preloader.blob(this.videoUrl)) as unknown as Blob) : this.videoUrl
-    this.mediaInstance.setAttribute('data-src', this.videoUrl)
-
-    const onStart = () => {
-      if (this.mediaInstance.currentTime === 0) return
-      this.freeze = false
-      this.mediaInstance.muted = false
-      uniforms.enable.value = getMediaType(this.videoUrl) ? 1 : 0
-      this.mediaInstance.removeEventListener('timeupdate', onStart, false)
-
-    }
-
-    this.mediaInstance.addEventListener('timeupdate', onStart, false)
-  }
-
-  async play(videoUrl = '', currentTime = 0, duration?: number) {
-    videoUrl = videoUrl || ''
-
-    if (duration && !videoUrl) {
-      if (this.currentTime) {
-        this.mediaInstance.currentTime = currentTime
-      }
-      (this.mediaInstance as AudioLike).duration = duration
-      this.videoUrl = ''
-      this.mediaInstance.play()
-      return true
-    }
-
-    if (!videoUrl) {
-      if (this.videoUrl) await this.mediaInstance.play()
-      else console.warn('警告：视频资源未初始化。')
-      return true
-    }
-
-    if (videoUrl === this.videoUrl) {
-      this.mediaInstance.currentTime = currentTime
-      await this.mediaInstance.play()
-      return true
-    }
-
-    await this.update(videoUrl)
-
-    this.mediaInstance.pause()
-
-    return await new Promise((resolve) =>
-      setTimeout(async () => {
-        this.mediaInstance.currentTime = currentTime
-        await this.mediaInstance.play()
-        resolve(true)
-      }, 20),
-    )
-  }
-
-  /**
-   * 秒转成毫秒，保障精准度
-   */
-  get currentTime() {
-    return this.mediaInstance.currentTime * 1000
-  }
-
-  dispose() {
-    // 销毁事件监听
-    this.$removeEventListener()
-    if (cacheInstance.audioInstance) {
-      document.body.removeChild(cacheInstance.audioInstance)
-      cacheInstance.audioInstance = undefined
-    }
-
-    if (cacheInstance.videoInstance) {
-      document.body.removeChild(cacheInstance.videoInstance)
-      cacheInstance.videoInstance = undefined
-    }
-  }
-}

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

@@ -1,56 +0,0 @@
-import * as THREE from 'three'
-import { addResizeListener } from '../../../shared-utils/addResizeListener'
-import { getMediaType } from '../../../shared-utils/getMediaInfo'
-import { VideoAgentMesh, VideoAgentMeshOptions } from './VideoAgentMesh'
-
-export class VideoAgentScene {
-  videoAgentMesh: VideoAgentMesh
-
-  scene = new THREE.Scene()
-  camera = new THREE.OrthographicCamera(-240, 240, 135, -135)
-  renderer = new THREE.WebGLRenderer({ alpha: true })
-  disposers: (() => void)[] = []
-
-  constructor(container?: HTMLElement, options?: VideoAgentMeshOptions) {
-
-    this.videoAgentMesh = new VideoAgentMesh(480, 270, 1, 1, options)
-
-    // const needRender = getMediaType(this.videoAgentMesh.videoUrl) === 'video'
-
-    if (container) {
-
-      this.camera.position.set(0, 0, 10)
-      this.camera.lookAt(0, 0, 0)
-
-      const domElement = this.renderer.domElement
-      domElement.classList.add('VideoAgent-canvas')
-
-      const dispose = addResizeListener(container, (width, height) => {
-        this.renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio)
-        domElement.style.width = `${width}px`
-        domElement.style.height = `${height}px`
-      } )
-
-      this.disposers.push(dispose)
-
-      container.append(domElement)
-      this.scene.add(this.videoAgentMesh)
-      
-      this.run()
-    }
-  }
-
-  run = () => {
-    // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
-    if (!(this.videoAgentMesh.paused || this.videoAgentMesh.freeze) && this.videoAgentMesh.currentTime > 1000) {
-      this.renderer.render(this.scene, this.camera)
-    }
-
-    requestAnimationFrame(this.run)
-  }
-
-  dispose = () => {
-    this.videoAgentMesh?.dispose()
-    this.disposers.forEach(disposer => disposer?.())
-  }
-}

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

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { useController } from '../../hooks'
-import { VideoAgentMeshOptions } from './VideoAgentMesh'
-import { VideoAgentScene } from './VideoAgentScene'
-import classNames from 'classnames'
-
-export function VideoAgent(props: { onClick?: () => void; options?: VideoAgentMeshOptions }) {
-  const ref = React.useRef<HTMLDivElement>(null)
-  const controller = useController()
-
-  const showAvatar = React.useMemo(() => {
-    return controller.avatar?.url && (controller.avatar.force === true)
-  }, [controller.avatar])
-
-  const showVideoAgent = React.useMemo(() => {
-    if (showAvatar) return false
-    return controller.videoAgentScene?.videoAgentMesh.mediaInstance instanceof HTMLVideoElement
-  }, [controller.videoAgentScene, showAvatar])
-
-  React.useEffect(() => {
-    if (!ref.current) throw new Error('React 渲染异常，请稍后重试 ...')
-    if (controller.videoAgentScene) {
-      console.warn('VideoAgentScene" 重复初始化，已被过滤')
-      return
-    }
-    const videoAgentScene = new VideoAgentScene(ref.current, props.options)
-    controller.videoAgentScene = videoAgentScene
-
-    return () => {
-      controller.dispose()
-      controller.videoAgentScene?.dispose()
-    }
-  }, [])
-
-  return (
-    <>
-      <div className="Avatar" style={{display: showAvatar ? 'block' : 'none'}}>
-        <div className="Avatar-wrapper ratio-1-1">
-          <img className="Avatar-img" src={controller.avatar?.url} onClick={() => props.onClick?.()} />
-        </div>
-      </div>
-      <div className={classNames('VideoAgent', { hide: !showVideoAgent })}>
-        <div className="VideoAgent-container">
-          <div className="VideoAgent-wrapper ratio-16-9">
-            <div className="VideoAgent-inner" ref={ref}>
-              <div className="VideoAgent-play" onClick={() => props.onClick?.()}></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -1,150 +0,0 @@
-import { WaveAppearance } from '../../typings'
-import React, { FC, useState, useCallback, useRef, useEffect, ReactNode } from 'react';
-
-
-const prefix = 'https://vr-public.realsee-cdn.cn/release/static/image/release/'
-
-const WAVES = {
-  single: {
-    width: 766,
-    height: 60,
-    frames: 20,
-    hevc: 'vapor/static/wave-single.140d197f4838c130b69e87dfd0705479.mov',
-    vp9: 'vapor/static/wave-single.eda65de390a830193fff40d1f1255555.webm',
-    png: 'vapor/static/wave-single.f51aade2a6e1c59211698a1a24e6135f.png',
-  },
-  double: {
-    width: 766,
-    height: 60,
-    frames: 16,
-    hevc: 'vapor/static/wave-double.3e6d73050ee6958cc3060b107ebe5f39.mov',
-    vp9: '/vapor/static/wave-double.77dfe8548ebcb3f3d336785d4fe9c7b2.webm',
-    png: '/vapor/static/wave-double.ab4fe7d8a70395109ca4f759af7bd53f.png',
-  },
-  solid: {
-    width: 1126,
-    height: 90,
-    frames: 48,
-    hevc: 'vapor/static/wave-solid.cf68912a93275d07aa6b5097ea11fdda.mov',
-    vp9: 'vapor/static/wave-solid.64438b63cbb346906d066bb7b8dc3e20.webm',
-    png: 'vapor/static/wave-solid.6969d7f3f2f44f7ac1ade30e65660cb1.png',
-  },
-  swap: {
-    width: 2250,
-    height: 180,
-    frames: 41,
-    hevc: 'vapor/static/wave-swap.b38f22e2cf84ee21e9be35f7f56c9cfc.mov',
-    vp9: 'vapor/static/wave-swap.c02e4b94cf05aecf6e7a0023bc7bb90f.webm',
-    png: 'vapor/static/wave-swap.772ba526a7210dcc01567062c6319545.png',
-  },
-  expand: {
-    width: 2250,
-    height: 180,
-    frames: 45,
-    hevc: 'vapor/static/wave-expand.9529956c5954740cd4c9d07d51e32822.mov',
-    vp9: 'vapor/static/wave-expand.a0d2a0074001cd3d4fea56818c6d3c38.webm',
-    png: 'vapor/static/wave-expand.62fcf27b445533e6eb1b17bab5eafa0d.png',
-  }
-} as const;
-
-const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
-const isAppleDevice = /(iPhone|iPad|iPod)/i.test(userAgent);
-const isSafari = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && /version/i.test(userAgent);
-const isMicroMessenger = /microMessenger/i.test(userAgent);
-const canPlayHevc = isAppleDevice || isSafari;
-const canPlayVp9 = typeof MediaSource !== 'undefined' && MediaSource.isTypeSupported("video/webm; codecs=vp9");
-
-export function Wave(props?: { appearance?: WaveAppearance }) {
-  
-  const wave = React.useMemo(() => {
-    const appearance = props?.appearance ?? 'solid'
-    return WAVES[appearance]
-  }, [props?.appearance])
-
-  const heightWidthRatio = React.useMemo(() => {
-    return wave.height / wave.width
-  }, [wave])
-
-  let content: ReactNode = null;
-  if (isMicroMessenger) {
-    content = <KeyframeWaveContent wave={wave} />
-  } else if (canPlayHevc) {
-    content = <VideoWaveContent format="hevc" wave={wave} />
-  } else if (canPlayVp9) {
-    content = <VideoWaveContent format="vp9" wave={wave} />
-  } else {
-    content = <KeyframeWaveContent wave={wave} />
-  }
-
-  return (
-    <div className="vreo-wave">
-      <div style={{position: 'relative', width: '100%', paddingTop: `${heightWidthRatio * 100}%`}}>
-        <div style={{position: 'absolute', width: '100%', height: '100%', left: 0, top: 0}}>
-          {content}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const VideoWaveContent: FC<{ wave: typeof WAVES[keyof typeof WAVES]; format: 'hevc' | 'vp9' }> = ({
-  wave,
-  format,
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [canPlay, setCanPlay] = useState(false);
-  const [errored, setErrored] = useState(false);
-  const source = prefix + wave[format];
-
-  useEffect(() => {
-    setCanPlay(false);
-  }, [source]);
-
-  const canPlayHandler = useCallback(() => {
-    if (videoRef.current) {
-      videoRef.current.play();
-    }
-    setCanPlay(true);
-  }, []);
-
-  const errorHandler = useCallback(() => {
-    setErrored(true);
-  }, []);
-
-  if (errored) {
-    return <KeyframeWaveContent wave={wave} />;
-  }
-
-  return <video
-    style={{ opacity: canPlay ? 1 : 0 }}
-    preload="auto"
-    ref={videoRef}
-    width="100%"
-    height="100%"
-    playsInline
-    autoPlay
-    onCanPlay={canPlayHandler}
-    onError={errorHandler}
-    muted
-    loop
-    src={source}
-  />;
-};
-
-const KeyframeWaveContent: FC<{ wave: typeof WAVES[keyof typeof WAVES] }> = ({
-  wave,
-}) => {
-  const source = prefix + wave.png;
-  return <div
-    style={{
-      width: "100%",
-      height: "100%",
-      backgroundImage: `url(${source})`,
-      backgroundSize: "100%",
-      animationName: "vreo-wave-keyframes",
-      animationTimingFunction: `steps(${wave.frames - 1})`,
-      animationDuration: `${wave.frames / 25}s`,
-      animationIterationCount: 'infinite',
-    }}
-  />
-};

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

@@ -1,75 +0,0 @@
-import * as React from 'react'
-import { BgMusicData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController } from '../../../hooks'
-
-const audioList: HTMLAudioElement[] = []
-function getAudio(src: string = '', currentTime: number = 0)  {
-  const audio = (() => {
-    const audio = audioList.find(audio => audio.src === src)
-    if (audio) return audio
-    else {
-      const newAudio = new Audio(src)
-      audioList.push(newAudio)
-      return newAudio
-    }
-  })()
-  audio.currentTime = currentTime
-  audio.setAttribute('playsinline', 'true')
-  audio.loop = true
-  return audio
-}
-
-export function BgMusic() {
-  const controller = useController()
-  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null)
-  const cleanTimeout = React.useCallback( () => {
-    if (timeoutIdRef.current) {
-      clearTimeout(timeoutIdRef.current)
-      timeoutIdRef.current = null
-    }
-  }, [])
-
-  React.useEffect(() => {
-    const callback = (keyframe: VreoKeyframe, currentTime: number) => {
-      console.log({currentTime})
-      const { start, end } = keyframe
-      const audio = getAudio(keyframe.data.url, Math.max(currentTime - start, 0))
-      const playCallback = () => {
-        audio.play()
-      }
-  
-      audio.addEventListener('canplaythrough', playCallback)
-
-      cleanTimeout()
-    
-      const cleanAudio = () => {
-        console.log('cleanAudio', keyframe.start)
-        audio.pause()
-        audio.src = ''
-        cleanTimeout()
-        audio.removeEventListener('canplaythrough', playCallback)
-      }
-  
-      const duration = end - start
-    
-      timeoutIdRef.current = setTimeout(() => {
-        console.log('timeout', duration)
-        cleanAudio()
-      }, duration)
-
-      controller.once('paused', () => {
-        cleanAudio()
-      })
-
-    }
-
-    controller.on(VreoKeyframeEnum.BgMusic, callback)
-
-    return () => {
-      controller.off(VreoKeyframeEnum.BgMusic, callback)
-      cleanTimeout()
-    }
-  })
-
-  return <></>
-}

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

@@ -1,37 +0,0 @@
-import * as React from 'react'
-import { CameraMovementPlugin } from '../../../../fivePlugins/CameraMovementPlugin'
-import { CameraMovementEffect, MoveArgs, RotateArgs } from '../../../../fivePlugins/CameraMovementPlugin/typings'
-import { CameraMovementData, VreoKeyframe, VreoKeyframeEnum } from '../../../../typings/VreoUnit'
-import { useController, useFiveInstance } from '../../../hooks'
-
-export function CameraMovement() {
-  const controller = useController()
-  const five = useFiveInstance()
-  const ref = React.useRef<ReturnType<typeof CameraMovementPlugin>>()
-
-  React.useEffect(() => {
-    const callback = async (keyframe: VreoKeyframe) => {
-      if (!ref.current) {
-        ref.current = CameraMovementPlugin(five, {})
-      }
-      const { start, end, data } = keyframe
-      const cameraMovementData = data as CameraMovementData
-      const effect = cameraMovementData.effect
-      if (effect === CameraMovementEffect.Rotate) {
-        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 {
-        await ref.current.rotate(data as RotateArgs, end - start)
-      }
-    }
-
-    controller.on(VreoKeyframeEnum.CameraMovement, callback)
-    return () => {
-      controller.off(VreoKeyframeEnum.CameraMovement, callback)
-    }
-  }, [controller])
-  return <></>
-}