@realsee/dnalogel 3.81.13 → 4.0.0-webgpu.3

package/dist/internal/CSS3DRender-BKWjq-Mo.js

@@ -0,0 +1,297 @@
+import { t as e } from "./Subscribe-DLlAl88n.js";
+import { i as t, o as n, t as r } from "./CSS3DObject-C9ck81UX.js";
+import { i, t as a } from "./util-vGeVT4oo.js";
+import * as o from "three/webgpu";
+//#region src/CSS3DRenderPlugin/utils/getAllCSS3DObject.ts
+function s(e) {
+	let t = [];
+	return a(e).forEach((e) => {
+		e.traverse((e) => {
+			(e.isCSS3DObjectPlus || e.isCSS3DObject || e.isCSS3DSprite) && t.push(e);
+		});
+	}), t;
+}
+//#endregion
+//#region src/CSS3DRenderPlugin/utils/three/CSS3DScene.ts
+var c = class extends o.Scene {
+	constructor() {
+		super();
+	}
+	add(...e) {
+		return super.add(...e), s(e).forEach((e) => {
+			e.mode = "front";
+		}), this;
+	}
+}, l = class extends o.Scene {
+	scene;
+	constructor(e) {
+		if (super(), !e) throw Error("CSS3DBehindScene: scene is required");
+		this.scene = e;
+	}
+	add(...e) {
+		return super.add(...e), s(e).forEach((e) => {
+			e.mode = "behind", this.scene.add(e.getOpacityMesh());
+		}), this;
+	}
+	remove(...e) {
+		return s(e).forEach((e) => {
+			e.opacityMesh?.removeFromParent(), e.opacityMesh = null;
+		}), super.remove(...e), this;
+	}
+}, u = class extends o.Group {
+	isCSS3DGroup = !0;
+	mode;
+	CSS3DObjectLength = 0;
+	constructor(e) {
+		super(), this.mode = e;
+	}
+	add(...e) {
+		return s(e).forEach((e) => {
+			e.mode = this.mode;
+		}), super.add(...e), this.updateLength(), this;
+	}
+	setVisible(e) {
+		this.visible = e, this.traverse((e) => {
+			e.isCSS3DObjectPlus && e.updateVisible();
+		});
+	}
+	remove(...e) {
+		return super.remove(...e), this.updateLength(), this;
+	}
+	updateLength() {
+		this.CSS3DObjectLength = s(this).length;
+	}
+}, d = class extends u {
+	constructor() {
+		super("front");
+	}
+}, f = class extends u {
+	scene;
+	constructor(e) {
+		if (super("behind"), !e) throw Error("CSS3DBehindScene: scene is required");
+		this.scene = e;
+	}
+	add(...e) {
+		return s(e).forEach((e) => {
+			this.scene.add(e.getOpacityMesh());
+		}), super.add(...e), this;
+	}
+}, p = 3, m = "CSS3DRenderer", h = `${m}@${p}`, g = () => {
+	console.error(`${h} is disposed`);
+}, _ = {
+	css3DObjects: [],
+	frontModeStore: {},
+	behindModeStore: {}
+};
+function v(e) {
+	return _.css3DObjects.find((t) => t.id === e);
+}
+function y() {
+	return _.frontModeStore.css3DRenderer ??= new t();
+}
+function b() {
+	return _.behindModeStore.css3DRenderer ??= new t();
+}
+function x(e) {
+	y().setWrapper(e);
+}
+function S(e) {
+	b().setWrapper(e);
+}
+var C = class {
+	static setFrontModeContainer = x;
+	static setBehindModeContainer = S;
+	hooks = new e();
+	state = {
+		enabled: !0,
+		visible: !0,
+		disposed: !1
+	};
+	get scene() {
+		return this._scene || console.error("scene doesn't exist!, please call setScene(scene) first"), this._scene;
+	}
+	_scene;
+	store = { frontModeGroup: new d() };
+	static get frontModeCSS3DRenderer() {
+		return y();
+	}
+	static get behindModeCSS3DRenderer() {
+		return b();
+	}
+	get frontModeCSS3DRenderer() {
+		return y();
+	}
+	get behindModeCSS3DRenderer() {
+		return b();
+	}
+	constructor(e) {
+		e && this.setScene(e);
+	}
+	setScene(e) {
+		this._scene = e;
+	}
+	getCurrentState() {
+		return this.state;
+	}
+	setState(e, t = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		let n = { ...this.state };
+		this.state = Object.assign(this.state, e), n.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), n.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), n.disposed !== this.state.disposed && this.handleDispose(), this.hooks.emit("stateChange", {
+			state: this.state,
+			prevState: n,
+			userAction: t.userAction
+		});
+	}
+	dispose() {
+		this.setState({ disposed: !0 }), this.hooks.emit("dispose");
+	}
+	async show({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
+	}
+	async hide({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ visible: !1 }, { userAction: e }), this.hooks.emit("hide", { userAction: e });
+	}
+	enable({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ enabled: !0 }, { userAction: e }), this.hooks.emit("enable", { userAction: e });
+	}
+	disable({ userAction: e } = { userAction: !0 }) {
+		if (this.state.disposed) return g();
+		this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
+	}
+	create3DElement = (e, t, n) => {
+		if (this.state.disposed) return g();
+		let r = (() => {
+			let e = {
+				ratio: .00216,
+				devicePixelRatio: 1,
+				mode: "front",
+				autoRender: !0,
+				container: document.createElement("div"),
+				pointerEvents: "none",
+				wrapperStyle: {}
+			};
+			return Object.assign(e, n);
+		})(), a = t.map(i);
+		if (a?.length < 4) return console.error(`${h}: requires 4 point but params may have fewer`);
+		let { ratio: o, devicePixelRatio: s, mode: c, autoRender: l, container: u, pointerEvents: d, wrapperStyle: f } = r, p = !1, m = this.createObject(a, {
+			ratio: o,
+			dpr: s,
+			container: u,
+			mode: c,
+			pointerEvents: d,
+			wrapperStyle: f
+		});
+		_.css3DObjects.push(m), r.scene && this.setScene(r.scene);
+		let v = () => {
+			if (p) return;
+			let e = m.mode === "front" ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup();
+			e && e.add(m);
+		}, x = () => {
+			p || (v(), this.render(e), this.hooks.emit("render"));
+		}, S = (e) => this.setVisibleById(m.id, e), C = (e) => this.setEnabledById(m.id, e), w = () => (p = !0, m.removeFromParent(), !0), T = c === "front" ? y() : b();
+		return l && x(), {
+			id: m.uuid,
+			container: u,
+			css3DObject: m,
+			render: l ? void 0 : x,
+			show: () => S(!0),
+			hide: () => S(!1),
+			setVisible: S,
+			enable: () => C(!0),
+			disable: () => C(!1),
+			setEnabled: C,
+			dispose: w,
+			appendToElement: (e) => T.setWrapper(e)
+		};
+	};
+	getFrontCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
+		let t = _.frontModeStore?.css3DScene;
+		if (t) return t;
+		if (e) {
+			let e = new c();
+			_.frontModeStore.css3DScene = e;
+		}
+		return _.frontModeStore.css3DScene;
+	}
+	getBehindCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
+		let t = _.behindModeStore?.css3DScene;
+		if (t) return t;
+		if (e) {
+			let e = _.behindModeStore.scene ?? this.scene;
+			if (!e) {
+				console.error(`${h}: scene is required when mode is behind`);
+				return;
+			}
+			let t = new l(e);
+			_.behindModeStore.css3DScene = t, _.behindModeStore.scene = e;
+		}
+		return _.behindModeStore.css3DScene;
+	}
+	getFrontCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
+		let t = this.getFrontCSS3DScene({ createSceneIfNotExists: e });
+		return e && t && (t.getObjectById(this.store.frontModeGroup.id) || t.add(this.store.frontModeGroup)), this.store.frontModeGroup;
+	}
+	getBehindCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
+		let t = this.getBehindCSS3DScene({ createSceneIfNotExists: e });
+		if (e && t && this.scene) {
+			let e = this.store.behindModeGroup ?? new f(this.scene);
+			this.store.behindModeGroup = e, t.getObjectById(e.id) || t.add(e);
+		}
+		return this.store.behindModeGroup;
+	}
+	setVisibleById = (e, t) => {
+		v(e)?.setVisible(t);
+	};
+	setEnabledById = (e, t) => {
+		let n = v(e);
+		if (!n) return;
+		let r = n.mode === "front" ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }) : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 });
+		r && (t ? r.add(n) : r.remove(n));
+	};
+	render(e) {
+		if (this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }).CSS3DObjectLength > 0) {
+			let t = this.getFrontCSS3DScene({ createSceneIfNotExists: !0 });
+			if (!t) return console.error(`${h}: css3DScene is required when mode is front`);
+			y().renderEveryFrame(t, e);
+		}
+		if ((this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 })?.CSS3DObjectLength ?? 0) > 0) {
+			let t = this.getBehindCSS3DScene({ createSceneIfNotExists: !0 });
+			if (!t) return console.error(`${h}: css3DScene is required when mode is behind`);
+			b().renderEveryFrame(t, e);
+		}
+	}
+	createObject = (e, t) => {
+		let n = new r({
+			cornerPoints: e,
+			...t,
+			style: t.wrapperStyle
+		});
+		return n.element.classList.add(`${m}__container`), n.element.id = `${m}__container--${n.uuid}`, n;
+	};
+	async handleShow() {
+		this.store.frontModeGroup.setVisible(!0), this.store.behindModeGroup?.setVisible(!0);
+	}
+	async handleHide() {
+		this.store.frontModeGroup.setVisible(!1), this.store.behindModeGroup?.setVisible(!1);
+	}
+	handleEnable() {
+		this.getFrontCSS3DScene()?.add(this.store.frontModeGroup), this.store.behindModeGroup && this.getBehindCSS3DScene()?.add(this.store.behindModeGroup);
+	}
+	handleDisable() {
+		this.store.frontModeGroup.children.forEach((e) => {
+			e instanceof n && e.element instanceof Element && e.element.parentNode !== null && e.element.remove();
+		}), this.store.behindModeGroup?.children.forEach((e) => {
+			e instanceof n && e.element instanceof Element && e.element.parentNode !== null && e.element.remove();
+		}), this.getFrontCSS3DScene()?.remove(this.store.frontModeGroup), this.store.behindModeGroup && this.getBehindCSS3DScene()?.remove(this.store.behindModeGroup);
+	}
+	handleDispose() {
+		this.handleDisable();
+	}
+};
+//#endregion
+export { C as t };
+
+//# sourceMappingURL=CSS3DRender-BKWjq-Mo.js.map

