@realsee/vreo 0.2.0-alpha.9 → 1.0.0-alpha.2

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

@@ -9,16 +9,19 @@ export function UpdateVRPanorama() {
   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)
     }
    
-    updateWorkRef.current = null
   }, [])
 
+  // 暂停时： 恢复默认 VR 
   const pausedCallback = React.useCallback(() => {
     if (deafultWorkRef.current) {
       const work = parseWork(deafultWorkRef.current)
@@ -27,6 +30,7 @@ export function UpdateVRPanorama() {
     }
   }, [])
 
+  // 播放时：如果暂停前有更新 VR 需要还原
   const playingCallback = React.useCallback(() => {
     if (!updateWorkRef.current) {
       return
@@ -89,7 +93,7 @@ export function UpdateVRPanorama() {
       controller.off('paused', pausedCallback)
       controller.off('playing', playingCallback)
     }
-  }, [controller])
+  }, [])
 
   return <></>
 }

package/resources/Player/typings.ts

@@ -5,7 +5,11 @@ import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit'
 import { VideoAgentMeshOptions } from './modules/VideoAgent/VideoAgentMesh';
 
 export interface PlayerConfigs {
-  containter?: ReactDOM.Container
+/**
+ * @deprecated rename to container
+ */
+  containter?: Element
+  container?: Element
   keyframeMap: VreoKeyframeConfigMap
   /**
    * 微信端自动播放功能实现需要提前初始化 Video 实例。
@@ -25,6 +29,16 @@ export interface PlayerConfigs {
   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'>

package/resources/fivePlugins/CSS3DRenderPlugin/centerPoint.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,17 @@
+/**
+ * @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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,254 @@
+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

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

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -14,29 +14,31 @@ import {
 
 import { Easing, tweenProgress } from '../../shared-utils/animationFrame/tween'
 
-const PI_2 = Math.PI * 2
+const PI = Math.PI
+const PI_2 = PI * 2
 
 function formatLatitude(rad: number) {
   return rad % PI_2
 }
 function formatLongitude(rad: number) {
-  return ((rad % PI_2) + PI_2) % PI_2
+  return rad % PI_2
 }
 
 const getLongitudeParams = (from: number, to: number, rotation: Rotation): { from: number; to: number } => {
-  const PI = Math.PI
-  const PI_2 = PI * 2
   from = formatLongitude(from)
   to = formatLongitude(to)
+
   // 逆时针旋转，初始值必须是较大的值
-  if (rotation === Rotation.Anticlockwise && from < to) from += PI_2
+  if (rotation === Rotation.Anticlockwise && from > to) to += PI_2
+
   // 顺时针旋转，结束值必须是较大值
-  if (rotation === Rotation.Clockwise && to < from) to += PI_2
+  else if (rotation === Rotation.Clockwise && to > from) from += PI_2
+
   // Loop 旋转，找锐角旋转
   // 如果 to 比 from 大 180°，逆时针转
   // 如果 from 比 to 大 180°，顺时针转
-  if (rotation === Rotation.Loop && to - from > PI) return getLongitudeParams(from, to, Rotation.Anticlockwise)
-  if (rotation === Rotation.Loop && from - to > PI) return getLongitudeParams(from, to, Rotation.Clockwise)
+  else if (rotation !== Rotation.Anticlockwise && rotation !== Rotation.Clockwise && to - from > PI) return getLongitudeParams(from, to, Rotation.Clockwise)
+  else if (rotation !== Rotation.Anticlockwise && rotation !== Rotation.Clockwise && from - to > PI) return getLongitudeParams(from, to, Rotation.Anticlockwise)
   return { from, to }
 }
 
@@ -50,6 +52,7 @@ function progressNumber(from: number, to: number, pst: number) {
 export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType> = (
   five: Five,
 ) => {
+
   const move = (args: Partial<MoveArgs>, duration: number, opts: MoveOpts = { preload: true }) => {
     return new Promise<boolean>(async (resolve, reject) => {
 
@@ -177,7 +180,7 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
     return await new Promise<boolean>((resolve, reject) => {
       const onUpdate = ({ progress }: { progress: number }) => {
         const state: Record<string, number> = {}
-        state.longitude = progressNumber(from.longitude, to.longitude, progress)
+        state.longitude = progressNumber(from.longitude, to.longitude, progress) % PI_2
         state.latitude = progressNumber(from.latitude, to.latitude, progress)
         state.fov = progressNumber(from.fov, to.fov, progress)
         five.setState(state, true)
@@ -191,9 +194,13 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
         resolve(false)
       }
 
-      const animeDuration = args.rotateSpeed
-        ? Math.ceil((Math.abs(to.longitude - from.longitude) / args.rotateSpeed) * 1000)
-        : duration
+      let animeDuration = duration
+
+      if (args.rotation === Rotation.Loop) {
+        animeDuration = args.rotateSpeed
+            ? Math.ceil((Math.abs(to.longitude - from.longitude) / args.rotateSpeed) * 1000)
+            : duration
+      }
 
       type _Tween = TWEEN.Tween<{ progress: number }> & { onDestroy: (p: any) => _Tween; destroy: () => void }
 

package/resources/react/index.tsx

@@ -45,12 +45,16 @@ function useVreoInstance() {
 export interface VreoActionCallbacks {
   /**
    * 载入剧本数据。
+   * @param vreoUnit 剧本数据
+   * @param currentTime 开始时间戳
+   * @param preload 是否开启预载
+   * @param force 是否强制载入
    */
-  load: (vreoUnit: VreoUnit, currentTime?: number) => Promise<boolean>
+  load: (vreoUnit: VreoUnit, currentTime?: number, preload?: boolean, force?: boolean) => Promise<boolean>
   /**
    * 播放。
    */
-  play: () => void
+  play: (currentTime?: number) => void
   /**
    * 暂停。
    */
@@ -77,7 +81,7 @@ export function useVreoAction() {
     [player]
   )
 
-  const play = React.useCallback(() => player.play(), [player])
+  const play = React.useCallback((currentTime?: number) => player.play(currentTime || 0), [player])
   const pause = React.useCallback(() => player.pause(), [player])
   const show = React.useCallback(() => player.show(), [player])
   const hide = React.useCallback(() => player.hide(), [player])

package/resources/shared-utils/AduioLike.ts

@@ -0,0 +1,109 @@
+import { Subscribe } from '@realsee/five'
+import { requestAnimationFrameInterval } from './animationFrame'
+
+/**
+ * 模拟 `<Audio>` 事件。
+ */
+export type AudioLikeEvent = {
+  // 播放
+  play: () => void
+  // 语音状态 播放 -> 暂停
+  pause: () => void
+  // 语音时间刷新
+  timeupdate: () => void
+  // 播放
+  ended: () => void
+}
+
+
+/**
+ * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
+ */
+export class AudioLike extends Subscribe<AudioLikeEvent> {
+  private $timestamp: number | null = null
+  private $currentTime = 0
+  private $duration = 0
+  private stopInterval?: () => void
+  muted = false
+  src = ''
+
+  setAttribute(name: string, value: string) {
+    // nothing todo
+  }
+
+  constructor({ duration }: { duration?: number } = {}) {
+    super()
+    if (duration) {
+      this.$duration = duration
+    }
+  }
+
+  play() {
+    if (this.$currentTime === this.$duration) {
+      this.$currentTime = 0
+    }
+    if (this.$timestamp === null) {
+      this.$timestamp = performance.now() - this.$currentTime
+    }
+    this.stopInterval = requestAnimationFrameInterval(() => this.requestAnimationFrameLoop())
+    this.emit('play')
+  }
+
+  pause() {
+    if (this.stopInterval) {
+      this.stopInterval()
+      this.emit('pause')
+      this.stopInterval = undefined
+    }
+    this.$timestamp = null
+  }
+
+  requestAnimationFrameLoop() {
+    if (this.$timestamp === null) return
+    const now = performance.now()
+    this.$currentTime = now - this.$timestamp
+    this.emit('timeupdate')
+    if (this.$currentTime >= this.$duration - 10) {
+      this.$currentTime = this.$duration
+      this.pause()
+      this.emit('ended')
+    }
+  }
+
+  get currentTime() {
+    return this.$currentTime / 1000
+  }
+
+  set currentTime(time: number) {
+    this.$currentTime = time
+  }
+
+  get duration() {
+    return this.$duration
+  }
+
+  set duration(duration: number) {
+    this.pause()
+    this.$duration = duration
+    this.$timestamp = null
+    this.$currentTime = 0
+  }
+
+  get ended() {
+    return this.$currentTime === this.$duration
+  }
+
+  get paused() {
+    return !this.stopInterval
+  }
+
+  addEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.on(evtName, callback)
+  }
+
+  removeEventListener(evtName: keyof AudioLikeEvent, callback: () => void, useCapture = false) {
+    this.off(evtName, callback)
+  }
+}
+
+export default AudioLike

