@realsee/dnalogel 2.0.5-alpha.4 → 2.0.5-alpha.6

package/libs/ModelTVVideoPlugin/Plugin.js

@@ -1,6 +1,6 @@
-import * as d from "three";
-import { parseModelTVVideoPoints as I } from "./utils/parseData.js";
-import { CSS3DRenderPlugin as z } from "../CSS3DRenderPlugin/index.js";
+import * as c from "three";
+import { parseModelTVVideoPoints as z } from "./utils/parseData.js";
+import { CSS3DRenderPlugin as O } from "../CSS3DRenderPlugin/index.js";
 import "./typings.js";
 import "../CSS3DRenderPlugin/Controller.js";
 import "../CSS3DRenderPlugin/CSS3DRender.js";
@@ -10,30 +10,32 @@ import "../CSS3DRenderPlugin/utils/evenNumber.js";
 import "../CSS3DRenderPlugin/utils/positionToVector3.js";
 import "../CSS3DRenderPlugin/utils/CSS3DObjectPlus.js";
 import "../CSS3DRenderPlugin/utils/centerPoint.js";
-const q = (i, { videoElement: E }) => {
+const W = (d, { videoElement: M }) => {
   const t = {
     videoMeshes: [],
     videoTextureEnabled: !1,
     videoSource: "",
     rectPoints: [],
     enabled: !1,
-    videoElement: E
-  }, f = z(i), y = /* @__PURE__ */ new Map(), M = (e) => {
+    videoElement: M
+  }, f = O(d), p = /* @__PURE__ */ new Map(), A = (e) => {
     t.videoTexture && (t.videoTexture.image.muted = e);
-  }, A = () => t.videoTexture ? t.videoTexture.image.muted : !0, x = () => {
+  }, R = () => t.videoTexture ? t.videoTexture.image.muted : !0, x = () => {
     if (t.enabled || !t.videoTexture)
       return;
-    t.enabled = !0, t.videoMeshes = R(), t.videoMeshes.forEach((o) => i.scene.add(o));
+    t.enabled = !0, t.videoMeshes = F(), t.videoMeshes.forEach((r) => d.scene.add(r)), p.forEach((r) => {
+      r.enable();
+    });
     const e = () => {
       if (!t.videoTexture)
         return;
-      const o = () => {
+      const r = () => {
         var s;
-        !t.videoTexture || ((s = t.videoTexture) == null || s.image.removeEventListener("timeupdate", o), t.videoTextureEnabled = !0, t.videoMeshes.forEach((n) => {
+        !t.videoTexture || ((s = t.videoTexture) == null || s.image.removeEventListener("timeupdate", r), t.videoTextureEnabled = !0, t.videoMeshes.forEach((n) => {
           n.material.map !== t.videoTexture && (n.material.map = t.videoTexture);
-        }), i.needsRender = !0);
+        }), d.needsRender = !0);
       };
-      t.videoTexture.image.addEventListener("timeupdate", o), t.videoTexture && t.videoMeshes.length && (t.videoTexture.image.play(), t.videoTexture.image.onplay = () => {
+      t.videoTexture.image.addEventListener("timeupdate", r), t.videoTexture && t.videoMeshes.length && (t.videoTexture.image.play(), t.videoTexture.image.onplay = () => {
         f.hide();
       }, t.videoTexture.image.onpause = () => {
         f.show();
@@ -41,118 +43,118 @@ const q = (i, { videoElement: E }) => {
         t.videoTexture.image.muted = !1, t.videoTexture.image.play();
       });
     };
-    if (i.model.loaded)
+    if (d.model.loaded)
       e();
     else
-      return i.once("modelLoaded", () => e());
+      return d.once("modelLoaded", () => e());
     b();
   }, T = () => {
     !t.enabled || (t.enabled = !1, t.videoMeshes.forEach((e) => {
-      e.geometry.dispose(), e.material.dispose(), i.scene.remove(e), t.videoTexture && t.videoTexture.image.pause();
-    }), t.videoMeshes = [], i.needsRender = !0);
-  }, R = () => t.rectPoints.map((e, o) => {
-    const s = new d.BufferGeometry(), n = 128, a = [];
+      e.geometry.dispose(), e.material.dispose(), d.scene.remove(e), t.videoTexture && t.videoTexture.image.pause();
+    }), p.forEach((e) => {
+      e.disable();
+    }), t.videoMeshes = [], d.needsRender = !0);
+  }, F = () => t.rectPoints.map((e, r) => {
+    const s = new c.BufferGeometry(), n = 128, a = [];
     a.push(...e[0].toArray());
-    for (let r = 1; r < n; r++)
+    for (let o = 1; o < n; o++)
       a.push(
-        e[0].x + (e[1].x - e[0].x) * r / n,
-        e[0].y + (e[1].y - e[0].y) * r / n,
-        e[0].z + (e[1].z - e[0].z) * r / n
+        e[0].x + (e[1].x - e[0].x) * o / n,
+        e[0].y + (e[1].y - e[0].y) * o / n,
+        e[0].z + (e[1].z - e[0].z) * o / n
       );
     a.push(...e[1].toArray()), a.push(...e[2].toArray());
-    for (let r = 1; r < n; r++)
+    for (let o = 1; o < n; o++)
       a.push(
-        e[2].x + (e[3].x - e[2].x) * r / n,
-        e[2].y + (e[3].y - e[2].y) * r / n,
-        e[2].z + (e[3].z - e[2].z) * r / n
+        e[2].x + (e[3].x - e[2].x) * o / n,
+        e[2].y + (e[3].y - e[2].y) * o / n,
+        e[2].z + (e[3].z - e[2].z) * o / n
       );
     a.push(...e[3].toArray());
-    const c = [];
-    c.push(0, 1);
-    for (let r = 1; r < n; r++)
-      c.push(0, 1 - r / n);
-    c.push(0, 0), c.push(1, 0);
-    for (let r = 1; r < n; r++)
-      c.push(1, r / n);
-    c.push(1, 1);
+    const i = [];
+    i.push(0, 1);
+    for (let o = 1; o < n; o++)
+      i.push(0, 1 - o / n);
+    i.push(0, 0), i.push(1, 0);
+    for (let o = 1; o < n; o++)
+      i.push(1, o / n);
+    i.push(1, 1);
     const u = [];
-    for (let r = 0; r < n; r++)
-      u.push(r, r + 1, n * 2 - r, r, n * 2 - r, n * 2 + 1 - r);
-    s.setAttribute("position", new d.BufferAttribute(new Float32Array(a), 3)), s.setAttribute("uv", new d.BufferAttribute(new Float32Array(c), 2)), s.setIndex(new d.BufferAttribute(new Uint32Array(u), 1));
-    const m = new d.MeshBasicMaterial({
+    for (let o = 0; o < n; o++)
+      u.push(o, o + 1, n * 2 - o, o, n * 2 - o, n * 2 + 1 - o);
+    s.setAttribute("position", new c.BufferAttribute(new Float32Array(a), 3)), s.setAttribute("uv", new c.BufferAttribute(new Float32Array(i), 2)), s.setIndex(new c.BufferAttribute(new Uint32Array(u), 1));
+    const m = new c.MeshBasicMaterial({
       map: t.videoTextureEnabled ? t.videoTexture : t.imageTexture,
-      side: d.DoubleSide
-    }), l = new d.Mesh(s, m);
-    l.renderOrder = 1, l.name = `ModelTVVideoPlugin-${o}-${performance.now()}`;
-    const S = [e[1], e[2], e[3], e[0]], p = f.create3DDomContainer(S);
-    if (p != null && p.container) {
-      const r = document.createElement("div");
-      r.classList.add("play-icon"), r.style.width = "100%", r.style.height = "100%", r.style.display = "flex", r.style.justifyContent = "center", r.style.alignItems = "center", r.style.pointerEvents = "none", p.container.appendChild(r);
-      const h = document.createElement("img");
-      h.src = "//vrlab-static.ljcdn.com/release/web/play.2ada5b6f.png", h.style.width = "200px", h.style.pointerEvents = "auto", h.onclick = () => {
+      side: c.DoubleSide
+    }), l = new c.Mesh(s, m);
+    l.renderOrder = 1, l.name = `ModelTVVideoPlugin-${r}-${performance.now()}`;
+    const I = [e[1], e[2], e[3], e[0]], h = f.create3DDomContainer(I);
+    if (h != null && h.container) {
+      const o = document.createElement("div");
+      o.classList.add("play-icon"), o.style.width = "100%", o.style.height = "100%", o.style.display = "flex", o.style.justifyContent = "center", o.style.alignItems = "center", o.style.pointerEvents = "none", h.container.appendChild(o);
+      const y = document.createElement("img");
+      y.src = "//vrlab-static.ljcdn.com/release/web/play.2ada5b6f.png", y.style.width = "200px", y.style.pointerEvents = "auto", y.onclick = () => {
         t.videoTexture.image.muted = !1, t.videoTexture.image.play();
-      }, r.appendChild(h), y.set(l, p);
+      }, o.appendChild(y), p.set(l, h);
     }
     return l;
-  }), F = (e) => {
-    const o = new d.TextureLoader().load(e);
-    return o.minFilter = d.LinearFilter, o.magFilter = d.LinearFilter, o.format = d.RGBFormat, o;
-  }, P = (e, o) => new Promise((s, n) => {
+  }), P = (e) => {
+    const r = new c.TextureLoader().load(e);
+    return r.minFilter = c.LinearFilter, r.magFilter = c.LinearFilter, r.format = c.RGBFormat, r;
+  }, L = (e, r) => new Promise((s, n) => {
     const a = new XMLHttpRequest();
     a.onreadystatechange = () => {
       if (a.readyState == 4)
         if (a.status == 200) {
-          const c = window.URL || window.webkitURL;
-          o = o || document.createElement("video"), o.crossOrigin = "anonymous", o.muted = !0, o.loop = !0, o.playsInline = !0, o.src = c.createObjectURL(a.response);
-          const u = new d.VideoTexture(o);
-          u.minFilter = d.LinearFilter, u.magFilter = d.LinearFilter, u.format = d.RGBFormat, s(Object.assign(u, { videoSource: e }));
+          const i = window.URL || window.webkitURL;
+          r = r || document.createElement("video"), r.crossOrigin = "anonymous", r.muted = !0, r.loop = !0, r.playsInline = !0, r.src = i.createObjectURL(a.response);
+          const u = new c.VideoTexture(r);
+          u.minFilter = c.LinearFilter, u.magFilter = c.LinearFilter, u.format = c.RGBFormat, s(Object.assign(u, { videoSource: e }));
         } else
           n(new Error("Video download Error: " + a.status));
-    }, a.onerror = (c) => n(c), a.open("GET", e), a.responseType = "blob", a.send();
-  }), L = async (e, o) => {
+    }, a.onerror = (i) => n(i), a.open("GET", e), a.responseType = "blob", a.send();
+  }), V = async (e, r) => {
+    p.forEach((i) => i.dispose()), p.clear();
     const { video_src: s, video_poster_src: n, points: a } = e;
-    t.videoSource = s, t.rectPoints = I(a).map((c) => c.map(({ x: u, y: m, z: l }) => new d.Vector3(u, m, l))), t.imageTexture = F(n), o && (t.videoElement = o), t.videoTexture = await P(t.videoSource, t.videoElement), t.enabled = !!e.enable, t.enabled && x();
+    t.videoSource = s, t.rectPoints = z(a).map((i) => i.map(({ x: u, y: m, z: l }) => new c.Vector3(u, m, l))), t.imageTexture = P(n), r && (t.videoElement = r), t.videoTexture = await L(t.videoSource, t.videoElement), t.enabled = !!e.enable, t.enabled && x();
   }, g = (e) => {
     if (!t.enabled)
       return;
-    const o = t.videoMeshes;
-    if (!(!o || e.intersectObjects(o).length === 0))
+    const r = t.videoMeshes;
+    if (!(!r || e.intersectObjects(r).length === 0))
       return t.videoTexture && (t.videoTexture.image.paused || t.videoTexture.image.pause()), !1;
   }, v = (e) => {
-    e === "Floorplan" ? f.hide() : t.videoTexture.image.paused ? f.show() : f.hide();
+    var r;
+    e === "Floorplan" ? f.hide() : (r = t.videoTexture) != null && r.image.paused ? f.show() : f.hide();
   }, b = () => {
     if (!t.enabled)
       return;
-    const e = i.camera.position;
-    if (y.forEach((o, s) => {
-      const n = o.css3DObject.position.clone(), a = n.clone().sub(e).normalize(), c = new d.Raycaster(e, a), u = i.model.intersectRaycaster(c)[0], m = n.distanceTo(e), l = 0.01;
-      u && u.distance + l < m ? o.hide() : o.show();
-    }), !A()) {
-      const o = t.rectPoints.find((s) => {
+    const e = d.camera.position;
+    if (p.forEach((r, s) => {
+      const n = r.css3DObject.position.clone(), a = n.clone().sub(e).normalize(), i = new c.Raycaster(e, a), u = d.model.intersectRaycaster(i)[0], m = n.distanceTo(e), l = 0.01;
+      u && u.distance + l < m ? r.hide() : r.show();
+    }), !R()) {
+      const r = t.rectPoints.find((s) => {
         const n = s[0].clone().add(s[1]).add(s[2]).add(s[3]).divideScalar(4);
         return s.map((a) => a.clone().add(n).divideScalar(2)).filter((a) => {
-          const c = a.distanceTo(e), u = new d.Raycaster(e, a.clone().sub(e).normalize()), m = i.model.intersectRaycaster(u)[0], l = 0.01;
-          return !(m && m.distance + l < c);
+          const i = a.distanceTo(e), u = new c.Raycaster(e, a.clone().sub(e).normalize()), m = d.model.intersectRaycaster(u)[0], l = 0.01;
+          return !(m && m.distance + l < i);
         }).length >= 2;
       });
-      (!o || o.length === 0) && M(!0);
+      (!r || r.length === 0) && A(!0);
     }
   }, w = () => {
     b();
-  }, V = () => {
-    T(), t.videoTexture = void 0, i.off("modeChange", v), i.off("wantsTapGesture", g), i.off("panoArrived", w), i.off("renderFrame", () => {
-      t.videoMeshes.forEach((e) => {
-        e && (e.needsRender = !0);
-      });
-    }), y.clear();
-  };
-  return i.on("modeChange", v), i.on("wantsTapGesture", g), i.on("panoArrived", w), i.on("renderFrame", () => {
+  }, E = () => {
     t.videoMeshes.forEach((e) => {
       e && (e.needsRender = !0);
     });
-  }), { enable: x, disable: T, load: L, dispose: V, state: t, css3DRenderPlugin: f };
+  }, S = () => {
+    T(), t.videoTexture = void 0, d.off("modeChange", v), d.off("wantsTapGesture", g), d.off("panoArrived", w), d.off("renderFrame", E), p.clear();
+  };
+  return d.on("modeChange", v), d.on("wantsTapGesture", g), d.on("panoArrived", w), d.on("renderFrame", E), { enable: x, disable: T, load: V, dispose: S, state: t, css3DRenderPlugin: f };
 };
 export {
-  q as ModelTVVideoPlugin,
-  q as default
+  W as ModelTVVideoPlugin,
+  W as default
 };

package/package.json

@@ -9,7 +9,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.5-alpha.4",
+  "version": "2.0.5-alpha.6",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "sh bin/build-production.sh",