@realsee/dnalogel 2.2.4 → 2.2.5-alpha.0

package/libs/CSS3DRenderPlugin/Controller.js

@@ -1,54 +1,60 @@
-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 h = (s, n, e) => n in s ? y(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e, v = (s, n) => {
-  for (var e in n || (n = {}))
-    S.call(n, e) && h(s, e, n[e]);
-  if (R)
-    for (var e of R(n))
-      D.call(n, e) && h(s, e, n[e]);
-  return s;
-}, m = (s, n) => F(s, P(n));
-var l = (s, n, e) => (h(s, typeof n != "symbol" ? n + "" : n, e), e);
-import { CSS3DRender as w } from "./CSS3DRender.js";
-const x = "v2.0.1", C = `CSS3DRenderPlugin@${x}`;
-class N extends w {
+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 l = (r, t, e) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, v = (r, t) => {
+  for (var e in t || (t = {}))
+    R.call(t, e) && l(r, e, t[e]);
+  if (b)
+    for (var e of b(t))
+      D.call(t, e) && l(r, e, t[e]);
+  return r;
+}, h = (r, t) => E(r, F(t));
+var d = (r, t, e) => (l(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";
+const x = "v2.0.1", m = `CSS3DRenderPlugin@${x}`;
+class N 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 i = (() => {
-        var E;
-        (t == null ? void 0 : t.dpr) !== void 0 && console.warn(`${C}: please use "config.devicePixelRatio" replace "config.dpr"`);
-        const a = {
+      const s = (() => {
+        var f;
+        (i == null ? void 0 : i.dpr) !== void 0 && console.warn(`${m}: please use "config.devicePixelRatio" replace "config.dpr"`);
+        const o = {
           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(o, i, (i == null ? void 0 : i.mode) === "behind" ? { scene: this.five.scene } : void 0);
+      })(), a = this.five.getElement();
+      if (!a) {
+        console.error(`${m}: five.getElement() is ${a}`);
         return;
       }
-      const { autoRender: d, mode: r } = i, p = r === "front" ? o.parentElement : i.behindFiveContainer;
-      this.setContainer(p || document.body, "front");
-      const f = this.getBehindFiveElement();
-      f && this.setContainer(f, "behind"), this.appendToElement(p || document.body, r);
-      const c = this.create3DElement(this.five.camera, e, m(v({}, i), { autoRender: !1 }));
-      if (!c)
+      const { autoRender: c } = s;
+      s.mode === "behind" && s.behindFiveContainer && (this.behindFiveContainer = s.behindFiveContainer);
+      const n = this.create3DElement(this.five.camera, e, h(v({}, s), { autoRender: !1 }));
+      if (!n)
         return;
-      const u = c.render, b = () => {
-        var a;
-        r === "front" && u(), r === "behind" && ((a = this.five.model) != null && a.loaded ? u() : this.five.once("modelLoaded", () => u()));
+      const u = () => {
+        const o = n.css3DObject.mode === "front" ? a.parentElement : this.getBehindFiveElement();
+        if (!o)
+          return console.error(`${m}: wrapper is ${o}`);
+        n.appendToElement(o), n.render();
+      }, p = () => {
+        n.css3DObject.mode === "front" && u(), n.css3DObject.mode === "behind" && $(this.five).then(() => {
+          u();
+        });
       };
-      return d && b(), m(v({}, c), { render: d ? void 0 : b });
+      return c && p(), h(v({}, n), { render: c ? void 0 : p });
     });
     this.five = e;
   }
@@ -56,26 +62,11 @@ class N 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 i = this.five.getElement();
-    if (!i)
-      return;
-    const o = (r = i == null ? void 0 : i.style.position) != null ? r : getComputedStyle(i);
-    (!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 = i == null ? void 0 : i.parentElement;
-    if (d)
-      return d.insertBefore(t, i), t;
+    return this.behindFiveContainer ? this.behindFiveContainer : (this.behindFiveContainer = j(this.five), this.behindFiveContainer);
   }
 }
 export {

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,5 +1,6 @@
 import { Controller as r } from "./Controller.js";
-const n = (o) => new r(o);
+import "./CSS3DRender.js";
+const t = (o) => new r(o);
 export {
-  n as CSS3DRenderPlugin
+  t as CSS3DRenderPlugin
 };

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,12 @@
+import * as THREE from 'three';
+import type { Object3D } from 'three';
+export declare class CSS3DFrontGroup extends THREE.Group {
+    constructor();
+    add(...objects: Object3D[]): this;
+}
+export declare class CSS3DBehindGroup extends THREE.Group {
+    private scene;
+    constructor(scene: THREE.Scene);
+    add(...objects: Object3D[]): this;
+    remove(...objects: Object3D[]): this;
+}

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

@@ -0,0 +1,39 @@
+var a = Object.defineProperty;
+var h = (o, e, r) => e in o ? a(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
+var n = (o, e, r) => (h(o, typeof e != "symbol" ? e + "" : e, r), r);
+import * as i from "three";
+import { getAllCSS3DObject as s } from "../getAllCSS3DObject.js";
+class c extends i.Group {
+  constructor() {
+    super();
+  }
+  add(...e) {
+    return super.add(...e), s(...e).forEach((r) => {
+      r.mode = "front";
+    }), this;
+  }
+}
+class m extends i.Group {
+  constructor(r) {
+    super();
+    n(this, "scene");
+    if (!r)
+      throw new Error("CSS3DBehindScene: scene is required");
+    this.scene = r;
+  }
+  add(...r) {
+    return super.add(...r), s(...r).forEach((t) => {
+      t.mode = "behind", this.scene.add(t.getOpacityMesh());
+    }), this;
+  }
+  remove(...r) {
+    return s(...r).forEach((t) => {
+      var d;
+      (d = t.opacityMesh) == null || d.removeFromParent();
+    }), super.remove(...r), this;
+  }
+}
+export {
+  m as CSS3DBehindGroup,
+  c 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,39 @@ 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;
+    constructor(params: {
+        container: T;
+        mode?: 'front' | 'behind';
+        cornerPoints: CornerPoints;
+        ratio?: number;
+        dpr?: number;
+        pointerEvents?: 'none' | 'auto';
+    });
+    setVisible(visible: 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;
 }

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

@@ -0,0 +1,93 @@
+var H = Object.defineProperty;
+var C = (h, r, t) => r in h ? H(h, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[r] = t;
+var o = (h, r, t) => (C(h, 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 b } from "../even.js";
+import { centerPoint as A } from "../centerPoint.js";
+import { Subscribe as Q } from "../../../shared-utils/Subscribe.js";
+import { OpecityMesh as R } from "./OpacityMesh.js";
+const V = 1, D = `CSS3DObjectPlus@${V}`, N = 216e-5, T = 3e-3;
+class q extends F {
+  constructor(t) {
+    var v, f, w;
+    const e = t.container, i = t.cornerPoints, s = (v = t.ratio) != null ? v : T, M = (f = t.dpr) != null ? f : 1, O = (w = t.pointerEvents) != null ? w : "auto", c = Math.max(N, s), y = i[0].distanceTo(i[1]), d = i[1].distanceTo(i[2]), a = b(y / s * M), p = b(d / s * M), m = A(...i);
+    let u;
+    if (c === s)
+      e.style.width = `${a}px`, e.style.height = `${p}px`, u = e;
+    else {
+      const n = document.createElement("div");
+      n.style.width = `${a}px`, n.style.height = `${p}px`, n.style.pointerEvents = "none";
+      const S = s / c;
+      e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.width = `${S * a}px`, e.style.height = `${S * p}px`, n.appendChild(e), u = n;
+    }
+    super(u);
+    o(this, "version", V);
+    o(this, "isCSS3DObjectPlus", !0);
+    o(this, "container");
+    o(this, "width");
+    o(this, "height");
+    o(this, "domWidthPx");
+    o(this, "domHeightPx");
+    o(this, "cornerPoints");
+    o(this, "centerPosition");
+    o(this, "ratio");
+    o(this, "mode", "front");
+    o(this, "hooks", new Q());
+    o(this, "opacityMesh");
+    o(this, "createOpacityMesh", (t) => {
+      const { domWidthPx: e, domHeightPx: i } = t, s = new R(e, i);
+      return s.position.copy(t.position), s.rotation.copy(t.rotation), s.scale.copy(t.scale), s;
+    });
+    if (e.style.pointerEvents = O, this.scale.set(c, c, c), this.cornerPoints = i, this.ratio = s, this.container = e, t.mode && (this.mode = t.mode), c === s)
+      this.width = y, this.height = d, this.domWidthPx = a, this.domHeightPx = p, this.centerPosition = m;
+    else {
+      const n = s / c;
+      this.width = n * y, this.height = n * d, this.domWidthPx = n * a, this.domHeightPx = n * p, this.centerPosition = new l().subVectors(m, i[0]).multiplyScalar(n).add(i[0]);
+    }
+    e.classList.add(`${D}__container`);
+    const E = new l().subVectors(i[1], i[0]), P = new l().subVectors(i[3], i[0]), $ = new l().crossVectors(E, P).normalize();
+    this.lookAt($);
+    const x = this.up.clone().applyQuaternion(this.quaternion), g = P.clone(), W = new l().crossVectors(x, g).normalize();
+    this.rotateOnWorldAxis(W, x.angleTo(g)), this.position.copy(m);
+  }
+  setVisible(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 {
+  q as CSS3DObjectPlus
+};

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

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

@@ -0,0 +1,39 @@
+var i = Object.defineProperty;
+var a = (n, r, e) => r in n ? i(n, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[r] = e;
+var d = (n, r, e) => (a(n, typeof r != "symbol" ? r + "" : r, e), e);
+import * as c from "three";
+import { getAllCSS3DObject as o } from "../getAllCSS3DObject.js";
+class m extends c.Scene {
+  constructor() {
+    super();
+  }
+  add(...r) {
+    return super.add(...r), o(...r).forEach((e) => {
+      e.mode = "front";
+    }), this;
+  }
+}
+class p extends c.Scene {
+  constructor(e) {
+    super();
+    d(this, "scene");
+    if (!e)
+      throw new Error("CSS3DBehindScene: scene is required");
+    this.scene = e;
+  }
+  add(...e) {
+    return super.add(...e), o(...e).forEach((t) => {
+      t.mode = "behind", this.scene.add(t.getOpacityMesh());
+    }), this;
+  }
+  remove(...e) {
+    return o(...e).forEach((t) => {
+      var s;
+      (s = t.opacityMesh) == null || s.removeFromParent();
+    }), super.remove(...e), this;
+  }
+}
+export {
+  p as CSS3DBehindScene,
+  m as CSS3DFrontScene
+};

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

@@ -0,0 +1,6 @@
+import * as THREE from 'three';
+export default class OpecityMesh extends THREE.Mesh {
+    name: string;
+    constructor(width: number, height: number);
+    removeFromParent(): this;
+}

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

@@ -0,0 +1,18 @@
+var c = Object.defineProperty;
+var m = (r, t, e) => t in r ? c(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
+import * as s from "three";
+class p extends s.Mesh {
+  constructor(e, a) {
+    const n = new s.MeshBasicMaterial({ opacity: 0, color: 0, transparent: !1, side: s.DoubleSide }), i = new s.PlaneGeometry(e, a);
+    super(i, n);
+    o(this, "name", "opacity-mesh");
+  }
+  removeFromParent() {
+    const e = this.parent;
+    return e !== null && e.remove(this), this;
+  }
+}
+export {
+  p as OpecityMesh
+};

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

@@ -0,0 +1,2 @@
+import type { Five } from '@realsee/five';
+export default function fiveModelLoaded(five: Five): Promise<void>;

package/libs/CSS3DRenderPlugin/utils/waitFiveModelLoaded.js

@@ -0,0 +1,31 @@
+var t = (o, n, e) => new Promise((c, l) => {
+  var i = (d) => {
+    try {
+      r(e.next(d));
+    } catch (a) {
+      l(a);
+    }
+  }, m = (d) => {
+    try {
+      r(e.throw(d));
+    } catch (a) {
+      l(a);
+    }
+  }, r = (d) => d.done ? c(d.value) : Promise.resolve(d.value).then(i, m);
+  r((e = e.apply(o, n)).next());
+});
+function f(o) {
+  return t(this, null, function* () {
+    return new Promise((n) => {
+      var e;
+      if ((e = o.model) != null && e.loaded) {
+        n();
+        return;
+      } else
+        o.once("modelLoaded", () => n());
+    });
+  });
+}
+export {
+  f as fiveModelLoaded
+};