@realsee/dnalogel 2.6.6 → 2.6.7-dev.1

package/libs/PanoTagPlugin/controller/index.d.ts

@@ -1,7 +1,8 @@
-import type { Tag, PartialDeep, TagId, Tags, State, AddTagConfig, LoadTagConfig } from '../typings';
+import type { Tag, PartialDeep, TagId, Tags, TagElement, State, AddTagConfig, LoadTagConfig } from '../typings';
 import type { TagContentType } from '..';
 import type { ArrayPosition } from '../typings';
 import { Five } from '@realsee/five';
+import { Object3D } from 'three';
 import { TagComputer } from './TagComputer';
 export declare const pluginFlag: (name: string) => string;
 declare class PanoTagPluginController extends TagComputer {
@@ -23,8 +24,12 @@ declare class PanoTagPluginController extends TagComputer {
     /** 临时状态 */
     private temporaryState;
     private mediaStore;
+    private group;
+    private gltfObjectGroup;
     private isIOSWX;
     private store;
+    /** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
+    private enabledModelTagSet;
     constructor(five: Five, params?: {
         debug?: boolean;
         config?: {
@@ -35,11 +40,11 @@ declare class PanoTagPluginController extends TagComputer {
     /**
      * @description: 加载数据
      */
-    load(data: Tags, config?: LoadTagConfig): Promise<boolean>;
+    load(data: Tags, config?: LoadTagConfig): Promise<void>;
     /**
      * @description: 添加标签
      */
-    addTag(tag: Tag | Tag[], config?: AddTagConfig): Promise<boolean>;
+    addTag(tag: Tag<any, any> | Tag<any, any>[], config?: AddTagConfig): Promise<void>;
     /**
      * @description: 改变配置
      */
@@ -89,15 +94,21 @@ declare class PanoTagPluginController extends TagComputer {
     /**
      * @description: 改变tag任意属性
      */
-    changeTagById<C extends TagContentType = any>(id: TagId, tag: PartialDeep<{
-        [P in keyof Pick<Tag<C>, 'enabled' | 'style' | 'stickType' | 'contentType' | 'data' | 'normal' | 'config'>]: Tag[P];
-    }>, deepMerge?: boolean): void;
+    changeTagById<C extends TagContentType = any>(id: TagId, tag: PartialDeep<Tag<C>>, deepMerge?: boolean): void;
     /**
      * @description: 销毁tag
      */
     destroyTagById(id: TagId | TagId[]): void;
     /** 暂停当前标签内进行的所有多媒体 */
     pauseCurrentMedia(): void;
+    /** 更改 tag 模型 */
+    changeTagModel: (tag: TagElement<any, 'Model'>, data: PartialDeep<Tag<'MediaModel'>['data']>) => Promise<void>;
+    /** 更新标签中多媒体面片的位置
+     * @param tag 标签
+     * @param model 模型
+     * @param scale css3DObject 原始缩放比例
+     */
+    updateTagCss3DObjectMatrix<S extends 'Model' | 'Plane' = 'Model'>(tag: TagElement<any, S>, model: Object3D): void;
     /**
      * @description: 设置 visible 和 unfolded
      */
@@ -118,6 +129,7 @@ declare class PanoTagPluginController extends TagComputer {
      * @description: 切换模式处理函数
      */
     private handleFiveModeChange;
+    private handleFiveInitAnimationEnded;
     private handleFiveWantsMoveToPano;
     /**
      * @description: 走点/切换模型后显示
@@ -136,6 +148,8 @@ declare class PanoTagPluginController extends TagComputer {
     private handleFiveCameraUpdateDebounce;
     private handleFiveCameraUpdate;
     private handleFivePanoArrived;
+    /** 楼层切换时，需要更新标签可见性 */
+    private handleFiveModelShownFloorChange;
     private setUnfoldedByCamera;
     /**
      * @description: 渲染单个点的标签
@@ -145,11 +159,24 @@ declare class PanoTagPluginController extends TagComputer {
      * @description: 渲染3D贴片
      */
     private updateRenderPlaneTag;
+    /** 更新所有模型标签
+     *
+     * 1. 移除不应该在场景中的模型
+     * 2. 更新模型的可见性
+     *
+     * FIXME: 有性能问题，但是之前的逻辑都是这么写，暂时先这样吧
+     */
+    private updateRenderModelTag;
     private disposeAllCSS3DContainer;
     /**
      * @description: 检查并销毁不用的3D贴片
      */
     private checkPanelTag;
+    /** 添加模型标签 */
+    private addMediaModelTag;
+    /** 加载外部模型 */
+    private loadModel;
+    private changeTagMode;
 }
 export default PanoTagPluginController;
 export { PanoTagPluginController };

package/libs/PanoTagPlugin/controller/index.js

@@ -1,17 +1,17 @@
-var P = Object.defineProperty, w = Object.defineProperties;
-var E = Object.getOwnPropertyDescriptors;
-var T = Object.getOwnPropertySymbols;
-var R = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
-var u = (h, a, e) => a in h ? P(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e, p = (h, a) => {
+var x = Object.defineProperty, G = Object.defineProperties;
+var V = Object.getOwnPropertyDescriptors;
+var R = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var S = (h, a, e) => a in h ? x(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e, p = (h, a) => {
   for (var e in a || (a = {}))
-    R.call(a, e) && u(h, e, a[e]);
-  if (T)
-    for (var e of T(a))
-      k.call(a, e) && u(h, e, a[e]);
+    N.call(a, e) && S(h, e, a[e]);
+  if (R)
+    for (var e of R(a))
+      W.call(a, e) && S(h, e, a[e]);
   return h;
-}, f = (h, a) => w(h, E(a));
-var d = (h, a, e) => (u(h, typeof a != "symbol" ? a + "" : a, e), e);
-var m = (h, a, e) => new Promise((t, i) => {
+}, f = (h, a) => G(h, V(a));
+var d = (h, a, e) => (S(h, typeof a != "symbol" ? a + "" : a, e), e);
+var c = (h, a, e) => new Promise((t, i) => {
   var s = (r) => {
     try {
       n(e.next(r));
@@ -27,24 +27,28 @@ var m = (h, a, e) => new Promise((t, i) => {
   }, n = (r) => r.done ? t(r.value) : Promise.resolve(r.value).then(s, o);
   n((e = e.apply(h, a)).next());
 });
-import { Subscribe as F } from "@realsee/five";
-import { Quaternion as U } from "three";
-import c from "object-assign-deep";
-import { writable as L } from "../../vendor/svelte/store/index.js";
-import O from "../Components/TagContainer.js";
-import I from "../Components/Tag/index.js";
-import { arrayPositionToVector3 as g } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { addDebugPoints as B } from "../utils/addDebugPoints.js";
-import { planeNormal as M } from "../utils/planeNormal.js";
-import { waitFiveModelLoaded as N } from "../utils/actionAfterFiveModelLoad.js";
-import { normalPositionToPositions as V } from "../utils/normalPositionToPositions.js";
-import { debounce as C } from "../utils/debounce.js";
-import { throttle as z } from "../utils/throttle.js";
-import { resizeObserver as D } from "../utils/resizeObserver.js";
-import { TagComputer as W } from "./TagComputer.js";
-import { CSS3DRenderPlugin as _ } from "../../CSS3DRenderPlugin/index.js";
-import $ from "../utils/tag/format.js";
-import { generateBlankAudio as A, AudioNamespace as S } from "../../shared-utils/audio.js";
+import { Subscribe as z } from "@realsee/five";
+import { Group as E, Vector3 as T, Matrix4 as C, Quaternion as _ } from "three";
+import u from "object-assign-deep";
+import { writable as $ } from "../../vendor/svelte/store/index.js";
+import q from "../Components/TagContainer.js";
+import H from "../Components/Tag/index.js";
+import { arrayPositionToVector3 as v } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { addDebugPoints as J } from "../utils/addDebugPoints.js";
+import { planeNormal as O } from "../utils/planeNormal.js";
+import "@realsee/five/gltf-loader";
+import { isMediaModelTag as m } from "../utils/tag/tagCheck.js";
+import { waitFiveModelLoaded as Q } from "../utils/actionAfterFiveModelLoad.js";
+import { normalPositionToPositions as X } from "../utils/normalPositionToPositions.js";
+import { debounce as k } from "../utils/debounce.js";
+import { throttle as K } from "../utils/throttle.js";
+import { resizeObserver as I } from "../utils/resizeObserver.js";
+import { TagComputer as Y } from "./TagComputer.js";
+import { CSS3DRenderPlugin as Z } from "../../CSS3DRenderPlugin/index.js";
+import ee from "../utils/tag/format.js";
+import { generateBlankAudio as L, AudioNamespace as U } from "../../shared-utils/audio.js";
+import { loadGLTF as te } from "../../shared-utils/three/GLTFLoader.js";
+import { getMediaModelPlanPositions as ie } from "../utils/tag/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../Components/TagItem.js";
 import "../utils/noTypecheck.js";
@@ -114,27 +118,28 @@ import "../Components/Tag/MediaPlane.js";
 import "../Components/Tag/LinkTag.js";
 import "../Components/Tag/CustomTag.js";
 import "../tag.config.js";
-import "../utils/tag/tagCheck.js";
 import "../utils/tagPosition.js";
 import "../utils/checkRange.js";
 import "./TagCacheController.js";
 import "../../base/BasePlugin.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
-const y = "2.0.10", v = `DnalogelPlugin-PanoTagPlugin@${y}`, G = !1, Lt = (h) => `${v}--${h}`;
-class Ot extends W {
+const j = "2.0.10", A = `DnalogelPlugin-PanoTagPlugin@${j}`, se = !1, Jt = (h) => `${A}--${h}`;
+class Qt extends Y {
   constructor(e, t) {
     super(e);
-    d(this, "version", y);
+    d(this, "version", j);
     d(this, "state", { enabled: !0, visible: !0 });
     d(this, "params");
     d(this, "debug");
     d(this, "css3DRenderPlugin");
     d(this, "TagContainerSvelte");
     d(this, "temporaryState", { visible: !0 });
-    d(this, "mediaStore", L({
+    d(this, "mediaStore", $({
       currentMediaElement: null
     }));
+    d(this, "group", new E());
+    d(this, "gltfObjectGroup", new E());
     d(this, "isIOSWX", navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 && navigator.userAgent.toLowerCase().indexOf("iphone") !== -1);
     d(this, "store", {
       disposers: [],
@@ -142,54 +147,85 @@ class Ot extends W {
       resizeObserverDisposerAdding: !1,
       css3DRenderDisposer: /* @__PURE__ */ new Map()
     });
+    d(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    d(this, "changeTagModel", (e, t) => c(this, null, function* () {
+      e.data = u({}, e.data, t), yield this.loadModel(e), this.updateRenderAllTags();
+    }));
     d(this, "disposedErrorLog", () => {
-      console.error(`${v} is disposed`);
+      console.error(`${A} is disposed`);
+    });
+    d(this, "handleFiveInitAnimationEnded", () => {
+      const e = this.five.getCurrentState().mode;
+      this.tags.forEach((t) => {
+        t.temporaryState = f(p({}, t.temporaryState), { visible: this.getVisibelByFiveMode(t, e) }), m(t) && e === "Panorama" && this.changeTagMode(t, "front");
+      }), this.updateRenderAllTags(), this.updateRenderAllTags();
     });
-    this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, A(1, { namespace: S.GetAudioDuration }), A(1, { namespace: S.PlayAudio }), Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this });
+    d(this, "handleFiveModelShownFloorChange", () => {
+      this.tags.forEach((e) => {
+        !m(e) || (e.state.visible = this.checkFloorIndex(e));
+      }), this.updateRenderAllTags();
+    });
+    d(this, "loadModel", (e) => c(this, null, function* () {
+      var r;
+      const t = e.data.modelUrl;
+      if (console.log("\u{1F436} ==> url:", t), !t)
+        return;
+      const i = te(t).then((l) => Object.assign(l.scene, { customID: e.id, isTagModel: !0 }));
+      e.model = { promise: i };
+      const s = yield i;
+      if (((r = e.model) == null ? void 0 : r.promise) !== i || (e.model.object = s, !this.tags.includes(e)))
+        return;
+      s.visible = e.state.visible, new C().fromArray(e.matrix).decompose(s.position, s.quaternion, s.scale), this.checkFloorIndex(e) || (s.visible = !1);
+      const n = this.gltfObjectGroup.children.find((l) => l.customID === e.id);
+      return n && this.gltfObjectGroup.remove(n), this.gltfObjectGroup.add(s), this.updateTagCss3DObjectMatrix(e, s), s;
+    }));
+    this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.group.add(this.gltfObjectGroup), this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, L(1, { namespace: U.GetAudioDuration }), L(1, { namespace: U.PlayAudio }), Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this }), this.state.enabled && this.five.scene.add(this.group);
   }
   load(e, t) {
-    return m(this, null, function* () {
-      var i, s;
-      if (this.clearTags(), console.log(v, " load:", { data: e }), this.config = c({}, this.config, {
-        globalConfig: (i = e.globalConfig) != null ? i : {},
-        contentTypeConfig: (s = e.contentTypeConfig) != null ? s : {}
-      }), this.debug)
+    return c(this, null, function* () {
+      var s, o;
+      this.clearTags(), console.log(A, " load:", { data: JSON.parse(JSON.stringify(e)) }), this.config = u({}, this.config, {
+        globalConfig: (s = e.globalConfig) != null ? s : {},
+        contentTypeConfig: (o = e.contentTypeConfig) != null ? o : {}
+      });
+      const i = yield this.addTag(e.tagList, t);
+      if (this.debug)
         try {
-          B(this.five, this.tags);
-        } catch (o) {
-          console.error(o);
+          J(this.five, this.tags);
+        } catch (n) {
+          console.error(n);
         }
-      return this.addTag(e.tagList, t);
+      return i;
     });
   }
   addTag(e, t) {
-    return m(this, null, function* () {
+    return c(this, null, function* () {
       const s = (Array.isArray(e) ? e : [e]).map((o) => {
-        const n = this.getTagConfig(o);
-        return f(p({}, o), {
-          state: p({ visible: void 0, unfolded: G }, n.initialState),
-          hooks: new F(),
+        const n = this.getTagConfig(o), r = f(p({}, o), {
+          state: p({ visible: void 0, unfolded: se }, n.initialState),
+          hooks: new z(),
           clickable: n.clickable,
           mergedConfig: n
         });
+        return m(o) && (r.temporaryState = { visible: !1 }), r;
       }).filter((o) => o.position);
-      return s.forEach($), this.tags.push(...s), N(this.five).then(() => {
+      return s.forEach(ee), this.tags.push(...s), Q(this.five).then(() => {
         var o, n, r;
-        return this.store.eventListenerDisposer && ((n = (o = this.store).eventListenerDisposer) == null || n.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (r = t == null ? void 0 : t.withAnimation) != null ? r : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), !0;
+        return this.store.eventListenerDisposer && ((n = (o = this.store).eventListenerDisposer) == null || n.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (r = t == null ? void 0 : t.withAnimation) != null ? r : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), console.log("\u{1F436} ==> waitFiveModelLoaded:"), this.addMediaModelTag(s);
       });
     });
   }
   changeConfig(e, t = !0) {
-    t ? this.config = c({}, this.config, e) : this.config = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
+    t ? this.config = u({}, this.config, e) : this.config = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
   }
   changeGlobalConfig(e, t = !0) {
-    t ? this.config.globalConfig = c({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
+    t ? this.config.globalConfig = u({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
   }
   clearTags() {
-    this.tags = [], this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
+    this.tags = [], this.enabledModelTagSet.clear(), this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
   }
   show(e) {
-    return m(this, null, function* () {
+    return c(this, null, function* () {
       const { userAction: t = !0, withAnimation: i = !1 } = e != null ? e : {};
       if (this.store.disposed)
         return this.disposedErrorLog();
@@ -197,7 +233,7 @@ class Ot extends W {
     });
   }
   hide(e) {
-    return m(this, null, function* () {
+    return c(this, null, function* () {
       const { userAction: t = !0, withAnimation: i = !1 } = e != null ? e : {};
       if (this.store.disposed)
         return this.disposedErrorLog();
@@ -208,20 +244,20 @@ class Ot extends W {
     const { userAction: t = !0 } = e != null ? e : {};
     if (this.store.disposed)
       return this.disposedErrorLog();
-    this.setState({ enabled: !0 }, { userAction: t }), this.hooks.emit("enable", { userAction: t });
+    this.five.scene.children.includes(this.group) || this.five.scene.add(this.group), this.setState({ enabled: !0 }, { userAction: t }), this.hooks.emit("enable", { userAction: t }), this.five.needsRender = !0;
   }
   disable(e) {
     const { userAction: t = !0 } = e != null ? e : {};
     if (this.store.disposed)
       return this.disposedErrorLog();
-    this.setState({ enabled: !1 }, { userAction: t }), this.hooks.emit("disable", { userAction: t });
+    this.setState({ enabled: !1 }, { userAction: t }), this.five.scene.remove(this.group), this.hooks.emit("disable", { userAction: t }), this.five.needsRender = !0;
   }
   dispose() {
     var e, t, i, s, o, n;
     this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filter3DTag().forEach((r) => {
       var l;
       return (l = r.tag3DContentSvelte) == null ? void 0 : l.svelteApp.$destroy();
-    }), this.tags = [], (t = this.store.disposers) == null || t.forEach((r) => r == null ? void 0 : r()), this.store.disposers = [], this.store.disposed = !0, (s = (i = this.store).eventListenerDisposer) == null || s.call(i), this.store.eventListenerDisposer = void 0, (n = (o = this.store).resizeObserverDisposer) == null || n.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.clearCache(), this.hooks.emit("dispose");
+    }), this.tags = [], (t = this.store.disposers) == null || t.forEach((r) => r == null ? void 0 : r()), this.store.disposers = [], this.store.disposed = !0, (s = (i = this.store).eventListenerDisposer) == null || s.call(i), this.store.eventListenerDisposer = void 0, (n = (o = this.store).resizeObserverDisposer) == null || n.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.gltfObjectGroup.remove(...this.gltfObjectGroup.children), this.clearCache(), this.five.needsRender = !0, this.hooks.emit("dispose");
   }
   setState(e, t) {
     if (this.store.disposed)
@@ -240,18 +276,18 @@ class Ot extends W {
   }
   changeTagNormalById(e, t) {
     const i = this.getTagById(e);
-    !i || !i.tag3DContentSvelte || (i.tag3DContentSvelte.currentNormal = g(t), this.updateRenderPlaneTag());
+    !i || !i.tag3DContentSvelte || (i.tag3DContentSvelte.currentNormal = v(t), this.updateRenderPlaneTag());
   }
   changeDataById(e, t, i = !0) {
     const s = this.getTagById(e);
-    !s || (i ? s.data = c({}, s.data, t) : s.data = p(p({}, s.data), t), this.checkPanelTag(), this.updateRenderAllTags());
+    !s || (i ? s.data = u({}, s.data, t) : s.data = p(p({}, s.data), t), this.checkPanelTag(), this.updateRenderAllTags());
   }
   changeStickTypeById(e, t, i = !0) {
     this.changeTagById(e, t, i);
   }
   changeTagById(e, t, i = !0) {
     const s = this.getTagById(e);
-    !t || (i ? c(s, t) : Object.assign(s, t), (s == null ? void 0 : s.tag3DContentSvelte) && (t == null ? void 0 : t.normal) && (s.tag3DContentSvelte.currentNormal = g(t.normal)), this.updateRenderAllTags(), this.checkPanelTag());
+    !t || (i ? u(s, t) : Object.assign(s, t), (s == null ? void 0 : s.tag3DContentSvelte) && (t == null ? void 0 : t.normal) && (s.tag3DContentSvelte.currentNormal = v(t.normal)), this.updateRenderAllTags(), this.checkPanelTag());
   }
   destroyTagById(e) {
     (Array.isArray(e) ? e : [e]).forEach((i) => {
@@ -262,8 +298,20 @@ class Ot extends W {
   pauseCurrentMedia() {
     this.mediaStore.set({ currentMediaElement: null });
   }
+  updateTagCss3DObjectMatrix(e, t) {
+    var P, M, w, F;
+    const i = (w = (M = (P = e.mergedConfig) == null ? void 0 : P.tag3DConfig) == null ? void 0 : M.ratio) != null ? w : 216e-5, s = (F = e.tag3DContentSvelte) == null ? void 0 : F.domContainer.css3DObject;
+    if (!s)
+      return;
+    const o = m(e) ? e.data.mediaPosition : e.position;
+    t.updateWorldMatrix(!1, !1);
+    const n = t.matrixWorld, r = new T().fromArray(o[0]), l = new T().fromArray(o[2]), g = new T().lerpVectors(r, l, 0.5).add(new T(0, 0, 5e-4)), D = new C().setPosition(g), B = new C().makeScale(i, i, i), y = new C().multiply(n).multiply(D).multiply(B);
+    y.decompose(s.position, s.quaternion, s.scale);
+    const b = s.opacityMesh;
+    !b || y.decompose(b.position, b.quaternion, b.scale);
+  }
   setVisibleAndUnfolded() {
-    return m(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
+    return c(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
       if (!!this.isPanorama)
         return this.setVisibleByPanoIndex(), e ? new Promise((t, i) => {
           setTimeout(() => {
@@ -289,9 +337,9 @@ class Ot extends W {
     });
   }
   addEventListener() {
-    const { five: e, hooks: t } = this, i = this.handleFiveWantsMoveToPano.bind(this), s = this.handleFiveModeChange.bind(this), o = this.handleFiveCameraUpdate.bind(this), n = this.handleFiveCameraUpdateDebounce(), r = this.handleFivePanoArrived.bind(this), l = this.loadVideoFirstFrame.bind(this), b = this.clickhandler.bind(this);
-    return this.five.currentMode && (this.isPanorama ? (this.handleFivePanoArrived(), this.temporaryShow({ withAnimation: !0 })) : this.temporaryHide()), e.on("wantsMoveToPano", i), e.on("modeChange", s), e.on("cameraUpdate", o), e.on("cameraUpdate", n), e.on("panoArrived", r), e.on("panoArrived", l), t.on("click", b), () => {
-      e.off("wantsMoveToPano", i), e.off("modeChange", s), e.off("cameraUpdate", o), e.off("cameraUpdate", n), e.off("panoArrived", r), e.off("panoArrived", l), t.off("click", b), this.store.eventListenerDisposer = void 0;
+    const { five: e, hooks: t } = this, i = this.handleFiveWantsMoveToPano.bind(this), s = this.handleFiveModeChange.bind(this), o = this.handleFiveCameraUpdate.bind(this), n = this.handleFiveCameraUpdateDebounce(), r = this.handleFivePanoArrived.bind(this), l = this.loadVideoFirstFrame.bind(this), g = this.clickhandler.bind(this), D = this.five.currentMode;
+    return this.handleFiveModeChange(D), this.handleFivePanoArrived(), e.on("wantsMoveToPano", i), e.on("modeChange", s), e.on("initAnimationEnded", this.handleFiveInitAnimationEnded), e.on("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.on("cameraUpdate", o), e.on("cameraUpdate", n), e.on("panoArrived", r), e.on("panoArrived", l), t.on("click", g), () => {
+      e.off("wantsMoveToPano", i), e.off("modeChange", s), e.off("initAnimationEnded", this.handleFiveInitAnimationEnded), e.off("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.off("cameraUpdate", o), e.off("cameraUpdate", n), e.off("panoArrived", r), e.off("panoArrived", l), t.off("click", g), this.store.eventListenerDisposer = void 0;
     };
   }
   loadVideoFirstFrame() {
@@ -312,13 +360,13 @@ class Ot extends W {
       !this.state.enabled || (this.show(), this.updateRenderAllTags());
     }, i = () => {
       !this.state.enabled || this.hide();
-    }, { observe: s, unobserve: o } = D(
-      z(() => {
+    }, { observe: s, unobserve: o } = I(
+      K(() => {
         !this.store.resizeObserverDisposer || i();
       }, 500),
       e
-    ), { observe: n, unobserve: r } = D(
-      C(() => t(), 400),
+    ), { observe: n, unobserve: r } = I(
+      k(() => t(), 400),
       e
     );
     return s(), n(), () => {
@@ -326,7 +374,9 @@ class Ot extends W {
     };
   }
   handleFiveModeChange(e) {
-    e === "Panorama" ? this.five.once("panoArrived", () => this.temporaryShow({ withAnimation: !0 })) : this.temporaryHide();
+    this.tags.forEach((t) => {
+      t.temporaryState = f(p({}, t.temporaryState), { visible: this.getVisibelByFiveMode(t, e) }), m(t) && e !== "Panorama" && this.changeTagMode(t, "behind");
+    }), this.updateRenderAllTags(), this.updateRenderAllTags();
   }
   handleFiveWantsMoveToPano() {
     this.tags.forEach((e) => {
@@ -351,7 +401,7 @@ class Ot extends W {
     }), this.updateRenderAllTags());
   }
   updateRenderAllTags() {
-    this.updateRenderPointTag(), this.updateRenderPlaneTag();
+    this.enabledModelTagSet.clear(), this.tags.forEach((e) => e.stickType === "Model" && this.enabledModelTagSet.add(e.id)), this.updateRenderPointTag(), this.updateRenderPlaneTag(), this.updateRenderModelTag();
   }
   updateTagContainerVisible() {
     var e;
@@ -369,7 +419,7 @@ class Ot extends W {
     });
   }
   handleFiveCameraUpdateDebounce() {
-    return C(() => {
+    return k(() => {
       this.setUnfoldedByCamera(), this.updateRenderAllTags();
     }, 100);
   }
@@ -377,8 +427,8 @@ class Ot extends W {
     this.updateRenderPointTag();
   }
   handleFivePanoArrived() {
-    return m(this, null, function* () {
-      yield this.setVisibleAndUnfolded(), this.tags.forEach((e) => {
+    return c(this, null, function* () {
+      yield this.setVisibleAndUnfolded(), this.setModelMedialVisibleByPanoIndex(), this.tags.forEach((e) => {
         e.temporaryState = f(p({}, e.temporaryState), { visible: !0 });
       }), this.store.visibleWithAnimation = !0, this.updateTagContainerVisible();
     });
@@ -402,14 +452,14 @@ class Ot extends W {
       const i = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
       if (!i)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new O({
+      this.TagContainerSvelte = new q({
         target: i,
         props: { hooks: this.hooks, tags: e, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
       });
     }
   }
   updateRenderPlaneTag() {
-    this.sort([...this.filterPlaneTag(), ...this.filter3DPointTag()]).forEach((t) => {
+    this.sort([...this.filterPlaneTag(), ...this.filter3DPointTag(), ...this.filterModelTag()]).forEach((t) => {
       var i;
       if (t.tag3DContentSvelte) {
         const { svelteApp: s, domContainer: o, initialNormal: n, currentNormal: r } = t.tag3DContentSvelte;
@@ -419,24 +469,41 @@ class Ot extends W {
           state: this.state,
           temporaryState: this.temporaryState
         }), !n.equals(r)) {
-          const l = new U().setFromUnitVectors(n, r);
+          const l = new _().setFromUnitVectors(n, r);
           o.css3DObject.setRotationFromQuaternion(l);
         }
       } else {
         if (((i = t.state) == null ? void 0 : i.visible) === !1)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = _(this.five)), t.stickType === "3DPoint" && !t.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = Z(this.five)), t.stickType === "3DPoint" && !t.normal)
           return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
-        const s = t.stickType === "Plane" ? t.position : V(this.five.camera.position, g(t.position), g(t.normal)), o = t.stickType === "Plane" ? M(t.position) : g(t.normal), n = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(s, n);
+        const s = (() => t.stickType === "Plane" ? t.position : t.stickType === "Model" && t.contentType === "MediaModel" ? ie(t) : X(
+          this.five.camera.position,
+          v(t.position),
+          v(t.normal)
+        ))();
+        if (!s)
+          return;
+        const o = function() {
+          if (t.normal)
+            return v(t.normal);
+          if (t.stickType === "Plane")
+            return O(t.position);
+          if (t.contentType === "MediaModel")
+            return O(s);
+        }();
+        if (!o)
+          return;
+        const n = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(s, n);
         if (!r)
           return;
         this.store.css3DRenderDisposer.set(t.id, r.dispose), t.tag3DContentSvelte = {
-          svelteApp: new I({
+          svelteApp: new H({
             target: r.container,
             props: {
               tag: t,
               hooks: this.hooks,
-              state: this.state,
+              state: t.contentType === "MediaModel" ? f(p({}, this.state), { visible: !1 }) : this.state,
               mediaStore: this.mediaStore,
               temporaryState: this.temporaryState
             }
@@ -448,6 +515,15 @@ class Ot extends W {
       }
     }), this.checkPanelTag();
   }
+  updateRenderModelTag() {
+    const e = (i) => !this.enabledModelTagSet.has(i.customID);
+    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(e)), this.tags.filter(m).forEach((i) => {
+      var s;
+      (s = i.model) == null || s.promise.then((o) => {
+        o.visible = i.state.visible;
+      });
+    });
+  }
   disposeAllCSS3DContainer() {
     for (const [e, t] of this.store.css3DRenderDisposer)
       t == null || t();
@@ -463,9 +539,19 @@ class Ot extends W {
       (!i || i.stickType === "2DPoint") && (t == null || t(), this.store.css3DRenderDisposer.delete(e));
     }
   }
+  addMediaModelTag(e) {
+    return c(this, null, function* () {
+      const t = e.filter(m).map(this.loadModel);
+      yield Promise.all(t), this.five.getCurrentState().mode === "Panorama" && this.setModelMedialVisibleByPanoIndex(), this.updateRenderAllTags();
+    });
+  }
+  changeTagMode(e, t) {
+    var i, s, o, n, r;
+    ((o = (s = (i = e.tag3DContentSvelte) == null ? void 0 : i.domContainer) == null ? void 0 : s.css3DObject) == null ? void 0 : o.mode) !== t && ((n = e.config) != null && n.tag3DConfig ? e.config.tag3DConfig.mode = t : e.config ? e.config.tag3DConfig = { mode: t } : e.config = { tag3DConfig: { mode: t } }, (r = this.store.css3DRenderDisposer.get(e.id)) == null || r(), e.tag3DContentSvelte = void 0);
+  }
 }
 export {
-  Ot as PanoTagPluginController,
-  Ot as default,
-  Lt as pluginFlag
+  Qt as PanoTagPluginController,
+  Qt as default,
+  Jt as pluginFlag
 };

package/libs/PanoTagPlugin/index.js

@@ -1,7 +1,8 @@
 import t from "./controller/index.js";
-import { default as Wo, pluginFlag as Xo } from "./controller/index.js";
-import { ContentType as Zo } from "./typings/tag/TagData.js";
-import { DimensionType as $o, PointType as or } from "./typings/tag/Utils.js";
+import { default as Zo, pluginFlag as _o } from "./controller/index.js";
+import "@realsee/five/gltf-loader";
+import { ContentType as or } from "./typings/tag/TagData.js";
+import { DimensionType as tr, PointType as pr } from "./typings/tag/Utils.js";
 import "@realsee/five";
 import "three";
 import "object-assign-deep";
@@ -64,6 +65,7 @@ import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "../shared-utils/animationFrame/BetterTween.js";
 import "../shared-utils/animationFrame/index.js";
+import "./utils/tag/tagCheck.js";
 import "./Components/Tag/AudioTag/index.js";
 import "./Components/Tag/AudioTag/AudioTag.js";
 import "./Components/Common/Audio.js";
@@ -87,7 +89,6 @@ import "./utils/throttle.js";
 import "./utils/resizeObserver.js";
 import "./controller/TagComputer.js";
 import "./tag.config.js";
-import "./utils/tag/tagCheck.js";
 import "./utils/tagPosition.js";
 import "./utils/checkRange.js";
 import "./controller/TagCacheController.js";
@@ -96,13 +97,15 @@ import "../CSS3DRenderPlugin/index.js";
 import "../CSS3DRenderPlugin/Controller.js";
 import "../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "./utils/tag/format.js";
-const So = (o, r) => new t(o, r);
+import "../shared-utils/three/GLTFLoader.js";
+import "./utils/tag/index.js";
+const Wo = (o, r) => new t(o, r);
 export {
-  Zo as ContentType,
-  $o as DimensionType,
-  So as PanoTagPlugin,
-  Wo as PanoTagPluginController,
-  or as PointType,
-  So as default,
-  Xo as pluginFlag
+  or as ContentType,
+  tr as DimensionType,
+  Wo as PanoTagPlugin,
+  Zo as PanoTagPluginController,
+  pr as PointType,
+  Wo as default,
+  _o as pluginFlag
 };

package/libs/PanoTagPlugin/tag.config.js

@@ -50,6 +50,15 @@ const e = {
       visibleConfig: {
         alwaysShowWhenMovePano: !0
       }
+    },
+    MediaModel: {
+      unfoldedConfig: {
+        keep: "unfolded"
+      },
+      visibleConfig: {
+        keep: "visible",
+        alwaysShowWhenMovePano: !0
+      }
     }
   }
 };