package/dist/internal/CSS3DRender-BKWjq-Mo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS3DRender-BKWjq-Mo.js","names":["CSS3DRenderer","Subscribe","ICSS3DRenderer","CSS3DObject","CSS3DObjectPlus","toArray","THREE","getAllCSS3DObject","css3DObjectPlus","object","CSS3DFrontScene","objects","CSS3DBehindScene","scene","CSS3DGroup","mode","visible","CSS3DFrontGroup","CSS3DBehindGroup","VERSION","PLUGIN_NAME","PLUGIN","disposedErrorLog","globalStore","getCSS3DObjectById","c","id","getFrontModeRenderer","getBehindModeRenderer","setFrontModeContainer","container","setBehindModeContainer","CSS3DRender","prevState","state","options","config","defaultConfig","params","vector3Points","points","anyPositionToVector3","dpr","disposed","css3DObject","renderCSS3DObject","group","render","camera","setVisible","setEnabled","enabled","dispose","css3DRenderer","autoRender","element","css3DScene","createSceneIfNotExists","css3DFrontScene","s","css3DBehindScene","addGroupIfNotExists","behindModeGroup"],"sources":["../../src/CSS3DRenderPlugin/utils/getAllCSS3DObject.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DScene.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DGroup.ts","../../src/CSS3DRenderPlugin/utils/three/CSS3DRender.ts"],"sourcesContent":["import type { Object3D } from 'three/webgpu'\nimport type { CSS3DObjectPlus } from './three/CSS3DObject'\nimport { toArray } from '../../shared-utils/util'\n\nexport default function getAllCSS3DObject(object: Object3D[] | Object3D) {\n  const css3DObjectPlus: CSS3DObjectPlus[] = []\n  const objects = toArray(object)\n  objects.forEach((object) => {\n    object.traverse((object) => {\n      if ((object as any).isCSS3DObjectPlus || (object as any).isCSS3DObject || (object as any).isCSS3DSprite) {\n        css3DObjectPlus.push(object as CSS3DObjectPlus)\n      }\n    })\n  })\n  return css3DObjectPlus\n}\n","import type { Object3D } from 'three/webgpu'\nimport * as THREE from 'three/webgpu'\nimport getAllCSS3DObject from '../getAllCSS3DObject'\n\nexport class CSS3DFrontScene extends THREE.Scene {\n  public constructor() {\n    super()\n  }\n  public add(...objects: Object3D[]) {\n    super.add(...objects)\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = 'front'\n    })\n    return this\n  }\n}\n\nexport class CSS3DBehindScene extends THREE.Scene {\n  private scene: THREE.Scene\n\n  public constructor(scene: THREE.Scene) {\n    super()\n    if (!scene) throw new Error('CSS3DBehindScene: scene is required')\n    this.scene = scene\n  }\n\n  public add(...objects: Object3D[]) {\n    super.add(...objects)\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = 'behind'\n      this.scene.add(css3DObjectPlus.getOpacityMesh())\n    })\n    return this\n  }\n\n  public remove(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.opacityMesh?.removeFromParent()\n      css3DObjectPlus.opacityMesh = null\n    })\n    super.remove(...objects)\n    return this\n  }\n}\n","import * as THREE from 'three/webgpu'\nimport type { Object3D } from 'three/webgpu'\nimport getAllCSS3DObject from '../getAllCSS3DObject'\nimport type { CSS3DObjectPlus, Mode } from './CSS3DObject'\n\nexport class CSS3DGroup extends THREE.Group {\n  public readonly isCSS3DGroup = true\n\n  public mode: Mode\n\n  public CSS3DObjectLength = 0\n\n  public constructor(mode: Mode) {\n    super()\n    this.mode = mode\n  }\n\n  public add(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      css3DObjectPlus.mode = this.mode\n    })\n    super.add(...objects)\n    this.updateLength()\n    return this\n  }\n\n  public setVisible(visible: boolean) {\n    this.visible = visible\n    this.traverse((object) => {\n      if ((object as any).isCSS3DObjectPlus) {\n        ;(object as CSS3DObjectPlus).updateVisible()\n      }\n    })\n  }\n\n  public remove(...objects: Object3D[]) {\n    super.remove(...objects)\n    this.updateLength()\n    return this\n  }\n\n  private updateLength() {\n    this.CSS3DObjectLength = getAllCSS3DObject(this).length\n  }\n}\n\nexport class CSS3DFrontGroup extends CSS3DGroup {\n  public constructor() {\n    super('front')\n  }\n}\n\nexport class CSS3DBehindGroup extends CSS3DGroup {\n  private scene: THREE.Scene\n\n  public constructor(scene: THREE.Scene) {\n    super('behind')\n    if (!scene) throw new Error('CSS3DBehindScene: scene is required')\n    this.scene = scene\n  }\n\n  public add(...objects: Object3D[]) {\n    getAllCSS3DObject(objects).forEach((css3DObjectPlus) => {\n      this.scene.add(css3DObjectPlus.getOpacityMesh())\n    })\n    super.add(...objects)\n    return this\n  }\n}\n","import type * as THREE from 'three/webgpu'\nimport type { Vector3 } from 'three/webgpu'\nimport { anyPositionToVector3, type AnyPosition } from '../../../shared-utils/positionToVector3'\nimport { ICSS3DRenderer as CSS3DRenderer } from './CSS3DRenderer'\nimport type { Merge } from 'type-fest'\nimport { Subscribe } from '../../../shared-utils/Subscribe'\nimport { CSS3DObjectPlus } from './CSS3DObject'\nimport { CSS3DBehindScene, CSS3DFrontScene } from './CSS3DScene'\nimport { CSS3DBehindGroup, CSS3DFrontGroup } from './CSS3DGroup'\nimport { CSS3DObject } from '../../../shared-utils/three/CSS3DRenderer'\n\n/**\n * @changelog\n *  - v3: 重构\n */\nconst VERSION = 3\n\nconst PLUGIN_NAME = 'CSS3DRenderer'\n\nexport const PLUGIN = `${PLUGIN_NAME}@${VERSION}`\n\nconst disposedErrorLog = () => {\n  console.error(`${PLUGIN} is disposed`)\n}\n\nexport interface CSS3DRenderState {\n  enabled: boolean\n  visible: boolean\n  disposed: boolean\n}\n\n\nexport type CSS3DRenderEventMap = {\n  show: (options?: { userAction?: boolean }) => void\n  hide: (options?: { userAction?: boolean }) => void\n  enable: (options?: { userAction?: boolean }) => void\n  disable: (options?: { userAction?: boolean }) => void\n  render: () => void\n  dispose: () => void\n  /**\n   * 插件状态变化\n   * @param params.state      最新的State\n   * @param params.prevState  上一个State\n   * @param params.userAction 是否是用户触发\n   */\n  stateChange: (params: { state: CSS3DRenderState; prevState?: CSS3DRenderState; userAction: boolean }) => void\n}\n\nexport interface Create3DDElementParamsType {\n  points: AnyPosition[]\n  config?: {\n    ratio?: number\n    devicePixelRatio?: number\n    autoRender?: boolean\n    container?: HTMLElement\n    pointerEvents?: 'none' | 'auto'\n    wrapperStyle?: Partial<CSSStyleDeclaration>\n    scene?: THREE.Scene\n  } & ({ mode?: 'front' } | { mode: 'behind'; scene: THREE.Scene })\n}\n\nexport const globalStore: {\n  frontModeResizeObserver?: {\n    observe: () => void\n    unobserve: () => void\n  }\n  behindModeResizeObserver?: {\n    observe: () => void\n    unobserve: () => void\n  }\n  css3DObjects: CSS3DObjectPlus[]\n  frontModeStore: {\n    css3DScene?: CSS3DFrontScene\n    css3DRenderer?: CSS3DRenderer\n    container?: HTMLElement\n  }\n  behindModeStore: {\n    css3DScene?: CSS3DBehindScene\n    css3DRenderer?: CSS3DRenderer\n    container?: HTMLElement\n    scene?: THREE.Scene\n    camera?: THREE.Camera\n  }\n} = {\n  css3DObjects: [],\n  frontModeStore: {},\n  behindModeStore: {},\n}\n\nfunction getCSS3DObjectById(id: number) {\n  return globalStore.css3DObjects.find((c) => c.id === id)\n}\n\nfunction getFrontModeRenderer() {\n  return (globalStore.frontModeStore.css3DRenderer ??= new CSS3DRenderer())\n}\n\nfunction getBehindModeRenderer() {\n  return (globalStore.behindModeStore.css3DRenderer ??= new CSS3DRenderer())\n}\n\nfunction setFrontModeContainer(container: HTMLElement) {\n  getFrontModeRenderer().setWrapper(container)\n}\nfunction setBehindModeContainer(container: HTMLElement) {\n  getBehindModeRenderer().setWrapper(container)\n}\n\nexport class CSS3DRender {\n  public static setFrontModeContainer = setFrontModeContainer\n\n  public static setBehindModeContainer = setBehindModeContainer\n\n  public hooks: Subscribe<CSS3DRenderEventMap> = new Subscribe()\n\n  public state: CSS3DRenderState = {\n    enabled: true,\n    visible: true,\n    disposed: false,\n  }\n\n  public get scene() {\n    if (!this._scene) console.error(\"scene doesn't exist!, please call setScene(scene) first\")\n    return this._scene\n  }\n\n  private _scene?: THREE.Scene\n\n  private store: {\n    frontModeGroup: CSS3DFrontGroup\n    behindModeGroup?: CSS3DBehindGroup\n  } = {\n    frontModeGroup: new CSS3DFrontGroup(),\n  }\n\n  public static get frontModeCSS3DRenderer() {\n    return getFrontModeRenderer()\n  }\n\n  public static get behindModeCSS3DRenderer() {\n    return getBehindModeRenderer()\n  }\n\n  public get frontModeCSS3DRenderer() {\n    return getFrontModeRenderer()\n  }\n\n  public get behindModeCSS3DRenderer() {\n    return getBehindModeRenderer()\n  }\n\n\n  public constructor(scene?: THREE.Scene) {\n    if (scene) this.setScene(scene)\n  }\n\n  public setScene(scene: THREE.Scene) {\n    this._scene = scene\n  }\n\n  public getCurrentState() {\n    return this.state\n  }\n\n  public setState(state: Partial<CSS3DRenderState>, options: { userAction: boolean } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    const prevState = { ...this.state }\n    this.state = Object.assign(this.state, state)\n    if (prevState.visible !== this.state.visible) {\n      state.visible ? this.handleShow() : this.handleHide()\n    }\n    if (prevState.enabled !== this.state.enabled) {\n      state.enabled ? this.handleEnable() : this.handleDisable()\n    }\n    if (prevState.disposed !== this.state.disposed) {\n      this.handleDispose()\n    }\n    this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction })\n  }\n\n  public dispose() {\n    this.setState({ disposed: true })\n    this.hooks.emit('dispose')\n  }\n\n  public async show({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ visible: true }, { userAction })\n    this.hooks.emit('show', { userAction })\n  }\n\n  public async hide({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ visible: false }, { userAction })\n    this.hooks.emit('hide', { userAction })\n  }\n\n  public enable({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ enabled: true }, { userAction })\n    this.hooks.emit('enable', { userAction })\n  }\n\n  public disable({ userAction } = { userAction: true }) {\n    if (this.state.disposed) return disposedErrorLog()\n    this.setState({ enabled: false }, { userAction })\n    this.hooks.emit('disable', { userAction })\n  }\n\n  /**\n   * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中\n   * @param { Vector3Position[] } points 矩形四个点坐标\n   * @param params 均为可选值\n   * @config_document `params` 均为可选值\n   *  | key                   | type                       | defaultValue        | comment |\n   *  | -                     | -                          | -                   | -       |\n   *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |\n   *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |\n   *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`\n   *  | `pointerEvents`       | *`'none'\\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |\n   *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |\n   *  | `mode`                | *`'front'\\|'behind'`*      | `front`             | 两种模式:|\n   *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |\n   *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |\n   *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |\n   *\n   * @return\n   * ```typescript\n   *    {\n   *      id: string,                             // id\n   *      container: HTMLDIVElement               // dom容器\n   *      dispose: () => void                     // 销毁\n   *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例\n   *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined\n   *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)\n   *      show: () => void                        // 同 setVisible(true)\n   *      hide: () => void                        // 同 setVisible(false)\n   *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)\n   *      enable: () => void                      // 同 setEnabled(true)\n   *      disable: () => void                     // 同 setEnabled(false)\n   *    } | void\n   * ```\n   */\n  public create3DElement = (\n    camera: THREE.Camera,\n    points: Create3DDElementParamsType['points'],\n    params?: Create3DDElementParamsType['config'],\n  ) => {\n    if (this.state.disposed) return disposedErrorLog()\n    // ==== init ====\n    const config = (() => {\n      const defaultConfig = {\n        ratio: 0.00216,\n        devicePixelRatio: 1,\n        mode: 'front',\n        autoRender: true,\n        container: document.createElement('div'),\n        pointerEvents: 'none',\n        wrapperStyle: {},\n      }\n      return Object.assign(defaultConfig, params) as Merge<typeof defaultConfig, typeof params>\n    })()\n\n    const vector3Points = points.map(anyPositionToVector3) as [Vector3, Vector3, Vector3, Vector3]\n    if (vector3Points?.length < 4) return console.error(`${PLUGIN}: requires 4 point but params may have fewer`)\n\n    const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents, wrapperStyle } = config\n    // ==== init END ====\n\n    let disposed = false\n    const css3DObject = this.createObject(vector3Points, { ratio, dpr, container, mode, pointerEvents, wrapperStyle })\n\n    globalStore.css3DObjects.push(css3DObject)\n\n    if (config.scene) this.setScene(config.scene)\n\n    const renderCSS3DObject = () => {\n      if (disposed) return\n      const group = css3DObject.mode === 'front' ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup()\n      if (!group) return\n      group.add(css3DObject)\n    }\n\n    const render = () => {\n      if (disposed) return\n      renderCSS3DObject()\n      this.render(camera)\n      this.hooks.emit('render')\n    }\n\n    const setVisible = (visible: boolean) => this.setVisibleById(css3DObject.id, visible)\n    const setEnabled = (enabled: boolean) => this.setEnabledById(css3DObject.id, enabled)\n    const dispose = () => {\n      disposed = true\n      css3DObject.removeFromParent()\n      return true\n    }\n\n    const css3DRenderer = mode === 'front' ? getFrontModeRenderer() : getBehindModeRenderer()\n\n    if (autoRender) render()\n\n    return {\n      id: css3DObject.uuid,\n      container,\n      css3DObject,\n      render: autoRender ? undefined : render,\n      show: () => setVisible(true),\n      hide: () => setVisible(false),\n      setVisible,\n      enable: () => setEnabled(true),\n      disable: () => setEnabled(false),\n      setEnabled,\n      dispose,\n      appendToElement: (element: Element) => css3DRenderer.setWrapper(element),\n    }\n  }\n\n  public getFrontCSS3DScene({ createSceneIfNotExists = false } = {}) {\n    const css3DScene = globalStore.frontModeStore?.css3DScene\n    if (css3DScene) return css3DScene\n    else {\n      // not exists\n      if (createSceneIfNotExists) {\n        const css3DFrontScene = new CSS3DFrontScene()\n        globalStore.frontModeStore.css3DScene = css3DFrontScene\n      }\n      return globalStore.frontModeStore.css3DScene\n    }\n  }\n\n  public getBehindCSS3DScene({ createSceneIfNotExists = false } = {}) {\n    const css3DScene = globalStore.behindModeStore?.css3DScene\n    if (css3DScene) return css3DScene\n    else {\n      // not exists\n      if (createSceneIfNotExists) {\n        const s = globalStore.behindModeStore.scene ?? this.scene\n        if (!s) {\n          console.error(`${PLUGIN}: scene is required when mode is behind`)\n          return\n        }\n        const css3DBehindScene = new CSS3DBehindScene(s)\n        globalStore.behindModeStore.css3DScene = css3DBehindScene\n        globalStore.behindModeStore.scene = s\n      }\n      return globalStore.behindModeStore.css3DScene\n    }\n  }\n\n  public getFrontCSS3DObjectGroup({ addGroupIfNotExists = true } = {}) {\n    const css3DScene = this.getFrontCSS3DScene({ createSceneIfNotExists: addGroupIfNotExists })\n    if (addGroupIfNotExists && css3DScene) {\n      if (!css3DScene.getObjectById(this.store.frontModeGroup.id)) {\n        css3DScene.add(this.store.frontModeGroup)\n      }\n    }\n    return this.store.frontModeGroup\n  }\n\n  public getBehindCSS3DObjectGroup({ addGroupIfNotExists = true } = {}) {\n    const css3DScene = this.getBehindCSS3DScene({ createSceneIfNotExists: addGroupIfNotExists })\n    if (addGroupIfNotExists && css3DScene && this.scene) {\n      const behindModeGroup = this.store.behindModeGroup ?? new CSS3DBehindGroup(this.scene)\n      this.store.behindModeGroup = behindModeGroup\n      if (!css3DScene.getObjectById(behindModeGroup.id)) css3DScene.add(behindModeGroup)\n    }\n    return this.store.behindModeGroup\n  }\n\n  public setVisibleById = (id: number, visible: boolean) => {\n    getCSS3DObjectById(id)?.setVisible(visible)\n  }\n\n  public setEnabledById = (id: number, enabled: boolean) => {\n    const css3DObject = getCSS3DObjectById(id)\n    if (!css3DObject) return\n    const group =\n      css3DObject.mode === 'front'\n        ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: false })\n        : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: false })\n    if (!group) return\n    if (enabled) {\n      group.add(css3DObject)\n    } else {\n      group.remove(css3DObject)\n    }\n  }\n\n  public render(camera: THREE.Camera) {\n    if (this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: false }).CSS3DObjectLength > 0) {\n      const css3DScene = this.getFrontCSS3DScene({ createSceneIfNotExists: true })\n      if (!css3DScene) return console.error(`${PLUGIN}: css3DScene is required when mode is front`)\n      getFrontModeRenderer().renderEveryFrame(css3DScene, camera)\n    }\n    if ((this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: false })?.CSS3DObjectLength ?? 0) > 0) {\n      const css3DScene = this.getBehindCSS3DScene({ createSceneIfNotExists: true })\n      if (!css3DScene) return console.error(`${PLUGIN}: css3DScene is required when mode is behind`)\n      getBehindModeRenderer().renderEveryFrame(css3DScene, camera)\n    }\n  }\n\n  private createObject = (\n    points: [Vector3, Vector3, Vector3, Vector3],\n    config: {\n      ratio: number\n      dpr: number\n      container: HTMLElement\n      pointerEvents: 'none' | 'auto'\n      mode: 'front' | 'behind'\n      wrapperStyle: Partial<CSSStyleDeclaration>\n    },\n  ) => {\n    const css3DObject = new CSS3DObjectPlus({ cornerPoints: points, ...config, style: config.wrapperStyle })\n    css3DObject.element.classList.add(`${PLUGIN_NAME}__container`)\n    css3DObject.element.id = `${PLUGIN_NAME}__container--${css3DObject.uuid}`\n    return css3DObject\n  }\n\n  private async handleShow() {\n    this.store.frontModeGroup.setVisible(true)\n    this.store.behindModeGroup?.setVisible(true)\n  }\n\n  private async handleHide() {\n    this.store.frontModeGroup.setVisible(false)\n    this.store.behindModeGroup?.setVisible(false)\n  }\n\n  private handleEnable() {\n    this.getFrontCSS3DScene()?.add(this.store.frontModeGroup)\n    if (this.store.behindModeGroup) this.getBehindCSS3DScene()?.add(this.store.behindModeGroup)\n  }\n\n  private handleDisable() {\n    this.store.frontModeGroup.children.forEach((object) => {\n      if (object instanceof CSS3DObject && object.element instanceof Element && object.element.parentNode !== null) {\n        object.element.remove()\n      }\n    })\n    this.store.behindModeGroup?.children.forEach((object) => {\n      if (object instanceof CSS3DObject && object.element instanceof Element && object.element.parentNode !== null) {\n        object.element.remove()\n      }\n    })\n    this.getFrontCSS3DScene()?.remove(this.store.frontModeGroup)\n    if (this.store.behindModeGroup) this.getBehindCSS3DScene()?.remove(this.store.behindModeGroup)\n  }\n\n  private handleDispose() {\n    this.handleDisable()\n  }\n}\n"],"mappings":";;;;;AAIA,SAAwBO,EAAkB,GAA+B;CACvE,IAAMC,IAAqC,CAAC;CAS5C,OAPAH,EADwBI,CACxB,CAAA,CAAQ,SAAS,MAAW;EAC1B,EAAO,UAAU,MAAW;GAC1B,CAAKA,EAAe,qBAAsBA,EAAe,iBAAkBA,EAAe,kBACxFD,EAAgB,KAAKC,CAAyB;EAElD,CAAC;CACH,CAAC,GACMD;AACT;;;ACXA,IAAaE,IAAb,cAAqCJ,EAAM,MAAM;CAC/C,cAAqB;EACnB,MAAM;CACR;CACA,IAAW,GAAGK,GAAqB;EAKjC,OAJA,MAAM,IAAI,GAAGA,CAAO,GACpBJ,EAAkBI,CAAO,CAAC,CAAC,SAAS,MAAoB;GACtD,EAAgB,OAAO;EACzB,CAAC,GACM;CACT;AACF,GAEaC,IAAb,cAAsCN,EAAM,MAAM;CAChD;CAEA,YAAmB,GAAoB;EAErC,IADA,MAAM,GACF,CAACO,GAAO,MAAU,MAAM,qCAAqC;EACjE,KAAK,QAAQA;CACf;CAEA,IAAW,GAAGF,GAAqB;EAMjC,OALA,MAAM,IAAI,GAAGA,CAAO,GACpBJ,EAAkBI,CAAO,CAAC,CAAC,SAAS,MAAoB;GAEtD,AADA,EAAgB,OAAO,UACvB,KAAK,MAAM,IAAIH,EAAgB,eAAe,CAAC;EACjD,CAAC,GACM;CACT;CAEA,OAAc,GAAGG,GAAqB;EAMpC,OALAJ,EAAkBI,CAAO,CAAC,CAAC,SAAS,MAAoB;GAEtD,AADAH,EAAgB,aAAa,iBAAiB,GAC9C,EAAgB,cAAc;EAChC,CAAC,GACD,MAAM,OAAO,GAAGG,CAAO,GAChB;CACT;AACF,GCtCaG,IAAb,cAAgCR,EAAM,MAAM;CAC1C,eAA+B;CAE/B;CAEA,oBAA2B;CAE3B,YAAmB,GAAY;EAE7B,AADA,MAAM,GACN,KAAK,OAAOS;CACd;CAEA,IAAW,GAAGJ,GAAqB;EAMjC,OALAJ,EAAkBI,CAAO,CAAC,CAAC,SAAS,MAAoB;GACtD,EAAgB,OAAO,KAAK;EAC9B,CAAC,GACD,MAAM,IAAI,GAAGA,CAAO,GACpB,KAAK,aAAa,GACX;CACT;CAEA,WAAkB,GAAkB;EAElC,AADA,KAAK,UAAUK,GACf,KAAK,UAAU,MAAW;GACxB,AAAKP,EAAe,qBACjBA,EAA4B,cAAc;EAE/C,CAAC;CACH;CAEA,OAAc,GAAGE,GAAqB;EAGpC,OAFA,MAAM,OAAO,GAAGA,CAAO,GACvB,KAAK,aAAa,GACX;CACT;CAEA,eAAuB;EACrB,KAAK,oBAAoBJ,EAAkB,IAAI,CAAC,CAAC;CACnD;AACF,GAEaU,IAAb,cAAqCH,EAAW;CAC9C,cAAqB;EACnB,MAAM,OAAO;CACf;AACF,GAEaI,IAAb,cAAsCJ,EAAW;CAC/C;CAEA,YAAmB,GAAoB;EAErC,IADA,MAAM,QAAQ,GACV,CAACD,GAAO,MAAU,MAAM,qCAAqC;EACjE,KAAK,QAAQA;CACf;CAEA,IAAW,GAAGF,GAAqB;EAKjC,OAJAJ,EAAkBI,CAAO,CAAC,CAAC,SAAS,MAAoB;GACtD,KAAK,MAAM,IAAIH,EAAgB,eAAe,CAAC;EACjD,CAAC,GACD,MAAM,IAAI,GAAGG,CAAO,GACb;CACT;AACF,GCrDMQ,IAAU,GAEVC,IAAc,iBAEPC,IAAS,GAAGD,EAAY,GAAGD,KAElCG,UAAyB;CAC7B,QAAQ,MAAM,GAAGD,EAAO,aAAa;AACvC,GAsCaE,IAsBT;CACF,cAAc,CAAC;CACf,gBAAgB,CAAC;CACjB,iBAAiB,CAAC;AACpB;AAEA,SAASC,EAAmB,GAAY;CACtC,OAAOD,EAAY,aAAa,MAAM,MAAME,EAAE,OAAOC,CAAE;AACzD;AAEA,SAASC,IAAuB;CAC9B,OAAQ,EAAY,eAAe,kBAAkB,IAAI3B,EAAc;AACzE;AAEA,SAAS4B,IAAwB;CAC/B,OAAQ,EAAY,gBAAgB,kBAAkB,IAAI5B,EAAc;AAC1E;AAEA,SAAS6B,EAAsB,GAAwB;CACrD,EAAqB,CAAC,CAAC,WAAWC,CAAS;AAC7C;AACA,SAASC,EAAuB,GAAwB;CACtD,EAAsB,CAAC,CAAC,WAAWD,CAAS;AAC9C;AAEA,IAAaE,IAAb,MAAyB;CACvB,OAAc,wBAAwBH;CAEtC,OAAc,yBAAyBE;CAEvC,QAA+C,IAAI9B,EAAU;CAE7D,QAAiC;EAC/B,SAAS;EACT,SAAS;EACT,UAAU;CACZ;CAEA,IAAW,QAAQ;EAEjB,OADK,KAAK,UAAQ,QAAQ,MAAM,yDAAyD,GAClF,KAAK;CACd;CAEA;CAEA,QAGI,EACF,gBAAgB,IAAIgB,EAAgB,EACtC;CAEA,WAAkB,yBAAyB;EACzC,OAAOU,EAAqB;CAC9B;CAEA,WAAkB,0BAA0B;EAC1C,OAAOC,EAAsB;CAC/B;CAEA,IAAW,yBAAyB;EAClC,OAAOD,EAAqB;CAC9B;CAEA,IAAW,0BAA0B;EACnC,OAAOC,EAAsB;CAC/B;CAGA,YAAmB,GAAqB;EACtC,AAAIf,KAAO,KAAK,SAASA,CAAK;CAChC;CAEA,SAAgB,GAAoB;EAClC,KAAK,SAASA;CAChB;CAEA,kBAAyB;EACvB,OAAO,KAAK;CACd;CAEA,SAAgB,GAAkC,IAAmC,EAAE,YAAY,GAAK,GAAG;EACzG,IAAI,KAAK,MAAM,UAAU,OAAOS,EAAiB;EACjD,IAAMW,IAAY,EAAE,GAAG,KAAK,MAAM;EAWlC,AAVA,KAAK,QAAQ,OAAO,OAAO,KAAK,OAAOC,CAAK,GACxCD,EAAU,YAAY,KAAK,MAAM,YACnCC,EAAM,UAAU,KAAK,WAAW,IAAI,KAAK,WAAW,IAElDD,EAAU,YAAY,KAAK,MAAM,YACnCC,EAAM,UAAU,KAAK,aAAa,IAAI,KAAK,cAAc,IAEvDD,EAAU,aAAa,KAAK,MAAM,YACpC,KAAK,cAAc,GAErB,KAAK,MAAM,KAAK,eAAe;GAAE,OAAO,KAAK;GAAO;GAAW,YAAYE,EAAQ;EAAW,CAAC;CACjG;CAEA,UAAiB;EAEf,AADA,KAAK,SAAS,EAAE,UAAU,GAAK,CAAC,GAChC,KAAK,MAAM,KAAK,SAAS;CAC3B;CAEA,MAAa,KAAK,EAAE,kBAAe,EAAE,YAAY,GAAK,GAAG;EACvD,IAAI,KAAK,MAAM,UAAU,OAAOb,EAAiB;EAEjD,AADA,KAAK,SAAS,EAAE,SAAS,GAAK,GAAG,EAAE,cAAW,CAAC,GAC/C,KAAK,MAAM,KAAK,QAAQ,EAAE,cAAW,CAAC;CACxC;CAEA,MAAa,KAAK,EAAE,kBAAe,EAAE,YAAY,GAAK,GAAG;EACvD,IAAI,KAAK,MAAM,UAAU,OAAOA,EAAiB;EAEjD,AADA,KAAK,SAAS,EAAE,SAAS,GAAM,GAAG,EAAE,cAAW,CAAC,GAChD,KAAK,MAAM,KAAK,QAAQ,EAAE,cAAW,CAAC;CACxC;CAEA,OAAc,EAAE,kBAAe,EAAE,YAAY,GAAK,GAAG;EACnD,IAAI,KAAK,MAAM,UAAU,OAAOA,EAAiB;EAEjD,AADA,KAAK,SAAS,EAAE,SAAS,GAAK,GAAG,EAAE,cAAW,CAAC,GAC/C,KAAK,MAAM,KAAK,UAAU,EAAE,cAAW,CAAC;CAC1C;CAEA,QAAe,EAAE,kBAAe,EAAE,YAAY,GAAK,GAAG;EACpD,IAAI,KAAK,MAAM,UAAU,OAAOA,EAAiB;EAEjD,AADA,KAAK,SAAS,EAAE,SAAS,GAAM,GAAG,EAAE,cAAW,CAAC,GAChD,KAAK,MAAM,KAAK,WAAW,EAAE,cAAW,CAAC;CAC3C;CAoCA,mBACE,GACA,GACA,MACG;EACH,IAAI,KAAK,MAAM,UAAU,OAAOA,EAAiB;EAEjD,IAAMc,WAAgB;GACpB,IAAMC,IAAgB;IACpB,OAAO;IACP,kBAAkB;IAClB,MAAM;IACN,YAAY;IACZ,WAAW,SAAS,cAAc,KAAK;IACvC,eAAe;IACf,cAAc,CAAC;GACjB;GACA,OAAO,OAAO,OAAOA,GAAeC,CAAM;EAC5C,EAAA,CAAG,GAEGC,IAAgBC,EAAO,IAAIC,CAAoB;EACrD,IAAIF,GAAe,SAAS,GAAG,OAAO,QAAQ,MAAM,GAAGlB,EAAO,6CAA6C;EAE3G,IAAM,EAAE,UAAO,kBAAkBqB,GAAK,SAAM,eAAY,cAAW,kBAAe,oBAAiBN,GAG/FO,IAAW,IACTC,IAAc,KAAK,aAAaL,GAAe;GAAE;GAAO;GAAK;GAAW;GAAM;GAAe;EAAa,CAAC;EAIjH,AAFAhB,EAAY,aAAa,KAAKqB,CAAW,GAErCR,EAAO,SAAO,KAAK,SAASA,EAAO,KAAK;EAE5C,IAAMS,UAA0B;GAC9B,IAAIF,GAAU;GACd,IAAMG,IAAQF,EAAY,SAAS,UAAU,KAAK,yBAAyB,IAAI,KAAK,0BAA0B;GAC9G,AAAKE,KACLA,EAAM,IAAIF,CAAW;EACvB,GAEMG,UAAe;GACnB,AAAIJ,MACJE,EAAkB,GAClB,KAAK,OAAOG,CAAM,GAClB,KAAK,MAAM,KAAK,QAAQ;EAC1B,GAEMC,KAAc,MAAqB,KAAK,eAAeL,EAAY,IAAI5B,CAAO,GAC9EkC,KAAc,MAAqB,KAAK,eAAeN,EAAY,IAAIO,CAAO,GAC9EC,WACJ,IAAW,IACXR,EAAY,iBAAiB,GACtB,KAGHS,IAAgBtC,MAAS,UAAUY,EAAqB,IAAIC,EAAsB;EAIxF,OAFI0B,KAAYP,EAAO,GAEhB;GACL,IAAIH,EAAY;GAChB;GACA;GACA,QAAQU,IAAa,KAAA,IAAYP;GACjC,YAAYE,EAAW,EAAI;GAC3B,YAAYA,EAAW,EAAK;GAC5B;GACA,cAAcC,EAAW,EAAI;GAC7B,eAAeA,EAAW,EAAK;GAC/B;GACA;GACA,kBAAkB,MAAqBG,EAAc,WAAWE,CAAO;EACzE;CACF;CAEA,mBAA0B,EAAE,4BAAyB,OAAU,CAAC,GAAG;EACjE,IAAMC,IAAajC,EAAY,gBAAgB;EAC/C,IAAIiC,GAAY,OAAOA;EAGrB,IAAIC,GAAwB;GAC1B,IAAMC,IAAkB,IAAIhD,EAAgB;GAC5C,EAAY,eAAe,aAAagD;EAC1C;EACA,OAAOnC,EAAY,eAAe;CAEtC;CAEA,oBAA2B,EAAE,4BAAyB,OAAU,CAAC,GAAG;EAClE,IAAMiC,IAAajC,EAAY,iBAAiB;EAChD,IAAIiC,GAAY,OAAOA;EAGrB,IAAIC,GAAwB;GAC1B,IAAME,IAAIpC,EAAY,gBAAgB,SAAS,KAAK;GACpD,IAAI,CAACoC,GAAG;IACN,QAAQ,MAAM,GAAGtC,EAAO,wCAAwC;IAChE;GACF;GACA,IAAMuC,IAAmB,IAAIhD,EAAiB+C,CAAC;GAE/C,AADA,EAAY,gBAAgB,aAAaC,GACzC,EAAY,gBAAgB,QAAQD;EACtC;EACA,OAAOpC,EAAY,gBAAgB;CAEvC;CAEA,yBAAgC,EAAE,yBAAsB,OAAS,CAAC,GAAG;EACnE,IAAMiC,IAAa,KAAK,mBAAmB,EAAE,wBAAwBK,EAAoB,CAAC;EAM1F,OALIA,KAAuBL,MACpBA,EAAW,cAAc,KAAK,MAAM,eAAe,EAAE,KACxDA,EAAW,IAAI,KAAK,MAAM,cAAc,IAGrC,KAAK,MAAM;CACpB;CAEA,0BAAiC,EAAE,yBAAsB,OAAS,CAAC,GAAG;EACpE,IAAMA,IAAa,KAAK,oBAAoB,EAAE,wBAAwBK,EAAoB,CAAC;EAC3F,IAAIA,KAAuBL,KAAc,KAAK,OAAO;GACnD,IAAMM,IAAkB,KAAK,MAAM,mBAAmB,IAAI5C,EAAiB,KAAK,KAAK;GAErF,AADA,KAAK,MAAM,kBAAkB4C,GACxBN,EAAW,cAAcM,EAAgB,EAAE,KAAGN,EAAW,IAAIM,CAAe;EACnF;EACA,OAAO,KAAK,MAAM;CACpB;CAEA,kBAAyB,GAAY,MAAqB;EACxD,EAAmBpC,CAAE,CAAC,EAAE,WAAWV,CAAO;CAC5C;CAEA,kBAAyB,GAAY,MAAqB;EACxD,IAAM4B,IAAcpB,EAAmBE,CAAE;EACzC,IAAI,CAACkB,GAAa;EAClB,IAAME,IACJF,EAAY,SAAS,UACjB,KAAK,yBAAyB,EAAE,qBAAqB,GAAM,CAAC,IAC5D,KAAK,0BAA0B,EAAE,qBAAqB,GAAM,CAAC;EACnE,AAAKE,MACDK,IACFL,EAAM,IAAIF,CAAW,IAErBE,EAAM,OAAOF,CAAW;CAE5B;CAEA,OAAc,GAAsB;EAClC,IAAI,KAAK,yBAAyB,EAAE,qBAAqB,GAAM,CAAC,CAAC,CAAC,oBAAoB,GAAG;GACvF,IAAMY,IAAa,KAAK,mBAAmB,EAAE,wBAAwB,GAAK,CAAC;GAC3E,IAAI,CAACA,GAAY,OAAO,QAAQ,MAAM,GAAGnC,EAAO,4CAA4C;GAC5F,EAAqB,CAAC,CAAC,iBAAiBmC,GAAYR,CAAM;EAC5D;EACA,KAAK,KAAK,0BAA0B,EAAE,qBAAqB,GAAM,CAAC,CAAC,EAAE,qBAAqB,KAAK,GAAG;GAChG,IAAMQ,IAAa,KAAK,oBAAoB,EAAE,wBAAwB,GAAK,CAAC;GAC5E,IAAI,CAACA,GAAY,OAAO,QAAQ,MAAM,GAAGnC,EAAO,6CAA6C;GAC7F,EAAsB,CAAC,CAAC,iBAAiBmC,GAAYR,CAAM;EAC7D;CACF;CAEA,gBACE,GACA,MAQG;EACH,IAAMJ,IAAc,IAAIxC,EAAgB;GAAE,cAAcoC;GAAQ,GAAGJ;GAAQ,OAAOA,EAAO;EAAa,CAAC;EAGvG,OAFAQ,EAAY,QAAQ,UAAU,IAAI,GAAGxB,EAAY,YAAY,GAC7D,EAAY,QAAQ,KAAK,GAAGA,EAAY,eAAewB,EAAY,QAC5DA;CACT;CAEA,MAAc,aAAa;EAEzB,AADA,KAAK,MAAM,eAAe,WAAW,EAAI,GACzC,KAAK,MAAM,iBAAiB,WAAW,EAAI;CAC7C;CAEA,MAAc,aAAa;EAEzB,AADA,KAAK,MAAM,eAAe,WAAW,EAAK,GAC1C,KAAK,MAAM,iBAAiB,WAAW,EAAK;CAC9C;CAEA,eAAuB;EAErB,AADA,KAAK,mBAAmB,CAAC,EAAE,IAAI,KAAK,MAAM,cAAc,GACpD,KAAK,MAAM,mBAAiB,KAAK,oBAAoB,CAAC,EAAE,IAAI,KAAK,MAAM,eAAe;CAC5F;CAEA,gBAAwB;EAYtB,AAXA,KAAK,MAAM,eAAe,SAAS,SAAS,MAAW;GACrD,AAAInC,aAAkBN,KAAeM,EAAO,mBAAmB,WAAWA,EAAO,QAAQ,eAAe,QACtGA,EAAO,QAAQ,OAAO;EAE1B,CAAC,GACD,KAAK,MAAM,iBAAiB,SAAS,SAAS,MAAW;GACvD,AAAIA,aAAkBN,KAAeM,EAAO,mBAAmB,WAAWA,EAAO,QAAQ,eAAe,QACtGA,EAAO,QAAQ,OAAO;EAE1B,CAAC,GACD,KAAK,mBAAmB,CAAC,EAAE,OAAO,KAAK,MAAM,cAAc,GACvD,KAAK,MAAM,mBAAiB,KAAK,oBAAoB,CAAC,EAAE,OAAO,KAAK,MAAM,eAAe;CAC/F;CAEA,gBAAwB;EACtB,KAAK,cAAc;CACrB;AACF"}

package/dist/internal/CSS3DRenderPlugin-ccSpcvwd.js

@@ -0,0 +1,77 @@
+import { r as e } from "./CSS3DObject-C9ck81UX.js";
+import { t } from "./fiveModelLoad-mg-TnpnM.js";
+import { n } from "./defaultUrls-CjKkS9k9.js";
+import { t as r } from "./CSS3DRender-BKWjq-Mo.js";
+//#region src/CSS3DRenderPlugin/Controller.ts
+var i = "v2.0.1", a = `CSS3DRenderPlugin@${i}`, o = class extends r {
+	five;
+	behindFiveContainer;
+	frontFiveContainer;
+	VERSION = i;
+	staticPrefix = n;
+	created3DElementResults = [];
+	constructor(e) {
+		super(), this.five = e;
+	}
+	setState(...e) {
+		let t = super.setState(...e);
+		return this.five.needsRender = !0, t;
+	}
+	create3DDomContainer = (e, n) => {
+		if (this.state.disposed) return;
+		let r = Object.assign({
+			ratio: .00216,
+			devicePixelRatio: 1,
+			mode: "front",
+			autoRender: !0,
+			wrapperStyle: {}
+		}, n, n?.mode === "behind" ? { scene: this.five.scene } : void 0), { autoRender: i } = r;
+		r.mode === "behind" && r.behindFiveContainer && (this.behindFiveContainer = r.behindFiveContainer);
+		let o = this.create3DElement(this.five.camera, e, {
+			...r,
+			autoRender: !1
+		});
+		if (!o) return;
+		let s = !1, c = o.dispose;
+		o.dispose = () => {
+			if (!s) return s = !0, this.created3DElementResults.includes(o) && this.created3DElementResults.splice(this.created3DElementResults.indexOf(o), 1), c();
+		}, this.created3DElementResults.push(o);
+		let l = () => {
+			if (s || this.state.disposed) return;
+			let e = o.css3DObject.mode === "front" ? this.frontFiveContainer ?? this.five.getElement()?.parentElement : this.getBehindFiveElement();
+			if (!e) return console.error(`${a}: wrapper is ${e}; mode is ${o.css3DObject.mode}`);
+			o.appendToElement(e), o.render();
+		}, u = () => {
+			t(this.five).then(() => l());
+		};
+		return i && u(), {
+			...o,
+			render: i ? void 0 : u
+		};
+	};
+	appendToFrontFiveContainer(e) {
+		this.frontFiveContainer = e, this.created3DElementResults.forEach((t) => {
+			t.css3DObject.mode === "front" && t.appendToElement(e);
+		});
+	}
+	appendToBehindFiveContainer(e) {
+		this.behindFiveContainer = e, this.created3DElementResults.forEach((t) => {
+			t.css3DObject.mode === "behind" && t.appendToElement(e);
+		});
+	}
+	getBehindFiveElement() {
+		return this.behindFiveContainer ||= e(this.five), this.behindFiveContainer;
+	}
+	dispose() {
+		this.state.disposed || (this.clear(), super.dispose());
+	}
+	clear() {
+		this.created3DElementResults.slice().forEach((e) => {
+			e.dispose();
+		}), this.created3DElementResults = [];
+	}
+}, s = (e) => new o(e);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=CSS3DRenderPlugin-ccSpcvwd.js.map

package/dist/internal/CSS3DRenderPlugin-ccSpcvwd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSS3DRenderPlugin-ccSpcvwd.js","names":["generateBehindFiveElement","CSS3DRender","VERSION","PLUGIN_NAME","Controller","DEFAULT_STATIC_PREFIX","five","params","result","config","create3DElementResult","points","disposed","originDispose","oldRender","wrapper","render","autoRender","container","CSS3DRenderPlugin"],"sources":["../../src/CSS3DRenderPlugin/Controller.ts","../../src/CSS3DRenderPlugin/index.ts"],"sourcesContent":["import type * as THREE from 'three/webgpu'\nimport type { Five } from '@realsee/five-webgpu'\nimport { CSS3DRender } from './utils/three/CSS3DRender'\nimport type { AnyPosition } from './utils'\nimport generateBehindFiveElement from './utils/generateBehindFiveElement'\nimport { DEFAULT_STATIC_PREFIX } from '../shared-utils'\nimport { waitFiveModelLoaded } from '../shared-utils/five/fiveModelLoad'\n\nconst VERSION = 'v2.0.1'\n\nexport const PLUGIN_NAME = `CSS3DRenderPlugin@${VERSION}`\n\nexport interface Create3DDomContainerParamsType {\n  points: AnyPosition[]\n  config?: {\n    ratio?: number\n    devicePixelRatio?: number\n    autoRender?: boolean\n    container?: HTMLElement\n    pointerEvents?: 'none' | 'auto'\n    wrapperStyle?: Partial<CSSStyleDeclaration>\n  } & ({ mode?: 'front' } | { mode: 'behind'; behindFiveContainer?: HTMLElement })\n}\n\nexport default class Controller extends CSS3DRender {\n  public five: Five\n  public behindFiveContainer?: Element\n  public frontFiveContainer?: Element\n\n  public readonly VERSION = VERSION\n\n  public readonly staticPrefix: string = DEFAULT_STATIC_PREFIX\n\n  private created3DElementResults: Array<Exclude<ReturnType<CSS3DRender['create3DElement']>, void>> = []\n\n  public constructor(five: Five) {\n    super()\n    this.five = five\n  }\n\n  public setState(...params: Parameters<InstanceType<typeof CSS3DRender>['setState']>): void {\n    const result = super.setState(...params)\n    this.five.needsRender = true\n    return result\n  }\n\n  /**\n   * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中\n   * @param { Vector3Position[] } points 矩形四个点坐标\n   * @param config 均为可选值\n   * @config_document `config` 均为可选值\n   *  | key                   | type                       | defaultValue        | comment |\n   *  | -                     | -                          | -                   | -       |\n   *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |\n   *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |\n   *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |\n   *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`\n   *  | `pointerEvents`       | *`'none'\\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |\n   *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |\n   *  | `mode`                | *`'front'\\|'behind'`*      | `front`             | 两种模式:|\n   *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |\n   *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |\n   *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |\n   *\n   * @return\n   * ```typescript\n   *    {\n   *      id: string,                             // id\n   *      container: HTMLDIVElement               // dom容器\n   *      dispose: () => void                     // 销毁\n   *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例\n   *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined\n   *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)\n   *      show: () => void                        // 同 setVisible(true)\n   *      hide: () => void                        // 同 setVisible(false)\n   *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)\n   *      enable: () => void                      // 同 setEnabled(true)\n   *      disable: () => void                     // 同 setEnabled(false)\n   *    } | void\n   * ```\n   */\n  public create3DDomContainer = (points: Create3DDomContainerParamsType['points'], config?: Create3DDomContainerParamsType['config']) => {\n    if (this.state.disposed) return undefined\n    // ==== init ====\n    const params = (() => {\n      const defaultconfig = {\n        ratio: 0.00216,\n        devicePixelRatio: 1,\n        mode: 'front',\n        autoRender: true,\n        wrapperStyle: {},\n      }\n      return Object.assign(defaultconfig, config, config?.mode === 'behind' ? { scene: this.five.scene } : undefined) as {\n        ratio: number\n        devicePixelRatio: number\n        autoRender: boolean\n        container: HTMLElement\n        pointerEvents: 'none' | 'auto'\n        wrapperStyle: Partial<CSSStyleDeclaration>\n      } & ({ mode: 'front' } | { mode: 'behind'; behindFiveContainer: HTMLElement; scene: THREE.Scene })\n    })()\n\n    const { autoRender } = params\n\n    if (params.mode === 'behind' && params.behindFiveContainer) {\n      this.behindFiveContainer = params.behindFiveContainer\n    }\n\n    // 自动添加dom\n    const create3DElementResult = this.create3DElement(this.five.camera, points, { ...params, autoRender: false })\n\n    if (!create3DElementResult) return undefined\n\n    let disposed = false\n    const originDispose = create3DElementResult.dispose\n    create3DElementResult.dispose = () => {\n      if (disposed) return\n      disposed = true\n      if (this.created3DElementResults.includes(create3DElementResult)) {\n        this.created3DElementResults.splice(this.created3DElementResults.indexOf(create3DElementResult), 1)\n      }\n      return originDispose()\n    }\n\n    this.created3DElementResults.push(create3DElementResult)\n\n    const oldRender = () => {\n      if (disposed || this.state.disposed) return\n      const wrapper =\n        create3DElementResult.css3DObject.mode === 'front'\n          ? this.frontFiveContainer ?? this.five.getElement()?.parentElement\n          : this.getBehindFiveElement()\n      if (!wrapper) return console.error(`${PLUGIN_NAME}: wrapper is ${wrapper}; mode is ${create3DElementResult.css3DObject.mode}`)\n      create3DElementResult.appendToElement(wrapper)\n      create3DElementResult.render!()\n    }\n\n    const render = () => {\n      waitFiveModelLoaded(this.five).then(() => oldRender())\n    }\n\n    if (autoRender) render()\n\n    return { ...create3DElementResult, ...{ render: autoRender ? undefined : render } }\n  }\n\n  public appendToFrontFiveContainer(container: Element) {\n    this.frontFiveContainer = container\n    this.created3DElementResults.forEach((result) => {\n      if (result.css3DObject.mode === 'front') {\n        result.appendToElement(container)\n      }\n    })\n  }\n\n  public appendToBehindFiveContainer(container: Element) {\n    this.behindFiveContainer = container\n    this.created3DElementResults.forEach((result) => {\n      if (result.css3DObject.mode === 'behind') {\n        result.appendToElement(container)\n      }\n    })\n  }\n\n  public getBehindFiveElement() {\n    if (this.behindFiveContainer) return this.behindFiveContainer\n    else {\n      this.behindFiveContainer = generateBehindFiveElement(this.five)\n      return this.behindFiveContainer\n    }\n  }\n\n  public dispose() {\n    if (this.state.disposed) return\n    this.clear()\n    super.dispose()\n  }\n\n  public clear() {\n    this.created3DElementResults.slice().forEach((result) => {\n      result.dispose()\n    })\n    this.created3DElementResults = []\n  }\n}\n","import type { Five, FivePlugin } from '@realsee/five-webgpu'\nimport Controller from './Controller'\n\nexport const CSS3DRenderPlugin: FivePlugin<void, InstanceType<typeof Controller>> = (five: Five) => new Controller(five)\n\nexport { CSS3DRender } from './utils/three/CSS3DRender'\nexport type { CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType, CSS3DRenderExportType, Create3DDomContainerReturnType, Create3DElementReturnType, CSS3DRenderPluginState, CSS3DRenderPluginEventMap } from './typing'\nexport default CSS3DRenderPlugin\n"],"mappings":";;;;;AAQA,IAAME,IAAU,UAEHC,IAAc,qBAAqBD,KAc3BE,IAArB,cAAwCH,EAAY;CAClD;CACA;CACA;CAEA,UAA0BC;CAE1B,eAAuCG;CAEvC,0BAAoG,CAAC;CAErG,YAAmB,GAAY;EAE7B,AADA,MAAM,GACN,KAAK,OAAOC;CACd;CAEA,SAAgB,GAAGC,GAAwE;EACzF,IAAMC,IAAS,MAAM,SAAS,GAAGD,CAAM;EAEvC,OADA,KAAK,KAAK,cAAc,IACjBC;CACT;CAqCA,wBAA+B,GAAkD,MAAsD;EACrI,IAAI,KAAK,MAAM,UAAU;EAEzB,IAAMD,IAQG,OAAO,OAAO;GANnB,OAAO;GACP,kBAAkB;GAClB,MAAM;GACN,YAAY;GACZ,cAAc,CAAC;EAEI,GAAeE,GAAQA,GAAQ,SAAS,WAAW,EAAE,OAAO,KAAK,KAAK,MAAM,IAAI,KAAA,CAAS,GAU1G,EAAE,kBAAeF;EAEvB,AAAIA,EAAO,SAAS,YAAYA,EAAO,wBACrC,KAAK,sBAAsBA,EAAO;EAIpC,IAAMG,IAAwB,KAAK,gBAAgB,KAAK,KAAK,QAAQC,GAAQ;GAAE,GAAGJ;GAAQ,YAAY;EAAM,CAAC;EAE7G,IAAI,CAACG,GAAuB;EAE5B,IAAIE,IAAW,IACTC,IAAgBH,EAAsB;EAU5C,AATA,EAAsB,gBAAgB;GACpC,IAAI,IAKJ,OAJA,IAAW,IACP,KAAK,wBAAwB,SAASA,CAAqB,KAC7D,KAAK,wBAAwB,OAAO,KAAK,wBAAwB,QAAQA,CAAqB,GAAG,CAAC,GAE7FG,EAAc;EACvB,GAEA,KAAK,wBAAwB,KAAKH,CAAqB;EAEvD,IAAMI,UAAkB;GACtB,IAAIF,KAAY,KAAK,MAAM,UAAU;GACrC,IAAMG,IACJL,EAAsB,YAAY,SAAS,UACvC,KAAK,sBAAsB,KAAK,KAAK,WAAW,CAAC,EAAE,gBACnD,KAAK,qBAAqB;GAChC,IAAI,CAACK,GAAS,OAAO,QAAQ,MAAM,GAAGZ,EAAY,eAAeY,EAAQ,YAAYL,EAAsB,YAAY,MAAM;GAE7H,AADAA,EAAsB,gBAAgBK,CAAO,GAC7CL,EAAsB,OAAQ;EAChC,GAEMM,UAAe;GACnB,EAAoB,KAAK,IAAI,CAAC,CAAC,WAAWF,EAAU,CAAC;EACvD;EAIA,OAFIG,KAAYD,EAAO,GAEhB;GAAE,GAAGN;GAA4B,QAAQO,IAAa,KAAA,IAAYD;EAAS;CACpF;CAEA,2BAAkC,GAAoB;EAEpD,AADA,KAAK,qBAAqBE,GAC1B,KAAK,wBAAwB,SAAS,MAAW;GAC/C,AAAIV,EAAO,YAAY,SAAS,WAC9BA,EAAO,gBAAgBU,CAAS;EAEpC,CAAC;CACH;CAEA,4BAAmC,GAAoB;EAErD,AADA,KAAK,sBAAsBA,GAC3B,KAAK,wBAAwB,SAAS,MAAW;GAC/C,AAAIV,EAAO,YAAY,SAAS,YAC9BA,EAAO,gBAAgBU,CAAS;EAEpC,CAAC;CACH;CAEA,uBAA8B;EAI1B,OAHE,AAEF,KAAK,wBAAsBlB,EAA0B,KAAK,IAAI,GACvD,KAAK;CAEhB;CAEA,UAAiB;EACf,AAAI,KAAK,MAAM,aACf,KAAK,MAAM,GACX,MAAM,QAAQ;CAChB;CAEA,QAAe;EAIb,AAHA,KAAK,wBAAwB,MAAM,CAAC,CAAC,SAAS,MAAW;GACvD,EAAO,QAAQ;EACjB,CAAC,GACD,KAAK,0BAA0B,CAAC;CAClC;AACF,GCrLamB,KAAwE,MAAe,IAAIf,EAAWE,CAAI"}