@realsee/dnalogel 2.1.0-alpha.26 → 2.1.0-alpha.28

package/libs/CSS3DRenderPlugin/CSS3DRender.d.ts

@@ -2,10 +2,10 @@ import * as THREE from 'three';
 import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import { Subscribe } from '../shared-utils/Subscribe';
 import { AnyPosition } from './utils';
-import { CSS3DObjectPlus } from './utils/CSS3DObjectPlus';
+import { CSS3DObjectPlus, Mode } from './utils/CSS3DObjectPlus';
+export { MinRatio } from './utils/CSS3DObjectPlus';
 export declare const __ELEMENT__ = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__";
 export declare const PLUGIN: string;
-export declare const MinRatio = 0.00216;
 export interface CSS3DRenderState {
     enabled: boolean;
     visible: boolean;
@@ -54,7 +54,11 @@ export interface Create3DDElementParamsType {
     });
 }
 export declare const globalStore: {
-    resizeObserver?: {
+    frontModeResizeObserver?: {
+        observe: () => void;
+        unobserve: () => void;
+    };
+    behindModeResizeObserver?: {
         observe: () => void;
         unobserve: () => void;
     };
@@ -143,10 +147,17 @@ export declare class CSS3DRender {
         setEnabled: (enabled: boolean) => void;
         appendToElement: (container: Element) => void;
     };
-    appendToElement(container: Element | undefined, mode: 'front' | 'behind'): void;
+    setContainer(container: Element, mode: Mode): void;
+    appendToElement(container: Element | undefined, mode: Mode): void;
     setVisibleById: (id: string, visible: boolean) => void;
     setEnabledById: (id: string, enabled: boolean) => void;
+    private render;
     private createObject;
+    private initGlobalModeStore;
+    /**
+     * @description: 生成透明Mesh
+     */
+    private createOpacityMesh;
     private handleShow;
     private handleHide;
     private handleEnable;

package/libs/CSS3DRenderPlugin/CSS3DRender.js

@@ -1,32 +1,34 @@
-var B = Object.defineProperty;
-var q = (f, e, s) => e in f ? B(f, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : f[e] = s;
-var l = (f, e, s) => (q(f, typeof e != "symbol" ? e + "" : e, s), s);
-import * as m from "three";
-import { CSS3DRenderer as A } from "three/examples/jsm/renderers/CSS3DRenderer";
-import { Subscribe as H } from "../shared-utils/Subscribe.js";
-import { evenNumber as _ } from "./utils/evenNumber.js";
-import { anyPositionToVector3 as x } from "./utils/positionToVector3.js";
-import { CSS3DObjectPlus as V } from "./utils/CSS3DObjectPlus.js";
+var J = Object.defineProperty;
+var K = (S, e, t) => e in S ? J(S, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : S[e] = t;
+var b = (S, e, t) => (K(S, typeof e != "symbol" ? e + "" : e, t), t);
+import * as C from "three";
+import { CSS3DRenderer as B } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { Subscribe as X } from "../shared-utils/Subscribe.js";
+import { evenNumber as L } from "./utils/evenNumber.js";
+import { anyPositionToVector3 as Y } from "./utils/positionToVector3.js";
+import { CSS3DObjectPlus as Z } from "./utils/CSS3DObjectPlus.js";
+import { MinRatio as fe } from "./utils/CSS3DObjectPlus.js";
 import "./utils/centerPoint.js";
-const U = "v2.0.1", T = "CSS3DRenderer", Z = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__", D = `${T}@${U}`, L = (f) => `${D}--${f}`, ee = 216e-5, o = {};
-class te {
+const ee = "v2.0.1", x = "CSS3DRenderer", ce = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__", m = `${x}@${ee}`, P = (S) => `${m}--${S}`, o = {};
+class ae {
   constructor() {
-    l(this, "hooks", new H());
-    l(this, "state", {
+    b(this, "hooks", new X());
+    b(this, "state", {
       enabled: !0,
       visible: !0,
       disposed: !1
     });
-    l(this, "store", {
+    b(this, "store", {
+      rendered: !1,
       disposers: [],
       frontModeCSS3DObjects: {},
       behindModeCSS3DObjects: {}
     });
-    l(this, "create3DElement", (e, s, t) => {
+    b(this, "create3DElement", (e, t, s) => {
       if (this.state.disposed)
         return this.disposedErrorLog();
-      const i = (() => {
-        const d = {
+      const n = (() => {
+        const r = {
           ratio: 216e-5,
           devicePixelRatio: 1,
           mode: "front",
@@ -34,133 +36,143 @@ class te {
           container: document.createElement("div"),
           pointerEvents: "none"
         };
-        return Object.assign(d, t);
-      })(), n = s.map(x);
-      if ((n == null ? void 0 : n.length) < 4)
-        return console.error(`${D}: requires 4 point but params may have fewer`);
-      const { ratio: a, devicePixelRatio: h, mode: r, autoRender: u, container: S, pointerEvents: E } = i, v = [], { css3DObject: c, opacityMesh: b } = this.createObject(n, {
-        ratio: a,
-        dpr: h,
-        container: S,
-        mode: r,
-        pointerEvents: E
+        return Object.assign(r, s);
+      })(), i = t.map(Y);
+      if ((i == null ? void 0 : i.length) < 4)
+        return console.error(`${m}: requires 4 point but params may have fewer`);
+      const { ratio: d, devicePixelRatio: a, mode: h, autoRender: p, container: f, pointerEvents: N } = n, w = [], { css3DObject: c, opacityMesh: O } = this.createObject(i, { ratio: d, dpr: a, container: f, mode: h, pointerEvents: N });
+      f.id = `container--${c.uuid}`;
+      const U = h === "front" && !o.frontModeStore, H = h === "behind" && !o.behindModeStore;
+      h === "front" && this.initGlobalModeStore("front"), h === "behind" && this.initGlobalModeStore("behind", n.scene), c.hooks.on("changeMode", (r, D, M) => {
+        var k, T, $;
+        if (r === D)
+          return;
+        r === "front" && this.initGlobalModeStore("front"), r === "behind" && this.initGlobalModeStore("behind", M);
+        const l = D === "front" ? o.frontModeStore : o.behindModeStore, u = r === "front" ? o.frontModeStore : o.behindModeStore, A = D === "behind" ? this.store.behindModeCSS3DObjects : this.store.frontModeCSS3DObjects, I = r === "behind" ? this.store.behindModeCSS3DObjects : this.store.frontModeCSS3DObjects;
+        if (!A || !I)
+          return console.error(`${m}: changeMode error: prevObjects or nextObjects is undefined`);
+        const j = A[c.uuid];
+        if (!j)
+          return console.error(`${m}: changeMode error: prevObject is undefined`);
+        if (r === "behind") {
+          const _ = (k = j.opacityMesh) != null ? k : this.createOpacityMesh(j.css3DObject);
+          l == null || l.css3DScene.remove(j.css3DObject), I[c.uuid] = { css3DObject: c, opacityMesh: _, visible: !0, enabled: !0, mode: r, scene: M }, u == null || u.css3DScene.add(c), M == null || M.add(_);
+        }
+        r === "front" && (l == null || l.css3DScene.remove(j.css3DObject), ($ = (T = A[c.uuid]) == null ? void 0 : T.scene) == null || $.remove(j.opacityMesh), I[c.uuid] = { css3DObject: c, visible: !0, enabled: !0, mode: r }, u == null || u.css3DScene.add(c)), r === "behind" && this.appendToElement(o.behindModeContainer, "behind"), r === "front" && this.appendToElement(o.frontModeContainer, "front"), this.render(e), console.log("change success");
       });
-      S.id = `container--${c.uuid}`;
-      const y = r === "front" && !o.frontModeStore, R = r === "behind" && !o.behindModeStore;
-      R && (o.behindModeStore = {
-        scene: i.scene,
-        css3DScene: new m.Scene(),
-        css3DRenderer: new A()
-      }), y && (o.frontModeStore = { css3DScene: new m.Scene(), css3DRenderer: new A() });
-      const M = r === "front" ? o.frontModeStore : o.behindModeStore, { css3DScene: O, css3DRenderer: p } = M, g = (() => {
-        const d = () => {
-          r === "front" ? this.store.frontModeCSS3DObjects[c.uuid] = {
-            visible: !0,
-            enabled: !0,
-            css3DObject: c,
-            mode: "front"
-          } : this.store.behindModeCSS3DObjects[c.uuid] = {
-            visible: !0,
-            enabled: !0,
-            css3DObject: c,
-            opacityMesh: b,
-            mode: "behind",
-            scene: i.scene
-          }, O.add(c), r === "behind" && b && (i.scene.add(b), v.push(() => b && i.scene.remove(b)));
+      const y = h === "front" ? o.frontModeStore : o.behindModeStore, { css3DScene: E, css3DRenderer: v } = y, F = (() => {
+        const r = () => {
+          var M, l;
+          const D = c.mode;
+          if (D === "front")
+            this.store.frontModeCSS3DObjects[c.uuid] = {
+              visible: !0,
+              enabled: !0,
+              css3DObject: c,
+              mode: "front"
+            };
+          else {
+            if (!n.scene)
+              return;
+            this.store.behindModeCSS3DObjects[c.uuid] = {
+              visible: !0,
+              enabled: !0,
+              css3DObject: c,
+              opacityMesh: O,
+              mode: "behind",
+              scene: n.scene
+            };
+          }
+          E.getObjectById(c.id) || E.add(c), D === "behind" && O && ((M = n.scene) != null && M.getObjectById(O.id) || (l = n.scene) == null || l.add(O), w.push(() => {
+            var u;
+            return O && ((u = n.scene) == null ? void 0 : u.remove(O));
+          }));
         };
-        if (y || R) {
-          p.domElement.style.position = "absolute", p.domElement.style.top = "0", p.domElement.style.userSelect = "none", p.domElement.style.pointerEvents = "none", p.domElement.classList.add(L(r));
-          const I = () => {
-            const k = requestAnimationFrame(I);
-            M.requestAnimationFrameId = k, p.render(O, e);
-          };
-          return () => {
-            d(), I();
-          };
-        }
-        return () => d();
-      })(), w = r === "front" ? o.frontModeContainer : o.behindModeContainer;
-      if (w) {
-        this.appendToElement(w, r);
-        const d = r === "front" ? o.frontModeStore : o.behindModeStore;
-        d && (d.appendedToPage = !0);
+        return U || H ? (v.domElement.style.position = "absolute", v.domElement.style.top = "0", v.domElement.style.userSelect = "none", v.domElement.style.pointerEvents = "none", v.domElement.classList.add(P(h)), () => {
+          r(), this.render(e);
+        }) : (this.store.rendered = !0, () => r());
+      })(), z = h === "front" ? o.frontModeContainer : o.behindModeContainer;
+      if (z) {
+        this.appendToElement(z, h);
+        const r = h === "front" ? o.frontModeStore : o.behindModeStore;
+        r && (r.appendedToPage = !0);
       }
-      const j = (d) => this.setVisibleById(c.uuid, d), C = (d) => this.setEnabledById(c.uuid, d), P = () => j(!0), $ = () => j(!1), F = () => C(!0), N = () => C(!1), z = () => (delete this.store.frontModeCSS3DObjects[c.uuid], delete this.store.behindModeCSS3DObjects[c.uuid], v.forEach((d) => d == null ? void 0 : d()), O.remove(c), O.children.length === 0 && (typeof M.requestAnimationFrameId == "number" && cancelAnimationFrame(M.requestAnimationFrameId), p.domElement.remove(), r === "front" && (o.frontModeStore = void 0), r === "behind" && (o.behindModeStore = void 0), o.resizeObserver = void 0), !0);
-      return this.store.disposers.push(z), u && g(), {
+      const g = (r) => this.setVisibleById(c.uuid, r), R = (r) => this.setEnabledById(c.uuid, r), V = () => g(!0), G = () => g(!1), Q = () => R(!0), W = () => R(!1), q = () => (delete this.store.frontModeCSS3DObjects[c.uuid], delete this.store.behindModeCSS3DObjects[c.uuid], w.forEach((r) => r == null ? void 0 : r()), E.remove(c), E.children.length === 0 && (typeof y.requestAnimationFrameId == "number" && cancelAnimationFrame(y.requestAnimationFrameId), v.domElement.remove(), h === "front" && (o.frontModeStore = void 0), h === "behind" && (o.behindModeStore = void 0), o.frontModeResizeObserver = void 0, o.behindModeResizeObserver = void 0), !0);
+      return this.store.disposers.push(q), p && F(), {
         id: c.uuid,
-        container: S,
-        dispose: z,
+        container: f,
+        dispose: q,
         css3DObject: c,
-        render: u ? void 0 : g,
-        show: P,
-        hide: $,
-        setVisible: j,
-        disable: N,
-        enable: F,
-        setEnabled: C,
-        appendToElement: (d) => this.appendToElement(d, r)
+        render: p ? void 0 : F,
+        show: V,
+        hide: G,
+        setVisible: g,
+        disable: W,
+        enable: Q,
+        setEnabled: R,
+        appendToElement: (r) => this.appendToElement(r, h)
       };
     });
-    l(this, "setVisibleById", (e, s) => {
-      var i;
-      const t = (i = this.store.frontModeCSS3DObjects[e]) != null ? i : this.store.behindModeCSS3DObjects[e];
-      if (!t)
+    b(this, "setVisibleById", (e, t) => {
+      var n;
+      const s = (n = this.store.frontModeCSS3DObjects[e]) != null ? n : this.store.behindModeCSS3DObjects[e];
+      if (!s)
         return console.error("id not found", e);
-      t.visible = s, this.state.visible && (t.css3DObject.visible = s, t.mode === "behind" && (t.opacityMesh.visible = s));
+      s.visible = t, this.state.visible && (s.css3DObject.visible = t, s.mode === "behind" && (s.opacityMesh.visible = t));
     });
-    l(this, "setEnabledById", (e, s) => {
-      var n, a, h;
-      const t = (n = this.store.frontModeCSS3DObjects[e]) != null ? n : this.store.behindModeCSS3DObjects[e];
-      if (!t)
+    b(this, "setEnabledById", (e, t) => {
+      var i, d, a;
+      const s = (i = this.store.frontModeCSS3DObjects[e]) != null ? i : this.store.behindModeCSS3DObjects[e];
+      if (!s)
         return;
-      const i = t.mode === "front" ? (a = o.frontModeStore) == null ? void 0 : a.css3DScene : (h = o.behindModeStore) == null ? void 0 : h.css3DScene;
-      !i || (s ? (i.add(t.css3DObject), t.mode === "behind" && t.scene.add(t.opacityMesh)) : (i.remove(t.css3DObject), t.mode === "behind" && t.scene.remove(t.opacityMesh)), t.enabled = s);
+      const n = s.mode === "front" ? (d = o.frontModeStore) == null ? void 0 : d.css3DScene : (a = o.behindModeStore) == null ? void 0 : a.css3DScene;
+      !n || (t ? (n.add(s.css3DObject), s.mode === "behind" && s.scene.add(s.opacityMesh)) : (n.remove(s.css3DObject), s.mode === "behind" && s.scene.remove(s.opacityMesh)), s.enabled = t);
     });
-    l(this, "createObject", (e, s) => {
-      const { ratio: t, dpr: i, container: n, mode: a, pointerEvents: h } = s, r = new V(n, e, t, i);
-      n.style.pointerEvents = h, n.classList.add(`${T}__container`);
-      const { domWidthPx: u, domHeightPx: S } = r, E = (() => {
-        if (a === "behind") {
-          const v = new m.MeshBasicMaterial({
-            opacity: 0,
-            transparent: !1,
-            side: m.DoubleSide
-          }), c = new m.PlaneGeometry(u, S), b = new m.Mesh(c, v);
-          return b.name = L("mesh"), b.position.copy(r.position), b.rotation.copy(r.rotation), b.scale.copy(r.scale), b;
-        }
-      })();
-      return { css3DObject: r, opacityMesh: E };
+    b(this, "createObject", (e, t) => {
+      const { ratio: s, dpr: n, container: i, mode: d, pointerEvents: a } = t, h = new Z(i, e, s, n, d);
+      i.style.pointerEvents = a, i.classList.add(`${x}__container`);
+      const p = d === "behind" ? this.createOpacityMesh(h) : void 0;
+      return { css3DObject: h, opacityMesh: p };
+    });
+    b(this, "createOpacityMesh", (e) => {
+      const { domWidthPx: t, domHeightPx: s } = e, n = new C.MeshBasicMaterial({
+        opacity: 0,
+        color: 0,
+        transparent: !1,
+        side: C.DoubleSide
+      }), i = new C.PlaneGeometry(t, s), d = new C.Mesh(i, n);
+      return d.name = P("mesh"), d.position.copy(e.position), d.rotation.copy(e.rotation), d.scale.copy(e.scale), e.hooks.on("applyMatrix4", (a) => d.applyMatrix4(a)), e.hooks.on("applyQuaternion", (a) => d.applyQuaternion(a)), e.hooks.on("applyScaleMatrix4", (a) => d.scale.applyMatrix4(a)), d;
     });
-    l(this, "createResizeObserver", (e, s, t = !0) => {
+    b(this, "createResizeObserver", (e, t, s = !0) => {
       if (!e)
         return console.error("createResizeObserver: element is undefined"), { observe: () => {
         }, unobserve: () => {
         } };
-      const i = () => {
-        const a = _(e.clientWidth, { smaller: !0 }), h = _(e.clientHeight, { smaller: !0 });
-        s(a, h);
+      const n = () => {
+        const d = L(e.clientWidth, { smaller: !0 }), a = L(e.clientHeight, { smaller: !0 });
+        t(d, a);
       };
       if (typeof ResizeObserver > "u" || !ResizeObserver)
-        return console.warn("createResizeObserver: ResizeObserver is undefined"), { observe: () => i(), unobserve: () => {
+        return console.warn("createResizeObserver: ResizeObserver is undefined"), { observe: () => n(), unobserve: () => {
         } };
-      const n = new ResizeObserver(i);
-      return t && i(), {
-        observe: () => n.observe(e),
-        unobserve: () => n.unobserve(e)
+      const i = new ResizeObserver(n);
+      return s && n(), {
+        observe: () => i.observe(e),
+        unobserve: () => i.unobserve(e)
       };
     });
-    l(this, "disposedErrorLog", () => {
-      console.error(`${D} is disposed`);
+    b(this, "disposedErrorLog", () => {
+      console.error(`${m} is disposed`);
     });
   }
   getCurrentState() {
     return this.state;
   }
-  setState(e, s = { userAction: !0 }) {
+  setState(e, t = { userAction: !0 }) {
     if (this.state.disposed)
       return this.disposedErrorLog();
-    const t = { ...this.state };
-    this.state = Object.assign(this.state, e), t.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), t.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: t, userAction: s.userAction });
+    const s = { ...this.state };
+    this.state = Object.assign(this.state, e), s.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), s.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: s, userAction: t.userAction });
   }
   dispose() {
     this.store.disposers.forEach((e) => e == null ? void 0 : e()), this.store.disposers = [], this.hooks.emit("dispose"), this.state.disposed = !0;
@@ -185,24 +197,66 @@ class te {
       return this.disposedErrorLog();
     this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
   }
-  appendToElement(e, s) {
-    if (!e)
-      throw new Error(`${D} Cannot append to container: container is ${e}`);
-    const t = s === "front" ? o.frontModeStore : o.behindModeStore;
-    if (!t) {
-      s === "front" && (o.frontModeContainer = e), s === "behind" && (o.behindModeContainer = e);
+  setContainer(e, t) {
+    t === "front" ? o.frontModeContainer = e : o.behindModeContainer = e;
+  }
+  appendToElement(e, t) {
+    const s = t === "front" ? o.frontModeStore : o.behindModeStore;
+    if (!s) {
+      if (t === "front" && !o.frontModeContainer) {
+        if (!e)
+          throw new Error(`${m} Cannot append to container: front mode but container is ${e}`);
+        o.frontModeContainer = e;
+      }
+      if (t === "behind" && !o.behindModeContainer) {
+        if (!e)
+          throw new Error(`${m} Cannot append to container: behind mode but container is ${e}`);
+        o.behindModeContainer = e;
+      }
       return;
     }
-    if (!t.appendedToPage) {
-      if (e.appendChild(t.css3DRenderer.domElement), !o.resizeObserver) {
-        const i = (h, r) => {
-          var u, S;
-          (u = o.frontModeStore) == null || u.css3DRenderer.setSize(h, r), (S = o.behindModeStore) == null || S.css3DRenderer.setSize(h, r);
-        }, { observe: n, unobserve: a } = this.createResizeObserver(e, i, !0);
-        o.resizeObserver = { observe: n, unobserve: a }, n(), this.store.disposers.push(a);
-      }
-      t.appendedToPage = !0;
+    if (s.appendedToPage)
+      return;
+    const n = t === "behind" ? o.behindModeContainer : o.frontModeContainer;
+    if (!n)
+      return console.error("wrapper is undefined");
+    if (n.appendChild(s.css3DRenderer.domElement), t === "behind" && !o.behindModeResizeObserver) {
+      const i = (h, p) => {
+        var f;
+        (f = o.behindModeStore) == null || f.css3DRenderer.setSize(h, p);
+      }, { observe: d, unobserve: a } = this.createResizeObserver(n, i, !0);
+      o.behindModeResizeObserver = { observe: d, unobserve: a }, d(), this.store.disposers.push(a);
+    }
+    if (t === "front" && !o.frontModeResizeObserver) {
+      const i = (h, p) => {
+        var f;
+        (f = o.frontModeStore) == null || f.css3DRenderer.setSize(h, p);
+      }, { observe: d, unobserve: a } = this.createResizeObserver(n, i, !0);
+      o.frontModeResizeObserver = { observe: d, unobserve: a }, d(), this.store.disposers.push(a);
+    }
+    s.appendedToPage = !0;
+  }
+  render(e) {
+    const t = o.behindModeStore, s = o.frontModeStore;
+    if (t && Object.keys(this.store.behindModeCSS3DObjects).length > 0 && !t.requestAnimationFrameId) {
+      const n = () => {
+        const i = requestAnimationFrame(n);
+        t.requestAnimationFrameId = i, t.css3DRenderer.render(t.css3DScene, e);
+      };
+      n();
+    }
+    if (s && Object.keys(this.store.frontModeCSS3DObjects).length > 0 && !s.requestAnimationFrameId) {
+      const n = () => {
+        const i = requestAnimationFrame(n);
+        s.requestAnimationFrameId = i, s.css3DRenderer.render(s.css3DScene, e);
+      };
+      n();
     }
+    Object.keys(this.store.frontModeCSS3DObjects).length === 0 && (s == null ? void 0 : s.requestAnimationFrameId) !== void 0 && (cancelAnimationFrame(s.requestAnimationFrameId), s.requestAnimationFrameId = void 0), Object.keys(this.store.behindModeCSS3DObjects).length === 0 && (t == null ? void 0 : t.requestAnimationFrameId) !== void 0 && (cancelAnimationFrame(t.requestAnimationFrameId), t.requestAnimationFrameId = void 0);
+  }
+  initGlobalModeStore(e, t) {
+    const s = e === "front" && !o.frontModeStore;
+    e === "behind" && !o.behindModeStore && (o.behindModeStore = { scene: t, css3DScene: new C.Scene(), css3DRenderer: new B() }), s && (o.frontModeStore = { css3DScene: new C.Scene(), css3DRenderer: new B() });
   }
   async handleShow() {
     Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
@@ -220,27 +274,27 @@ class te {
   }
   handleEnable() {
     Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
-      var s;
-      !e.enabled || (s = o.frontModeStore) == null || s.css3DScene.add(e.css3DObject);
+      var t;
+      !e.enabled || (t = o.frontModeStore) == null || t.css3DScene.add(e.css3DObject);
     }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
-      var s, t;
-      !e.enabled || ((s = o.behindModeStore) == null || s.css3DScene.add(e.css3DObject), (t = o.behindModeStore) == null || t.scene.add(e.opacityMesh));
+      var t, s;
+      !e.enabled || ((t = o.behindModeStore) == null || t.css3DScene.add(e.css3DObject), (s = o.behindModeStore) == null || s.scene.add(e.opacityMesh));
     });
   }
   handleDisable() {
     Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
-      var s;
-      (s = o.frontModeStore) == null || s.css3DScene.remove(e.css3DObject);
+      var t;
+      (t = o.frontModeStore) == null || t.css3DScene.remove(e.css3DObject);
     }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
-      var s, t;
-      (s = o.behindModeStore) == null || s.css3DScene.remove(e.css3DObject), (t = o.behindModeStore) == null || t.scene.remove(e.opacityMesh);
+      var t, s;
+      (t = o.behindModeStore) == null || t.css3DScene.remove(e.css3DObject), (s = o.behindModeStore) == null || s.scene.remove(e.opacityMesh);
     });
   }
 }
 export {
-  te as CSS3DRender,
-  ee as MinRatio,
-  D as PLUGIN,
-  Z as __ELEMENT__,
+  ae as CSS3DRender,
+  fe as MinRatio,
+  m as PLUGIN,
+  ce as __ELEMENT__,
   o as globalStore
 };

package/libs/CSS3DRenderPlugin/Controller.d.ts

@@ -22,6 +22,7 @@ export interface Create3DDomContainerParamsType {
 }
 export default class Controller extends CSS3DRender implements BasePlugin.Controller<CSS3DRenderState, CSS3DRenderEventMap> {
     five: Five;
+    behindFiveContainer?: HTMLElement;
     readonly staticPrefix: string;
     constructor(five: Five);
     /** @deprecated disposeAll() renamed as dispose() */
@@ -76,4 +77,5 @@ export default class Controller extends CSS3DRender implements BasePlugin.Contro
         setEnabled: (enabled: boolean) => void;
         appendToElement: (container: Element) => void;
     };
+    private getBehindFiveElement;
 }

package/libs/CSS3DRenderPlugin/Controller.js

@@ -1,7 +1,7 @@
-var h = Object.defineProperty;
-var R = (i, r, t) => r in i ? h(i, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[r] = t;
-var n = (i, r, t) => (R(i, typeof r != "symbol" ? r + "" : r, t), t);
-import { CSS3DRender as E } from "./CSS3DRender.js";
+var b = Object.defineProperty;
+var E = (r, n, t) => n in r ? b(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var l = (r, n, t) => (E(r, typeof n != "symbol" ? n + "" : n, t), t);
+import { CSS3DRender as R } from "./CSS3DRender.js";
 import "three";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "../shared-utils/Subscribe.js";
@@ -9,40 +9,43 @@ import "./utils/evenNumber.js";
 import "./utils/positionToVector3.js";
 import "./utils/CSS3DObjectPlus.js";
 import "./utils/centerPoint.js";
-const S = "v2.0.1", c = `CSS3DRenderPlugin@${S}`;
-class A extends E {
+const C = "v2.0.1", f = `CSS3DRenderPlugin@${C}`;
+class N extends R {
   constructor(t) {
     super();
-    n(this, "five");
-    n(this, "staticPrefix", "//vrlab-static.ljcdn.com");
-    n(this, "create3DDomContainer", (t, e) => {
+    l(this, "five");
+    l(this, "behindFiveContainer");
+    l(this, "staticPrefix", "//vrlab-static.ljcdn.com");
+    l(this, "create3DDomContainer", (t, e) => {
       if (this.state.disposed)
         return;
-      const d = (() => {
+      const i = (() => {
         var v;
-        (e == null ? void 0 : e.dpr) !== void 0 && console.warn(`${c}: please use "config.devicePixelRatio" replace "config.dpr"`);
-        const o = {
+        (e == null ? void 0 : e.dpr) !== void 0 && console.warn(`${f}: please use "config.devicePixelRatio" replace "config.dpr"`);
+        const a = {
           ratio: 216e-5,
           devicePixelRatio: (v = e == null ? void 0 : e.dpr) != null ? v : 1,
           mode: "front",
           autoRender: !0
         };
-        return Object.assign(o, e, (e == null ? void 0 : e.mode) === "behind" ? { scene: this.five.scene } : void 0);
-      })(), a = this.five.getElement();
-      if (!a) {
-        console.error(`${c}: five.getElement() is ${a}`);
+        return Object.assign(a, e, (e == null ? void 0 : e.mode) === "behind" ? { scene: this.five.scene } : void 0);
+      })(), o = this.five.getElement();
+      if (!o) {
+        console.error(`${f}: five.getElement() is ${o}`);
         return;
       }
-      const { autoRender: p, mode: s } = d, f = s === "front" ? a.parentElement : d.behindFiveContainer;
-      this.appendToElement(f || document.body, s);
-      const l = this.create3DElement(this.five.camera, t, { ...d, autoRender: !1 });
-      if (!l)
+      const { autoRender: d, mode: s } = i, c = s === "front" ? o.parentElement : i.behindFiveContainer;
+      this.setContainer(c || document.body, "front");
+      const p = this.getBehindFiveElement();
+      p && this.setContainer(p, "behind"), this.appendToElement(c || document.body, s);
+      const m = this.create3DElement(this.five.camera, t, { ...i, autoRender: !1 });
+      if (!m)
         return;
-      const m = l.render, u = () => {
-        var o;
-        s === "front" && m(), s === "behind" && ((o = this.five.model) != null && o.loaded ? m() : this.five.once("modelLoaded", () => m()));
+      const u = m.render, h = () => {
+        var a;
+        s === "front" && u(), s === "behind" && ((a = this.five.model) != null && a.loaded ? u() : this.five.once("modelLoaded", () => u()));
       };
-      return p && u(), { ...l, render: p ? void 0 : u };
+      return d && h(), { ...m, render: d ? void 0 : h };
     });
     this.five = t;
   }
@@ -53,8 +56,26 @@ class A extends E {
     const e = super.setState(...t);
     return this.five.needsRender = !0, e;
   }
+  getBehindFiveElement() {
+    var s;
+    const { behindFiveContainer: t } = this;
+    if (t)
+      return t;
+    const e = document.createElement("div");
+    e.style.position = "absolute", e.style.pointerEvents = "none", e.style.top = "0", e.style.left = "0", e.style.width = "100%", e.style.height = "100%", this.behindFiveContainer = e;
+    const i = this.five.getElement();
+    if (!i)
+      return;
+    const o = (s = i == null ? void 0 : i.style.position) != null ? s : 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(e, i), e;
+  }
 }
 export {
-  c as PLUGIN_NAME,
-  A as default
+  f as PLUGIN_NAME,
+  N as default
 };

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

@@ -1,16 +1,34 @@
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import { Vector3 } from 'three';
+import { Matrix4, Quaternion, Vector3 } from 'three';
+import { Subscribe } from '../../shared-utils/Subscribe';
+import type * as THREE from 'three';
 export declare const MinRatio = 0.00216;
 export declare const DefaultRatio = 0.003;
-export declare class CSS3DObjectPlus<T extends HTMLElement> extends CSS3DObject {
+export declare type Mode = 'front' | 'behind';
+export declare type CornerPoints = [Vector3, Vector3, Vector3, Vector3];
+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;
     width: number;
     height: number;
     domWidthPx: number;
     domHeightPx: number;
-    cornerPoints: [Vector3, Vector3, Vector3, Vector3];
+    cornerPoints: CornerPoints;
     ratio: number;
     container: T;
     centerPosition: Vector3;
-    constructor(container: T, cornerPoints: [Vector3, Vector3, Vector3, Vector3], ratio?: number, dpr?: 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;
+    applyMatrix4(matrix: Matrix4): void;
+    applyQuaternion(quaternion: Quaternion): this;
 }