@realsee/dnalogel 2.8.5 → 2.9.0-0

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -0,0 +1,152 @@
+var l = Object.defineProperty;
+var f = (o, e, t) => e in o ? l(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var i = (o, e, t) => (f(o, typeof e != "symbol" ? e + "" : e, t), t);
+import { vertexShader as p, fragmentShader as m } from "./utils/shader.js";
+import "hammerjs";
+import { VideoTexture as g, LinearFilter as v, ShaderMaterial as F, Vector4 as c, SphereBufferGeometry as E, Mesh as A, Quaternion as D, Vector3 as I } from "three";
+import "@realsee/five";
+import "@tweenjs/tween.js";
+import "../CSS3DRenderPlugin/CSS3DRender.js";
+import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { requestAnimationFrameInterval as M } from "../shared-utils/animationFrame/index.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../CSS3DRenderPlugin/utils/even.js";
+import "../shared-utils/Subscribe.js";
+import "../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/centerPoint.js";
+import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+class j {
+  constructor(e, t) {
+    i(this, "_id");
+    i(this, "url");
+    i(this, "five");
+    i(this, "panoIndex");
+    i(this, "origin");
+    i(this, "video");
+    i(this, "videoMesh");
+    i(this, "_enabled", !0);
+    i(this, "_disposed", !1);
+    i(this, "hasVideoEverPlayed", !1);
+    i(this, "renderFiveDisposer");
+    i(this, "onFiveDataLoaded", () => {
+      var d;
+      const e = (d = this.five.work) == null ? void 0 : d.observers[this.panoIndex];
+      if (!e)
+        return this.logWarning(`\u70B9\u4F4D ${this.panoIndex} \u4E0D\u5B58\u5728\uFF0C\u8BF7\u68C0\u67E5 Five \u6570\u636E\u662F\u5426\u6B63\u5E38\u3002`);
+      const { x: t, y: n, z: r, w: h } = e.quaternion, a = new D(t, n, r, h), s = e.position;
+      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new I(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(a);
+    });
+    i(this, "onFiveWantsMoveToPano", (e) => {
+      e === this.panoIndex && (this.hasVideoEverPlayed || this.video.play().catch((t) => {
+        console.log("\u{1F436} ==> error:", t);
+      }));
+    });
+    i(this, "onFivePanoArrived", (e) => {
+      if (this.disposed)
+        return this.logWarning("\u5B9E\u4F8B\u5DF2\u88AB\u9500\u6BC1");
+      !this.enabled || this.panoIndex === e && this.mount();
+    });
+    i(this, "onFivePanoWillArrive", (e) => {
+      if (e !== this.panoIndex)
+        return this.unmount();
+      this.panoIndex !== e && this.unmount();
+    });
+    i(this, "onFiveModeChange", (e) => {
+      e !== "Panorama" && this.hide();
+    });
+    i(this, "onFiveInitAnimationEnded", () => {
+      const e = this.five.getCurrentState();
+      e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.mount();
+    });
+    i(this, "onVideoPlaying", () => {
+      this.hasVideoEverPlayed = !0, this.video.src !== "" && (this.renderFiveDisposer = M(() => {
+        this.five.needsRender = !0;
+      }), this.five.scene.add(this.videoMesh));
+    });
+    i(this, "onVideoPaused", () => {
+      var e;
+      (e = this.renderFiveDisposer) == null || e.call(this);
+    });
+    var d, u;
+    this.five = e, this.panoIndex = t.panoIndex, this._id = t.renderID, this.url = t.url, this.origin = t.origin.slice(), this._enabled = (u = (d = t.initialState) == null ? void 0 : d.enabled) != null ? u : !0;
+    const n = document.createElement("video");
+    n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !1, n.playsInline = !0, this.video = n;
+    const r = new g(this.video);
+    r.minFilter = v, r.magFilter = v;
+    const h = new F({
+      vertexShader: p,
+      fragmentShader: m,
+      uniforms: {
+        map: { value: r },
+        size: {
+          value: new c(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
+        }
+      },
+      depthTest: !0,
+      transparent: !0
+    }), a = new E(1, 64, 64);
+    a.scale(-1, 1, 1);
+    const s = new A(a, h);
+    s.name = "pano-video", this.videoMesh = s, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
+  }
+  get renderID() {
+    return this._id;
+  }
+  get disposed() {
+    return this._disposed;
+  }
+  get enabled() {
+    return this._enabled;
+  }
+  dispose() {
+    this.disposed || (this.disable(), this._disposed = !0);
+  }
+  enable() {
+    this.disposed || this.enabled || (this._enabled = !0, this.addEventListeners(), this.mountIfNeeded());
+  }
+  disable() {
+    this.disposed || !this.enabled || (this._enabled = !1, this.removeEventListeners(), this.unmount());
+  }
+  addEventListeners() {
+    this.five.on("loaded", this.onFiveDataLoaded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.addEventListener("playing", this.onVideoPlaying);
+  }
+  removeEventListeners() {
+    this.five.off("loaded", this.onFiveDataLoaded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("wantsMoveToPano", this.onFiveWantsMoveToPano), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.video.removeEventListener("playing", this.onVideoPlaying);
+  }
+  mountIfNeeded() {
+    const e = this.five.getCurrentState();
+    e.mode === "Panorama" && e.panoIndex === this.panoIndex && this.enabled && this.mount();
+  }
+  mount() {
+    if (this.disposed)
+      return this.logWarning("\u63D2\u4EF6\u5DF2\u7ECF\u9500\u6BC1\uFF0C\u65E0\u6CD5\u6302\u8F7D\u3002");
+    if (this.url === "")
+      return this.logWarning("\u89C6\u9891\u8D44\u6E90\u4E0D\u5B58\u5728\u3002");
+    this.video.src !== this.url && (this.video.src = this.url), this.video.paused && this.video.play().catch((e) => {
+      this.logWarning(e instanceof Error ? e.message : "\u89C6\u9891\u64AD\u653E\u5931\u8D25\u3002"), this.five.once("gesture", () => {
+        this.video.play().catch((t) => {
+          this.logWarning(t instanceof Error ? t.message : "\u81EA\u52A8\u64AD\u653E\u89C6\u9891\u5931\u8D25\u3002");
+        });
+      });
+    });
+  }
+  unmount() {
+    this.video.pause(), this.video.src !== "" && (this.video.src = ""), this.five.scene.remove(this.videoMesh);
+  }
+  hide() {
+    this.video.pause(), this.five.scene.remove(this.videoMesh);
+  }
+  logWarning(e) {
+    console.warn("\u26D4 ==> [VideoMeshController]:", e);
+  }
+}
+export {
+  j as VideoMeshController
+};

package/libs/PanoVideoPlugin/index.d.ts

@@ -0,0 +1,16 @@
+import type { FivePlugin } from '@realsee/five';
+import { PanoVideoPluginController } from './Controller';
+import * as _PanoVideoPluginType from './typings';
+/** 点位视频播放插件
+ * - 支持一次性加载多组数据。
+ * - 走到点位上时播放视频（可能是多个）。
+ * - 走出点位时销毁视频。
+ * - 允许动态开启和禁用功能。
+ * - 视频只能在全景模式且点位一致时才会播放。不满足条件会自动销毁。
+ * - 不做多媒体缓存，缓解内存占用。
+ */
+export declare const PanoVideoPlugin: FivePlugin<undefined, PanoVideoPluginController>;
+export { _PanoVideoPluginType as PanoVideoPluginType };
+export declare type PanoVideoPluginParameterType = undefined;
+export declare type PanoVideoPluginReturnType = InstanceType<typeof PanoVideoPluginController>;
+export default PanoVideoPlugin;

package/libs/PanoVideoPlugin/index.js

@@ -0,0 +1,31 @@
+import { PanoVideoPluginController as r } from "./Controller.js";
+import { typings as z } from "./typings/index.js";
+import "./VideoMeshController.js";
+import "./utils/shader.js";
+import "hammerjs";
+import "three";
+import "@realsee/five";
+import "@tweenjs/tween.js";
+import "../CSS3DRenderPlugin/CSS3DRender.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../CSS3DRenderPlugin/utils/even.js";
+import "../shared-utils/Subscribe.js";
+import "../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/centerPoint.js";
+import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../shared-utils/animationFrame/index.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+import "../base/BasePlugin.js";
+const k = (o) => new r(o);
+export {
+  k as PanoVideoPlugin,
+  z as PanoVideoPluginType,
+  k as default
+};

package/libs/PanoVideoPlugin/typings/index.js

@@ -0,0 +1,6 @@
+const e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  e as typings
+};

package/libs/PanoVideoPlugin/typings.d.ts

@@ -0,0 +1,64 @@
+import type * as BasePlugin from '../base/BasePlugin';
+/** 单个视频元素 */
+export interface VideoItem {
+    /** client render ID
+     * @remarks 为什么不用 id 作为唯一标识？
+     * - id 是后端生成的，而 render_id 是前端生成的，在编辑时为了保证在请求后端数据之前也能进行渲染，使用额外的 id 进行渲染。
+     * - 为了保证两端的数据一致性，插件里使用 render_id 作为唯一 ID。
+     */
+    render_id: string;
+    /** 文件地址 */
+    url: string;
+    /** 算法处理的视频 uv 信息
+     * @description [left, top, width, height]
+     */
+    origin: number[];
+}
+/** 点位视频元素 */
+export interface PanoVideoItem {
+    /** client render ID */
+    render_id: string;
+    /** 视频播放点位 */
+    pano_index: number;
+    /** 视频列表 */
+    video_list: VideoItem[];
+}
+/** 点位视频模型参数 */
+export interface VideoMeshParams {
+    /** client render ID */
+    renderID: string;
+    /** video 文件地址 */
+    url: string;
+    /** 算法处理的视频 uv 信息
+     * @description [left, top, width, height]
+     */
+    origin: number[];
+    /** 视频播放点位 */
+    panoIndex: number;
+    /** 初始状态 */
+    initialState?: {
+        enabled?: boolean;
+    };
+}
+/** 加载数据时的额外参数 */
+export interface LoadParams {
+    initialState?: {
+        enabled?: boolean;
+    };
+}
+export interface PluginState {
+    enabled: boolean;
+}
+export interface PluginData {
+    list: PanoVideoItem[];
+}
+export interface PluginEventMap extends BasePlugin.EventMap<PluginState> {
+    /** 点位视频模型开启 */
+    enable: (params: {
+        userAction: boolean;
+    }) => void;
+    /** 点位视频模型关闭 */
+    disable: (params: {
+        userAction: boolean;
+    }) => void;
+}

package/libs/PanoVideoPlugin/typings.js

@@ -0,0 +1 @@
+

package/libs/PanoVideoPlugin/utils/shader.d.ts

@@ -0,0 +1,2 @@
+export declare const vertexShader = "\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  vec4 mvPosition = modelViewMatrix * vec4(position, 1);\n  gl_Position = projectionMatrix * mvPosition;\n}\n";
+export declare const fragmentShader = "\nuniform sampler2D map;\nuniform vec4 size;\nvarying vec2 vUv;\n\nvoid main() {\n  vec2 uv = vec2((vUv.x - size[0]) / size[2], (vUv.y - size[1]) / size[3]);\n  float a = 0.1;\n  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);\n  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);\n\tfloat match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);\n  gl_FragColor = vec4(texture2D(map, uv).xyz, match);\n}\n";

package/libs/PanoVideoPlugin/utils/shader.js

@@ -0,0 +1,25 @@
+const v = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  vec4 mvPosition = modelViewMatrix * vec4(position, 1);
+  gl_Position = projectionMatrix * mvPosition;
+}
+`, a = `
+uniform sampler2D map;
+uniform vec4 size;
+varying vec2 vUv;
+
+void main() {
+  vec2 uv = vec2((vUv.x - size[0]) / size[2], (vUv.y - size[1]) / size[3]);
+  float a = 0.1;
+  float transX = uv.x < a ? 1.0 / a * uv.x : (uv.x > (1.0 - a) ? 1.0 / a * (1.0 - uv.x) : 1.0);
+  float transY = uv.y < a ? 1.0 / a * uv.y : (uv.y > (1.0 - a) ? 1.0 / a * (1.0 - uv.y) : 1.0);
+	float match = (1.0 - step(0.5, abs(uv.x - 0.5))) * (1.0 - step(0.5, abs(uv.y - 0.5))) * (transX < transY ? transX : transY);
+  gl_FragColor = vec4(texture2D(map, uv).xyz, match);
+}
+`;
+export {
+  a as fragmentShader,
+  v as vertexShader
+};

package/libs/base/BasePlugin.d.ts

@@ -83,6 +83,12 @@ declare abstract class Controller<PluginState extends State, PluginEventMap exte
      * 隐藏UI
      */
     hide?(options?: BaseOptions): Promise<void>;
+    /**
+     * 设置state
+     * @param state 插件的目标状态
+     * @param options 配置项
+     */
+    setState?(state: Partial<PluginState>, options?: BaseOptions): void;
     /**
      * 启用插件，让插件能够响应交互
      */
@@ -95,12 +101,6 @@ declare abstract class Controller<PluginState extends State, PluginEventMap exte
      * 插件进行销毁
      */
     abstract dispose(): void;
-    /**
-     * 设置state
-     * @param state 插件的目标状态
-     * @param options 配置项
-     */
-    abstract setState(state: Partial<PluginState>, options?: BaseOptions): void;
 }
 export type { State, EventMap, BaseOptions };
 export { Controller };

package/package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.8.5",
+  "version": "2.9.0-0",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "clean": "rm -rf components dist docs libs types ./vite.config.js.timestamp*",