@realsee/dnalogel 2.2.7 → 2.3.0

package/libs/CSS3DRenderPlugin/Controller.js

@@ -1,61 +1,73 @@
-var y = Object.defineProperty, F = Object.defineProperties;
-var P = Object.getOwnPropertyDescriptors;
-var R = Object.getOwnPropertySymbols;
-var S = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
-var c = (s, i, e) => i in s ? y(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e, p = (s, i) => {
-  for (var e in i || (i = {}))
-    S.call(i, e) && c(s, e, i[e]);
-  if (R)
-    for (var e of R(i))
-      D.call(i, e) && c(s, e, i[e]);
-  return s;
-}, h = (s, i) => F(s, P(i));
-var l = (s, i, e) => (c(s, typeof i != "symbol" ? i + "" : i, e), e);
-import { CSS3DRender as w } from "./CSS3DRender.js";
-import "three";
+var C = Object.defineProperty, E = Object.defineProperties;
+var F = Object.getOwnPropertyDescriptors;
+var b = Object.getOwnPropertySymbols;
+var R = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
+var m = (r, t, e) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, p = (r, t) => {
+  for (var e in t || (t = {}))
+    R.call(t, e) && m(r, e, t[e]);
+  if (b)
+    for (var e of b(t))
+      D.call(t, e) && m(r, e, t[e]);
+  return r;
+}, l = (r, t) => E(r, F(t));
+var d = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
+import { CSS3DRender as S } from "./CSS3DRender.js";
+import { fiveModelLoaded as $ } from "./utils/waitFiveModelLoaded.js";
+import { generateBehindFiveElement as j } from "./utils/generateBehindFiveElement.js";
+import "./utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
+import "./utils/getAllCSS3DObject.js";
+import "./utils/createResizeObserver.js";
+import "./utils/even.js";
 import "../shared-utils/Subscribe.js";
-import "./utils/evenNumber.js";
+import "three";
 import "./utils/positionToVector3.js";
-import "./utils/CSS3DObjectPlus.js";
+import "./utils/three/CSS3DObject.js";
 import "./utils/centerPoint.js";
-const x = "v2.0.1", C = `CSS3DRenderPlugin@${x}`;
-class M extends w {
+import "./utils/three/OpacityMesh.js";
+import "./utils/three/CSS3DScene.js";
+import "./utils/three/CSS3DGroup.js";
+const x = "v2.0.1", v = `CSS3DRenderPlugin@${x}`;
+class z extends S {
   constructor(e) {
     super();
-    l(this, "five");
-    l(this, "behindFiveContainer");
-    l(this, "staticPrefix", "//vrlab-static.ljcdn.com");
-    l(this, "create3DDomContainer", (e, t) => {
+    d(this, "five");
+    d(this, "behindFiveContainer");
+    d(this, "staticPrefix", "//vrlab-static.ljcdn.com");
+    d(this, "create3DDomContainer", (e, i) => {
       if (this.state.disposed)
         return;
-      const n = (() => {
-        var E;
-        (t == null ? void 0 : t.dpr) !== void 0 && console.warn(`${C}: please use "config.devicePixelRatio" replace "config.dpr"`);
-        const a = {
+      const o = (() => {
+        var f;
+        (i == null ? void 0 : i.dpr) !== void 0 && console.warn(`${v}: please use "config.devicePixelRatio" replace "config.dpr"`);
+        const s = {
           ratio: 216e-5,
-          devicePixelRatio: (E = t == null ? void 0 : t.dpr) != null ? E : 1,
+          devicePixelRatio: (f = i == null ? void 0 : i.dpr) != null ? f : 1,
           mode: "front",
           autoRender: !0
         };
-        return Object.assign(a, t, (t == null ? void 0 : t.mode) === "behind" ? { scene: this.five.scene } : void 0);
-      })(), o = this.five.getElement();
-      if (!o) {
-        console.error(`${C}: five.getElement() is ${o}`);
+        return Object.assign(s, i, (i == null ? void 0 : i.mode) === "behind" ? { scene: this.five.scene } : void 0);
+      })(), a = this.five.getElement();
+      if (!a) {
+        console.error(`${v}: five.getElement() is ${a}`);
         return;
       }
-      const { autoRender: d, mode: r } = n, v = r === "front" ? o.parentElement : n.behindFiveContainer;
-      this.setContainer(v || document.body, "front");
-      const f = this.getBehindFiveElement();
-      f && this.setContainer(f, "behind"), this.appendToElement(v || document.body, r);
-      const m = this.create3DElement(this.five.camera, e, h(p({}, n), { autoRender: !1 }));
-      if (!m)
+      const { autoRender: h } = o;
+      o.mode === "behind" && o.behindFiveContainer && (this.behindFiveContainer = o.behindFiveContainer);
+      const n = this.create3DElement(this.five.camera, e, l(p({}, o), { autoRender: !1 }));
+      if (!n)
         return;
-      const u = m.render, b = () => {
-        var a;
-        r === "front" && u(), r === "behind" && ((a = this.five.model) != null && a.loaded ? u() : this.five.once("modelLoaded", () => u()));
+      const c = () => {
+        const s = n.css3DObject.mode === "front" ? a.parentElement : this.getBehindFiveElement();
+        if (!s)
+          return console.error(`${v}: wrapper is ${s}`);
+        n.appendToElement(s), n.render();
+      }, u = () => {
+        n.css3DObject.mode === "front" && c(), n.css3DObject.mode === "behind" && $(this.five).then(() => {
+          c();
+        });
       };
-      return d && b(), h(p({}, m), { render: d ? void 0 : b });
+      return h && u(), l(p({}, n), { render: h ? void 0 : u });
     });
     this.five = e;
   }
@@ -63,29 +75,14 @@ class M extends w {
     return this.dispose();
   }
   setState(...e) {
-    const t = super.setState(...e);
-    return this.five.needsRender = !0, t;
+    const i = super.setState(...e);
+    return this.five.needsRender = !0, i;
   }
   getBehindFiveElement() {
-    var r;
-    const { behindFiveContainer: e } = this;
-    if (e)
-      return e;
-    const t = document.createElement("div");
-    t.style.position = "absolute", t.style.pointerEvents = "none", t.style.top = "0", t.style.left = "0", t.style.width = "100%", t.style.height = "100%", this.behindFiveContainer = t;
-    const n = this.five.getElement();
-    if (!n)
-      return;
-    const o = (r = n == null ? void 0 : n.style.position) != null ? r : getComputedStyle(n);
-    (!o || o === "static") && console.warn(
-      "if you want to use css3DRenderPlugin behind mode, five element position is static, please set position to relative or absolute"
-    );
-    const d = n == null ? void 0 : n.parentElement;
-    if (d)
-      return d.insertBefore(t, n), t;
+    return this.behindFiveContainer ? this.behindFiveContainer : (this.behindFiveContainer = j(this.five), this.behindFiveContainer);
   }
 }
 export {
-  C as PLUGIN_NAME,
-  M as default
+  v as PLUGIN_NAME,
+  z as default
 };

package/libs/CSS3DRenderPlugin/index.d.ts

@@ -1,5 +1,6 @@
 import type { FivePlugin } from '@realsee/five';
 import Controller from './Controller';
-export * from './typing';
 export declare const CSS3DRenderPlugin: FivePlugin<void, InstanceType<typeof Controller>>;
+export { CSS3DRender } from './CSS3DRender';
+export * from './typing';
 export default CSS3DRenderPlugin;

package/libs/CSS3DRenderPlugin/index.js

@@ -1,14 +1,23 @@
-import r from "./Controller.js";
-import "./CSS3DRender.js";
-import "three";
+import o from "./Controller.js";
+import { CSS3DRender as w } from "./CSS3DRender.js";
+import "./utils/waitFiveModelLoaded.js";
+import "./utils/generateBehindFiveElement.js";
+import "./utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
+import "./utils/getAllCSS3DObject.js";
+import "./utils/createResizeObserver.js";
+import "./utils/even.js";
 import "../shared-utils/Subscribe.js";
-import "./utils/evenNumber.js";
+import "three";
 import "./utils/positionToVector3.js";
-import "./utils/CSS3DObjectPlus.js";
+import "./utils/three/CSS3DObject.js";
 import "./utils/centerPoint.js";
-const f = (o) => new r(o);
+import "./utils/three/OpacityMesh.js";
+import "./utils/three/CSS3DScene.js";
+import "./utils/three/CSS3DGroup.js";
+const R = (r) => new o(r);
 export {
-  f as CSS3DRenderPlugin,
-  f as default
+  w as CSS3DRender,
+  R as CSS3DRenderPlugin,
+  R as default
 };

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -0,0 +1,4 @@
+export default function createResizeObserver(element: Element, resizeHandler: (width: number, height: number) => any, fireImmediately?: boolean): {
+    observe: () => void;
+    unobserve: () => void;
+};

package/libs/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -0,0 +1,22 @@
+import { even as o } from "./even.js";
+function u(e, i, n = !0) {
+  if (!e)
+    return console.error("createResizeObserver: element is undefined"), { observe: () => {
+    }, unobserve: () => {
+    } };
+  const r = () => {
+    const t = o(e.clientWidth, { floor: !0 }), v = o(e.clientHeight, { floor: !0 });
+    i(t, v);
+  };
+  if (typeof ResizeObserver == "undefined" || !ResizeObserver)
+    return console.warn("createResizeObserver: ResizeObserver is undefined"), { observe: () => r(), unobserve: () => {
+    } };
+  const s = new ResizeObserver(r);
+  return n && r(), {
+    observe: () => s.observe(e),
+    unobserve: () => s.unobserve(e)
+  };
+}
+export {
+  u as createResizeObserver
+};

package/libs/CSS3DRenderPlugin/utils/even.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description: 获取一个数字的最近的偶数
+ * @param { number } num
+ * @param { boolean } config.floor 是否取较小的偶数，默认为false，即取较大的偶数
+ * @return { number } 返回一个偶数
+ */
+export declare function even(num: number, config?: {
+    floor?: boolean;
+}): number;

package/libs/CSS3DRenderPlugin/utils/even.js

@@ -0,0 +1,7 @@
+function t(e, r) {
+  const u = Math.round(e);
+  return u % 2 === 0 ? u : u + Number(r != null && r.floor ? -1 : 1);
+}
+export {
+  t as even
+};

package/libs/CSS3DRenderPlugin/utils/generateBehindFiveElement.d.ts

@@ -0,0 +1,2 @@
+import type { Five } from '@realsee/five';
+export default function generateBehindFiveElement(five: Five): HTMLDivElement;

package/libs/CSS3DRenderPlugin/utils/generateBehindFiveElement.js

@@ -0,0 +1,29 @@
+const n = document.createElement("div");
+n.style.position = "absolute";
+n.style.top = "0";
+n.style.left = "0";
+n.style.width = "100%";
+n.style.height = "100%";
+function s(t) {
+  var o, r;
+  const e = (r = l(t.getElement())) != null ? r : l((o = t.getElement()) == null ? void 0 : o.parentElement);
+  if (e != null && e.parentElement)
+    return e.parentElement.insertBefore(n, e), n;
+  console.error(
+    "Can not find a valid element to insert behindFiveElement. How to fix it: https://github.com/realsee-developer/dnalogel/blob/main/plugins/src/PanoTagPlugin/README.md"
+  );
+}
+function l(t) {
+  var i;
+  if (!t)
+    return;
+  const e = (i = t.style.position) != null ? i : getComputedStyle(t).position;
+  if (e !== "fixed" && e !== "absolute" && e !== "relative")
+    return;
+  const o = getComputedStyle(t).backgroundColor;
+  if (!(o !== "transparent" && o !== "rgba(0, 0, 0, 0)"))
+    return t;
+}
+export {
+  s as generateBehindFiveElement
+};

package/libs/CSS3DRenderPlugin/utils/getAllCSS3DObject.d.ts

@@ -0,0 +1,3 @@
+import type { Object3D } from 'three';
+import type { CSS3DObjectPlus } from './three/CSS3DObject';
+export default function getAllCSS3DObject(...object: Object3D[]): CSS3DObjectPlus<HTMLElement>[];

package/libs/CSS3DRenderPlugin/utils/getAllCSS3DObject.js

@@ -0,0 +1,9 @@
+function l(...c) {
+  const s = [];
+  return c.forEach((e) => {
+    e.isCSS3DObjectPlus ? s.push(e) : s.push(...l(...e.children));
+  }), s;
+}
+export {
+  l as getAllCSS3DObject
+};

package/libs/CSS3DRenderPlugin/utils/index.d.ts

@@ -1,4 +1,4 @@
 export * from './centerPoint';
-export * from './evenNumber';
+export * from './even';
 export * from './random';
 export * from './positionToVector3';

package/libs/CSS3DRenderPlugin/utils/three/CSS3DGroup.d.ts

@@ -0,0 +1,25 @@
+import * as THREE from 'three';
+import { Subscribe } from '../../../shared-utils/Subscribe';
+import type { Object3D } from 'three';
+import type { Mode } from './CSS3DObject';
+export declare class CSS3DGroup extends THREE.Group {
+    readonly isCSS3DGroup = true;
+    mode: Mode;
+    CSS3DObjectLength: number;
+    hooks: Subscribe<{
+        visibleChange: (visible: boolean) => void;
+    }>;
+    constructor(mode: Mode);
+    add(...objects: Object3D[]): this;
+    setVisible(visible: boolean): void;
+    remove(...objects: Object3D[]): this;
+    private updateLength;
+}
+export declare class CSS3DFrontGroup extends CSS3DGroup {
+    constructor();
+}
+export declare class CSS3DBehindGroup extends CSS3DGroup {
+    private scene;
+    constructor(scene: THREE.Scene);
+    add(...objects: Object3D[]): this;
+}

package/libs/CSS3DRenderPlugin/utils/three/CSS3DGroup.js

@@ -0,0 +1,53 @@
+var n = Object.defineProperty;
+var d = (r, t, e) => t in r ? n(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => (d(r, typeof t != "symbol" ? t + "" : t, e), e);
+import * as u from "three";
+import { Subscribe as p } from "../../../shared-utils/Subscribe.js";
+import { getAllCSS3DObject as i } from "../getAllCSS3DObject.js";
+class h extends u.Group {
+  constructor(e) {
+    super();
+    s(this, "isCSS3DGroup", !0);
+    s(this, "mode");
+    s(this, "CSS3DObjectLength", 0);
+    s(this, "hooks", new p());
+    this.mode = e;
+  }
+  add(...e) {
+    return i(...e).forEach((o) => {
+      o.mode = this.mode;
+    }), super.add(...e), this.updateLength(), this;
+  }
+  setVisible(e) {
+    this.visible = e, this.hooks.emit("visibleChange", e);
+  }
+  remove(...e) {
+    return super.remove(...e), this.updateLength(), this;
+  }
+  updateLength() {
+    this.CSS3DObjectLength = i(this).length;
+  }
+}
+class m extends h {
+  constructor() {
+    super("front");
+  }
+}
+class g extends h {
+  constructor(e) {
+    super("behind");
+    s(this, "scene");
+    if (!e)
+      throw new Error("CSS3DBehindScene: scene is required");
+    this.scene = e;
+  }
+  add(...e) {
+    return i(...e).forEach((o) => {
+      this.scene.add(o.getOpacityMesh());
+    }), super.add(...e), this;
+  }
+}
+export {
+  g as CSS3DBehindGroup,
+  m as CSS3DFrontGroup
+};

package/libs/CSS3DRenderPlugin/utils/{CSS3DObjectPlus.d.ts → three/CSS3DObject.d.ts}

@@ -1,7 +1,7 @@
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import { Matrix4, Quaternion, Vector3 } from 'three';
-import { Subscribe } from '../../shared-utils/Subscribe';
-import type * as THREE from 'three';
+import { Subscribe } from '../../../shared-utils/Subscribe';
+import OpacityMesh from './OpacityMesh';
 export declare const MinRatio = 0.00216;
 export declare const DefaultRatio = 0.003;
 export declare type Mode = 'front' | 'behind';
@@ -10,25 +10,45 @@ export declare type CSS3DRenderEventMap = {
     applyMatrix4: (matrix: Matrix4) => void;
     applyQuaternion: (quaternion: Quaternion) => void;
     applyScaleMatrix4: (matrix: Matrix4) => void;
-    changeMode: <T extends Mode = Mode>(mode: T, prevMode: Mode, scene: T extends 'behind' ? THREE.Scene : undefined) => void;
 };
 export declare class CSS3DObjectPlus<T extends HTMLElement = HTMLElement> extends CSS3DObject {
-    version: string;
+    version: number;
+    readonly isCSS3DObjectPlus: true;
+    container: T;
     width: number;
     height: number;
     domWidthPx: number;
     domHeightPx: number;
     cornerPoints: CornerPoints;
-    ratio: number;
-    container: T;
     centerPosition: Vector3;
+    ratio: number;
     mode: 'front' | 'behind';
     readonly hooks: Subscribe<CSS3DRenderEventMap>;
-    readonly isCSS3DObjectPlus: true;
-    constructor(container: T, cornerPoints: CornerPoints, ratio?: number, dpr?: number, mode?: Mode);
-    changeMode(mode: 'front'): void;
-    changeMode(mode: 'behind', scene: THREE.Scene): void;
-    applyScaleMatrix4(matrix: Matrix4): void;
+    opacityMesh?: OpacityMesh;
+    private selfVisible;
+    private parentVisibleListenerDisposer?;
+    constructor(params: {
+        container: T;
+        mode?: 'front' | 'behind';
+        cornerPoints: CornerPoints;
+        ratio?: number;
+        dpr?: number;
+        pointerEvents?: 'none' | 'auto';
+    });
+    setVisible(visible: boolean, params?: {
+        setSelfVisible: boolean;
+    }): void;
+    removeFromParent(): this;
+    removeOpacityMesh(): this;
+    dispose(): void;
+    getOpacityMesh(): OpacityMesh;
     applyMatrix4(matrix: Matrix4): void;
     applyQuaternion(quaternion: Quaternion): this;
+    applyScaleMatrix4(matrix: Matrix4): void;
+    /**
+     * @description: 生成透明Mesh
+     */
+    private createOpacityMesh;
+    private addParentVisibleListener;
+    private removeParentVisibleListener;
 }

package/libs/CSS3DRenderPlugin/utils/three/CSS3DObject.js

@@ -0,0 +1,115 @@
+var $ = Object.defineProperty;
+var D = (a, r, t) => r in a ? $(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
+var i = (a, r, t) => (D(a, typeof r != "symbol" ? r + "" : r, t), t);
+import { CSS3DObject as F } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { Vector3 as l } from "three";
+import { even as S } from "../even.js";
+import { centerPoint as W } from "../centerPoint.js";
+import { Subscribe as H } from "../../../shared-utils/Subscribe.js";
+import { OpecityMesh as k } from "./OpacityMesh.js";
+const w = 1, A = `CSS3DObjectPlus@${w}`, Q = 216e-5, R = 3e-3;
+class U extends F {
+  constructor(t) {
+    var v, x, V;
+    const e = t.container, s = t.cornerPoints, n = (v = t.ratio) != null ? v : R, P = (x = t.dpr) != null ? x : 1, E = (V = t.pointerEvents) != null ? V : "auto", h = Math.max(Q, n), d = s[0].distanceTo(s[1]), m = s[1].distanceTo(s[2]), c = S(d / n * P), p = S(m / n * P), y = W(...s);
+    let u;
+    if (h === n)
+      e.style.width = `${c}px`, e.style.height = `${p}px`, u = e;
+    else {
+      const o = document.createElement("div");
+      o.style.width = `${c}px`, o.style.height = `${p}px`, o.style.pointerEvents = "none";
+      const g = n / h;
+      e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.width = `${g * c}px`, e.style.height = `${g * p}px`, o.appendChild(e), u = o;
+    }
+    super(u);
+    i(this, "version", w);
+    i(this, "isCSS3DObjectPlus", !0);
+    i(this, "container");
+    i(this, "width");
+    i(this, "height");
+    i(this, "domWidthPx");
+    i(this, "domHeightPx");
+    i(this, "cornerPoints");
+    i(this, "centerPosition");
+    i(this, "ratio");
+    i(this, "mode", "front");
+    i(this, "hooks", new H());
+    i(this, "opacityMesh");
+    i(this, "selfVisible", !0);
+    i(this, "parentVisibleListenerDisposer");
+    i(this, "createOpacityMesh", (t) => {
+      const { domWidthPx: e, domHeightPx: s } = t, n = new k(e, s);
+      return n.position.copy(t.position), n.rotation.copy(t.rotation), n.scale.copy(t.scale), n;
+    });
+    i(this, "addParentVisibleListener", () => {
+      var t;
+      if ((t = this.parent) != null && t.isCSS3DGroup) {
+        const e = this.parent, s = (n) => {
+          this.setVisible(n && this.selfVisible, { setSelfVisible: !1 });
+        };
+        e.hooks.on("visibleChange", s), this.parentVisibleListenerDisposer = () => e.hooks.off("visibleChange", s);
+      }
+    });
+    i(this, "removeParentVisibleListener", () => {
+      var t;
+      (t = this.parentVisibleListenerDisposer) == null || t.call(this);
+    });
+    if (e.style.pointerEvents = E, this.scale.set(h, h, h), this.cornerPoints = s, this.ratio = n, this.container = e, t.mode && (this.mode = t.mode), h === n)
+      this.width = d, this.height = m, this.domWidthPx = c, this.domHeightPx = p, this.centerPosition = y;
+    else {
+      const o = n / h;
+      this.width = o * d, this.height = o * m, this.domWidthPx = o * c, this.domHeightPx = o * p, this.centerPosition = new l().subVectors(y, s[0]).multiplyScalar(o).add(s[0]);
+    }
+    e.classList.add(`${A}__container`);
+    const L = new l().subVectors(s[1], s[0]), M = new l().subVectors(s[3], s[0]), O = new l().crossVectors(L, M).normalize();
+    this.lookAt(O);
+    const f = this.up.clone().applyQuaternion(this.quaternion), b = M.clone(), C = new l().crossVectors(f, b).normalize();
+    this.rotateOnWorldAxis(C, f.angleTo(b)), this.position.copy(y), this.addEventListener("added", () => {
+      var o;
+      this.mode === "front" && ((o = this.opacityMesh) == null || o.removeFromParent()), this.addParentVisibleListener();
+    }), this.addEventListener("removed", () => {
+      var o;
+      (o = this.opacityMesh) == null || o.removeFromParent(), this.removeParentVisibleListener();
+    });
+  }
+  setVisible(t, e = { setSelfVisible: !0 }) {
+    e.setSelfVisible && (this.selfVisible = t), this.visible = t, this.opacityMesh && (this.opacityMesh.visible = t);
+  }
+  removeFromParent() {
+    var e;
+    const t = this.parent;
+    return t !== null && t.remove(this), (e = this.opacityMesh) == null || e.removeFromParent(), this;
+  }
+  removeOpacityMesh() {
+    var t;
+    return (t = this.opacityMesh) == null || t.removeFromParent(), this.opacityMesh = void 0, this;
+  }
+  dispose() {
+    var t;
+    this.container.remove(), this.removeFromParent(), (t = this.opacityMesh) == null || t.removeFromParent();
+  }
+  getOpacityMesh() {
+    if (this.opacityMesh)
+      return this.opacityMesh;
+    {
+      const t = this.createOpacityMesh(this);
+      return this.opacityMesh = t, t;
+    }
+  }
+  applyMatrix4(t) {
+    var e;
+    super.applyMatrix4(t), (e = this.opacityMesh) == null || e.applyMatrix4(t);
+  }
+  applyQuaternion(t) {
+    var e;
+    return super.applyQuaternion(t), (e = this.opacityMesh) == null || e.applyQuaternion(t), this;
+  }
+  applyScaleMatrix4(t) {
+    var e;
+    this.scale.applyMatrix4(t), (e = this.opacityMesh) == null || e.scale.applyMatrix4(t);
+  }
+}
+export {
+  U as CSS3DObjectPlus,
+  Q as MinRatio
+};

package/libs/CSS3DRenderPlugin/utils/three/CSS3DRenderer.d.ts

@@ -0,0 +1,14 @@
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import type * as THREE from 'three';
+export default class ICSS3DRenderer extends CSS3DRenderer {
+    wrapper?: HTMLElement;
+    private requestAnimationFrameId?;
+    private resizeDisoper?;
+    constructor();
+    setWrapper(wrapper: HTMLElement): this;
+    appendToElement(wrapper: HTMLElement): void;
+    renderEveryFrame(scene: THREE.Scene, camera: THREE.Camera): void;
+    stopRender(): void;
+    dispose(): void;
+}
+export { ICSS3DRenderer };

package/libs/CSS3DRenderPlugin/utils/three/CSS3DRenderer.js

@@ -0,0 +1,46 @@
+var d = Object.defineProperty;
+var l = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var s = (r, t, e) => (l(r, typeof t != "symbol" ? t + "" : t, e), e);
+import { CSS3DRenderer as p } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { getAllCSS3DObject as h } from "../getAllCSS3DObject.js";
+import { createResizeObserver as u } from "../createResizeObserver.js";
+class v extends p {
+  constructor() {
+    super();
+    s(this, "wrapper");
+    s(this, "requestAnimationFrameId");
+    s(this, "resizeDisoper");
+    this.domElement.style.position = "absolute", this.domElement.style.top = "0", this.domElement.style.left = "0", this.domElement.style.userSelect = "none", this.domElement.style.pointerEvents = "none";
+  }
+  setWrapper(e) {
+    if (!e)
+      throw new Error("CSS3DRenderer: wrapper is required");
+    if (e.contains(this.domElement))
+      return;
+    const i = this.wrapper;
+    return i && i.contains(this.domElement) && this.domElement.remove(), this.appendToElement(e), this.wrapper = e, this;
+  }
+  appendToElement(e) {
+    e.appendChild(this.domElement);
+    const i = (m, a) => this.setSize(m, a), { observe: n, unobserve: o } = u(e, i, !0);
+    n(), this.resizeDisoper = o, this.wrapper = e;
+  }
+  renderEveryFrame(e, i) {
+    if (this.wrapper || console.warn("wrapper is not find, creating a html element and call setWrapper(wrapper)", this, e), this.requestAnimationFrameId)
+      return console.warn("CSS3DRenderer: render is running");
+    const n = () => {
+      this.requestAnimationFrameId = requestAnimationFrame(n), !!e.visible && h(e).length !== 0 && this.render(e, i);
+    };
+    n();
+  }
+  stopRender() {
+    this.requestAnimationFrameId && cancelAnimationFrame(this.requestAnimationFrameId);
+  }
+  dispose() {
+    var e;
+    this.stopRender(), (e = this.resizeDisoper) == null || e.call(this), this.domElement.remove();
+  }
+}
+export {
+  v as ICSS3DRenderer
+};

package/libs/CSS3DRenderPlugin/utils/three/CSS3DScene.d.ts

@@ -0,0 +1,12 @@
+import type { Object3D } from 'three';
+import * as THREE from 'three';
+export declare class CSS3DFrontScene extends THREE.Scene {
+    constructor();
+    add(...objects: Object3D[]): this;
+}
+export declare class CSS3DBehindScene extends THREE.Scene {
+    private scene;
+    constructor(scene: THREE.Scene);
+    add(...objects: Object3D[]): this;
+    remove(...objects: Object3D[]): this;
+}