@realsee/vreo 0.2.0-alpha.12 → 0.2.0-alpha.15

package/lib/shared-utils/AduioLike.js

@@ -0,0 +1,165 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AudioLike = void 0;
+
+var _five = require("@realsee/five");
+
+var _animationFrame = require("./animationFrame");
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * 模拟 `<Audio>` 功能：没有音频，但执行逻辑跟 `<Audio>` 相似。
+ */
+var AudioLike = /*#__PURE__*/function (_Subscribe) {
+  _inherits(AudioLike, _Subscribe);
+
+  var _super = _createSuper(AudioLike);
+
+  function AudioLike() {
+    var _this;
+
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        duration = _ref.duration;
+
+    _classCallCheck(this, AudioLike);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "$timestamp", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "$currentTime", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "$duration", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "muted", false);
+
+    _defineProperty(_assertThisInitialized(_this), "src", '');
+
+    if (duration) {
+      _this.$duration = duration;
+    }
+
+    return _this;
+  }
+
+  _createClass(AudioLike, [{
+    key: "setAttribute",
+    value: function setAttribute(name, value) {// nothing todo
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      var _this2 = this;
+
+      if (this.$timestamp === 0) {
+        this.$timestamp = performance.now();
+      }
+
+      if (this.$currentTime === this.$duration) {
+        this.$currentTime = 0;
+      }
+
+      this.stopInterval = (0, _animationFrame.requestAnimationFrameInterval)(function () {
+        return _this2.requestAnimationFrameLoop();
+      });
+      this.emit('play');
+    }
+  }, {
+    key: "pause",
+    value: function pause() {
+      if (this.stopInterval) {
+        this.stopInterval();
+        this.emit('pause');
+        this.stopInterval = undefined;
+      }
+
+      this.$timestamp = 0;
+    }
+  }, {
+    key: "requestAnimationFrameLoop",
+    value: function requestAnimationFrameLoop() {
+      var 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');
+      }
+    }
+  }, {
+    key: "currentTime",
+    get: function get() {
+      return this.$currentTime / 1000;
+    },
+    set: function set(time) {
+      this.$currentTime = time;
+    }
+  }, {
+    key: "duration",
+    get: function get() {
+      return this.$duration;
+    },
+    set: function set(duration) {
+      this.pause();
+      this.$duration = duration;
+      this.$timestamp = 0;
+      this.$currentTime = 0;
+    }
+  }, {
+    key: "ended",
+    get: function get() {
+      return this.$currentTime === this.$duration;
+    }
+  }, {
+    key: "paused",
+    get: function get() {
+      return !this.stopInterval;
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(evtName, callback) {
+      var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.on(evtName, callback);
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(evtName, callback) {
+      var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.off(evtName, callback);
+    }
+  }]);
+
+  return AudioLike;
+}(_five.Subscribe);
+
+exports.AudioLike = AudioLike;
+var _default = AudioLike;
+exports["default"] = _default;

package/lib/typings/VreoUnit.d.ts

@@ -172,12 +172,23 @@ export declare type ModelVideoData = {
     vertexs: QuadrangleVertexs | Vertexs;
     matrixWorld?: number[];
 };
+/**
+ * 四元数
+ */
+export declare type Quaternion = {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+};
 /**
  * 全景文本标签
  */
 export declare type PanoTextLabelData = {
     text: string;
     vertex: Vertex;
+    normal?: Vertex;
+    quaternion?: Quaternion;
     fontSize?: number;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.12",
+  "version": "0.2.0-alpha.15",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -21,7 +21,7 @@
     "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "docs": "npx typedoc",
+    "docs": "npx typedoc && yarn run build",
     "packages": "node ./dev-tools/build-packages.js"
   },
   "peerDependencies": {

package/resources/Player/Controller.ts

@@ -114,12 +114,14 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       this.videoInstance.pause()
       return
     }
+
     if (!this.playing) {
       if (!this.videoInstance?.paused) {
         this.videoInstance?.pause()
       }
       return
     }
+
     if (this.videoInstance?.paused && this.playing) {
       this.videoInstance.play()
     }

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

@@ -91,47 +91,56 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
 
     // 预载逻辑
     // 是否降低图片分辨率