package/resources/shared-utils/addResizeListener.ts

@@ -0,0 +1,46 @@
+type ResizeHandler =  (width: number, height: number) => void
+
+const resizeObserverCache = new Map<Element, number>()
+
+export function addResizeListener(element: Element | undefined | null, resizeHandler: ResizeHandler, immediate = true) {
+  if (!element) return () => {}
+
+  if (immediate) resizeHandler(element.clientWidth, element.clientHeight)
+
+  if (typeof ResizeObserver !== 'undefined' && ResizeObserver) {
+    const resizeObserver = new ResizeObserver(() => resizeHandler(element.clientWidth, element.clientHeight))
+
+    resizeObserver.observe(element)
+    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1)
+
+    return () => {
+      if (element) resizeObserver.unobserve(element)
+      if (resizeObserverCache.get(element) === 1) {
+        resizeObserverCache.delete(element)
+      }
+    }
+  } else {
+    const iframe = document.createElement('iframe')
+    iframe.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;visibility:hidden;margin:0;border:0;padding:0;z-index:-1;'
+    iframe.classList.add('resize-sensor-iframe')
+    element.appendChild(iframe)
+    if (!iframe.contentWindow) return () => {}
+
+    iframe.contentWindow.addEventListener('resize', () => {
+      resizeHandler(iframe.clientWidth, iframe.clientHeight)
+    })
+    resizeObserverCache.set(element, resizeObserverCache.get(element) || 0 + 1)
+
+    return () => {
+      element.removeChild(iframe)
+      if (resizeObserverCache.get(element) === 1) {
+        resizeObserverCache.delete(element)
+      }
+    }
+  }
+}
+
+export function hasResizeListener(element?: Element | null) {
+  if (!element) return false
+  return resizeObserverCache.get(element) || 0 > 0
+}

package/resources/shared-utils/createTransMatrix.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three'
+
+export function createTransMatrix(arr1: number[]) {
+  const matrix4 = new THREE.Matrix4()
+  matrix4.fromArray(arr1)
+
+  return (arr2: number[]) => {
+    const vector3 = new THREE.Vector3(...arr2)
+    vector3.applyMatrix4(matrix4)
+    return vector3.toArray()
+  }
+}

package/resources/shared-utils/getFileExpandedName.ts

@@ -0,0 +1,6 @@
+export default function getFileExpandedName(filePath?: string | null) {
+  if (!filePath) return ''
+  const index = filePath.lastIndexOf('.')
+  const ext = filePath.substring(index + 1)
+  return ext.toLowerCase()
+}