@realsee/vreo 0.2.0-alpha.13 → 0.2.0-alpha.16

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { Five } from '@realsee/five'
-import * as THREE from 'three'
-import { Object3D, Raycaster, Vector3 } from 'three'
-import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
-import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
+import { Raycaster, Vector3 } from 'three'
+import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween'
+import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '../../../fivePlugins/CSS3DRenderPlugin'
 
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
 import { CustomVreoKeyframeProps } from '../../typings'
@@ -33,6 +32,7 @@ import { CustomVreoKeyframeProps } from '../../typings'
 //   "temperature": "27",
 //   "title": "沉浸式回家"
 // }
+
 export interface SpatialScenePanelData {
   customType: 'SpatialScenePanel'
   title: string

package/resources/Player/index.tsx

@@ -41,7 +41,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
 
     ReactDOM.render(
       <ControllerContext.Provider value={this.controller}>
-        <App></App>
+        <App />
         <Drawer />
         <PopUp />
         {this.configs.customKeyframes &&

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

@@ -64,8 +64,20 @@ const cacheInstance: {
 } = {}
 
 export interface VideoAgentMeshOptions {
+  /**
+   * 自定义视频实例。
+   */
   videoInstance?: HTMLVideoElement
+  /**
+   * 自定义音频实例。
+   */
   audioInstance?: HTMLAudioElement
+  /**
+   * 是否开启音视频预载能力。
+   * 
+   * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音视频文件下载下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音（`muted` 为 `false`，但是没有声音）。
+   */
+  preload?: boolean
 }
 
 /**
@@ -108,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) {
@@ -200,7 +214,8 @@ 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 ? await URL.createObjectURL((await Preloader.blob(this.videoUrl)) as unknown as Blob) : this.videoUrl
     this.videoInstance.setAttribute('data-src', this.videoUrl)
 
     const onStart = () => {

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, options: { videoInstance?: HTMLVideoElement, audioInstance?: HTMLAudioElement } = {}) {
+  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)
@@ -33,13 +33,11 @@ export class VideoAgentScene {
   run = () => {
     const domElement = this.renderer.domElement
 
-    // console.log('renderder', this.videoAgentMesh.paused, this.videoAgentMesh.freeze)
-
     // 视频开始 1s 不渲染：规避某些设备黑屏闪烁问题。视频前 2s 是最好是静默的。
     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/keyframes/PanoTextLabel/index.tsx

@@ -1,21 +1,66 @@
-import classNames from 'classnames'
 import * as React from 'react'
-import { Vector3 } from 'three'
+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'
-import { useController, useFiveProject2d } from '../../../hooks'
 
-interface PanoTextLabelState {
-  text: string
-  left: number
-  top: number
-  fontSize: number
+/**
+ * 通过传入中心点确定矩形框架容器的四个点：
+ *  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)
+  // console.log(cameraPosition)
+
+  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 [state, setState] = React.useState<PanoTextLabelState | null>(null)
   const timeoutRef = React.useRef<NodeJS.Timeout | null>()
   const controller = useController()
-  const project2d = useFiveProject2d()
+  const five = useFiveInstance()
+  const ref = React.useRef<ReturnType<typeof CSS3DRenderPlugin>>()
 
   React.useEffect(() => {
     if (controller.configs?.keyframeMap.PanoTextLabel === false) {
@@ -24,19 +69,43 @@ export function PanoTextLabel() {
     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)
 
-      const res = project2d(new Vector3(x, y, z))
-      if (!res) return
-      const { x: left, y: top } = res
+      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
+        )
 
-      // Object.assign(window, { $PanoTextLabel: { setState } })
-      setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
-      timeoutRef.current = setTimeout(() => setState(null), end - start)
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.disposeAll()
+      }, end - start)
     }
     controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
 
-    // Object.assign(window, { $panoTextLabel: { setState } })
     return () => {
       controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
       if (timeoutRef.current) {
@@ -45,21 +114,5 @@ export function PanoTextLabel() {
     }
   }, [controller])
 
-  return (
-    <div
-      className={classNames('PanoTextLabel', {
-        'PanoTextLabel--notHidden': state,
-      })}
-      style={{
-        left: (state?.left || 0) + 'px',
-        top: (state?.top || 0) + 'px',
-      }}
-    >
-      <div className="PanoTextLabel-wrapper">
-        <div style={{ fontSize: `${state?.fontSize || 16}px` }} className="PanoText-innerText">
-          {state?.text || ''}
-        </div>
-      </div>
-    </div>
-  )
+  return <></>
 }

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('__Dnalogel-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/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, MovePanoOptions, Pose } from '@realsee/five'
+import { Mode, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -191,12 +191,24 @@ export type ModelVideoData = {
   matrixWorld?: number[]
 }
 
+/**
+ * 四元数
+ */
+export type Quaternion = {
+  x: number,
+  y: number,
+  z: number,
+  w: number
+}
+
 /**
  * 全景文本标签
  */
 export type PanoTextLabelData = {
   text: string
   vertex: Vertex
+  normal?: Vertex
+  quaternion?: Quaternion
   fontSize?: number
 }
 

package/stylesheets/default.css

@@ -430,7 +430,11 @@
   transform-style: preserve-3d;
   pointer-events: none;
   z-index: 999999;
-  transform: translate(-50%, -50%);
+}
+.__Dnalogel-plugin--CSS3DRenderPlugin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @keyframes straightPopPTL {