-    if (this.$five.imageOptions.size && this.configs.imageOptions?.size && this.$five.imageOptions.size > this.configs.imageOptions.size) {
+    if (
+      this.$five.imageOptions.size &&
+      this.configs.imageOptions?.size &&
+      this.$five.imageOptions.size > this.configs.imageOptions.size
+    ) {
       this.$five.imageOptions.size = this.configs.imageOptions.size
     }
-    
+
     // 预载数据中的点位
     if (preload || (preload === undefined && this.configs.autoPreload)) {
-      const panoIndexMap = vreoUnit.keyframes.filter((vreoKeyframe) => {
-        if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
-          return false
-        }
-  
-        const data = vreoKeyframe.data as CameraMovementData
-        if (data.panoIndex === undefined) {
-          return false
-        }
-        return true
-      }).reduce((accu: Record<number, boolean>, curr) => {
-        const panoIndex = curr.data.panoIndex as number
-        if (!accu[panoIndex]) {
-          accu[panoIndex] = true
-        }
-        return accu
-      }, {})
-  
+      const panoIndexMap = vreoUnit.keyframes
+        .filter((vreoKeyframe) => {
+          if (vreoKeyframe.type !== VreoKeyframeEnum.CameraMovement) {
+            return false
+          }
+
+          const data = vreoKeyframe.data as CameraMovementData
+          if (data.panoIndex === undefined) {
+            return false
+          }
+          return true
+        })
+        .reduce((accu: Record<number, boolean>, curr) => {
+          const panoIndex = curr.data.panoIndex as number
+          if (!accu[panoIndex]) {
+            accu[panoIndex] = true
+          }
+          return accu
+        }, {})
+
       const panoIndexs = Object.keys(panoIndexMap)
       for (let i = 0; i < panoIndexs.length; i++) {
         await this.$five.preloadPano(Number(panoIndexs[i]))
       }
     }
-    
+
     // 新数据载入就绪
     this.emit('loaded', vreoUnit)
     this.controller.emit('loaded', vreoUnit)
 
-    if (vreoUnit.video.url) {
-      if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
-        this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
-      }
-      await this.controller.videoAgentScene?.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000)
-      this.play()
+    if (this.controller.videoAgentScene?.videoAgentMesh.videoInstance) {
+      this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000
     }
+    await this.controller.videoAgentScene?.videoAgentMesh.play(
+      vreoUnit.video.url,
+      currentTime / 1000,
+      vreoUnit.video.duration
+    )
+    this.play()
+
     this.controller.run((type, keyframe) => this.emit(type, keyframe))
     return true
   }
@@ -143,9 +152,10 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
   play(currentTime?: number) {
     if (this.controller.playing) return true
     if (currentTime && this.controller.videoInstance) {
-      // Object.assign(window, {$vreoController: this.controller})
       this.controller.videoInstance.currentTime = currentTime / 1000
     }
+    Object.assign(window, {$vreoController: this.controller})
+
     this.controller.setPlaying(true)
     return true
   }

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

@@ -1,6 +1,7 @@
 import * as THREE from 'three'
 import { Preloader } from '../../../shared-utils/Preloader'
 import { makeObservable, observable, runInAction } from 'mobx'
+import AudioLike from '../../../shared-utils/AduioLike'
 
 const vertexShader = `
 varying vec2 vUv;
@@ -76,14 +77,21 @@ export class VideoAgentMesh extends THREE.Mesh {
   freeze: boolean
   paused: boolean
   audioInstance: HTMLAudioElement
+  audioLikeInstance: AudioLike
   $removeEventListener: () => void
 
-  get videoInstance(): HTMLAudioElement {
+  get videoInstance(): HTMLAudioElement | AudioLike {
+    if (!this.videoUrl) {
+      return this.audioLikeInstance
+    }
+
     if (this.videoUrl?.endsWith('mp3')) {
       return this.audioInstance
     }
+
     const uniforms = (this.material as THREE.ShaderMaterial).uniforms
     const videoInstance = uniforms.map.value.image as HTMLVideoElement
+
     return videoInstance
   }
 
@@ -155,23 +163,33 @@ export class VideoAgentMesh extends THREE.Mesh {
       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)
 
-    this.videoInstance.addEventListener('pause', onPause)
-    this.videoInstance.addEventListener('play', onPlay)
+    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.$removeEventListener = () => {
-      this.videoInstance.removeEventListener('pause', onPause)
-      this.videoInstance.removeEventListener('play', onPlay)
+      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)
     }
   }
 
-
   private async update(videoUrl: string) {
+
     if (this.videoUrl === videoUrl) {
       return
     }
@@ -191,19 +209,31 @@ export class VideoAgentMesh extends THREE.Mesh {
       this.videoInstance.muted = false
       uniforms.enable.value = this.videoUrl?.endsWith('.mp4') ? 1 : 0
       this.videoInstance.removeEventListener('timeupdate', onStart, false)
+
     }
 
     this.videoInstance.addEventListener('timeupdate', onStart, false)
   }
 
-  async play(videoUrl = '', currentTime = 0) {
+  async play(videoUrl = '', currentTime = 0, duration?: number) {
     videoUrl = videoUrl || ''
+    if (duration && !videoUrl) {
+      if (this.currentTime) {
+        this.videoInstance.currentTime = currentTime
+      }
+      (this.videoInstance as AudioLike).duration = duration
+      this.videoUrl = ''
+      this.videoInstance.play()
+      return true
+    }
+
     if (!videoUrl) {
       if (this.videoUrl) await this.videoInstance.play()
       else console.warn('警告：视频资源未初始化。')
       return true
     }
 
+    console.log('play', videoUrl, this.videoUrl)
     if (videoUrl === this.videoUrl) {
       this.videoInstance.currentTime = currentTime
       await this.videoInstance.play()

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

@@ -33,6 +33,8 @@ 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)

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)
+}