@realsee/dnalogel 3.8.10 → 3.9.0-dev.0

package/libs/PanoVideoPlugin/VideoMeshController.js

@@ -3,13 +3,14 @@ var I = (v, e, i) => e in v ? g(v, e, { enumerable: !0, configurable: !0, writab
 var t = (v, e, i) => (I(v, typeof e != "symbol" ? e + "" : e, i), i);
 import { vertexShader as P, fragmentShader as F } from "./utils/shader.js";
 import "hammerjs";
-import { VideoTexture as M, LinearFilter as m, ShaderMaterial as x, Vector4 as L, SphereBufferGeometry as V, Mesh as y, Vector3 as f, Quaternion as b } from "three";
+import { VideoTexture as M, LinearFilter as m, ShaderMaterial as y, Vector4 as x, SphereBufferGeometry as L, Mesh as V, Vector3 as l, Quaternion as b } from "three";
 import "@realsee/five";
 import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import { requestAnimationFrameInterval as A } from "../shared-utils/animationFrame/index.js";
 import W from "./utils/index.js";
+import E from "animejs";
 import "../shared-utils/positionToVector3.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
@@ -24,7 +25,7 @@ import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/three/getObjectVisible.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-class Z {
+class ie {
   /** 初始化视频、模型以及相关事件监听。 */
   constructor(e, i) {
     t(this, "_id");
@@ -55,7 +56,7 @@ class Z {
     /** 把 uv 值转换成位置 */
     t(this, "uv2Position", (e, i) => {
       var c;
-      const o = Math.PI, a = Math.PI * 2, d = e, s = 1 - i, r = new f(
+      const o = Math.PI, a = Math.PI * 2, d = e, s = 1 - i, r = new l(
         -1 * Math.cos(a * d) * Math.sin(o * s),
         1 * Math.cos(o * s),
         1 * Math.sin(a * d) * Math.sin(o * s)
@@ -64,8 +65,8 @@ class Z {
       const h = (c = this.five.work) == null ? void 0 : c.observers[this.panoIndex];
       if (!h)
         return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
-      const l = h.position.clone(), p = h.quaternion.clone(), u = r.clone();
-      return u.applyAxisAngle(new f(0, 1, 0), Math.PI / 2), u.applyQuaternion(p), u.add(l), u;
+      const f = h.position.clone(), p = h.quaternion.clone(), u = r.clone();
+      return u.applyAxisAngle(new l(0, 1, 0), Math.PI / 2), u.applyQuaternion(p), u.add(f), u;
     });
     /** Five 数据加载后需要根据点位位姿调整点位模型位置 */
     t(this, "onFiveDataLoaded", () => {
@@ -75,13 +76,17 @@ class Z {
         return this.logWarning(`点位 ${this.panoIndex} 不存在，请检查 Five 数据是否正常。`);
       this.observer = e;
       const { x: i, y: n, z: o, w: a } = e.quaternion, d = new b(i, n, o, a), 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 f(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(d);
+      this.videoMesh.position.fromArray([s.x, s.y, s.z]), this.videoMesh.quaternion.set(0, 0, 0, 1), this.videoMesh.rotateOnAxis(new l(0, 1, 0), Math.PI / 2), this.videoMesh.applyQuaternion(d);
     });
     /** 兼容视频播放 */
     t(this, "onFiveWantsMoveToPano", (e) => {
       e === this.panoIndex && (this.hasVideoEverPlayed || this.video.play().catch(() => {
       }));
     });
+    /**
+     * 视频是否已经渐现完成，仅在视频首次加载时才会渐现
+     */
+    t(this, "fadeInComplete", !1);
     /** 走到某个点位上时，挂载/卸载视频 */
     t(this, "onFivePanoArrived", (e) => {
       if (this.disposed)
@@ -139,9 +144,25 @@ class Z {
       this.video.addEventListener(
         "timeupdate",
         () => {
-          this.video.src !== "" && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = A(() => {
+          if (this.video.src !== "" && this.panoIndex === this.five.getCurrentState().panoIndex && this.five.getCurrentState().mode === "Panorama" && (this.renderFiveDisposer || (this.renderFiveDisposer = A(() => {
             this.five.needsRender = !0;
-          }, 30)), this.five.scene.add(this.videoMesh));
+          }, 30)), this.five.scene.add(this.videoMesh), !this.fadeInComplete)) {
+            const e = {
+              value: 0
+            };
+            E({
+              targets: e,
+              value: 1,
+              duration: 300,
+              easing: "linear",
+              update: () => {
+                this.videoMesh.material.uniforms.opacity.value = e.value;
+              },
+              complete: () => {
+                this.video.play(), this.fadeInComplete = !0;
+              }
+            });
+          }
         },
         { once: !0 }
       );
@@ -157,20 +178,21 @@ class Z {
     n.crossOrigin = "anonymous", n.autoplay = !1, n.muted = !0, n.loop = !0, n.playsInline = !0, this.video = n;
     const o = new M(this.video);
     o.minFilter = m, o.magFilter = m;
-    const a = new x({
+    const a = new y({
       vertexShader: P,
       fragmentShader: F,
       uniforms: {
         map: { value: o },
         size: {
-          value: new L(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
-        }
+          value: new x(this.origin[0], 1 - this.origin[1] - this.origin[3], this.origin[2], this.origin[3])
+        },
+        opacity: { value: 0 }
       },
       depthTest: !0,
       transparent: !0
-    }), d = new V(1, 64, 64);
+    }), d = new L(1, 64, 64);
     d.scale(-1, 1, 1);
-    const s = new y(d, a);
+    const s = new V(d, a);
     s.name = "pano-video", this.videoMesh = s, this.five.work && this.onFiveDataLoaded(), this.enabled && this.addEventListeners(), this.mountIfNeeded();
   }
   /** 传入的 ID，不可更改 */
@@ -208,7 +230,7 @@ class Z {
     const i = this.uv2Position(e[0], e[1]);
     if (!i)
       return;
-    const n = new f().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: a } = W(n);
+    const n = new l().subVectors(i, this.observer.position).normalize(), { longitude: o, latitude: a } = W(n);
     this.five.setState({ panoIndex: this.panoIndex, longitude: o, latitude: a }), this.onFiveWantsMoveToPano(this.panoIndex);
   }
   /** 获取视频中心点的 uv */
@@ -261,10 +283,10 @@ class Z {
   checkIntersectionInBounding(e, i) {
     if (!i.uv)
       return !1;
-    const [n, o] = i.uv.toArray(), [a, d, s, r] = e, h = 1 - d - r, l = a + s, p = h + r;
-    return n >= a && n <= l && o >= h && o <= p;
+    const [n, o] = i.uv.toArray(), [a, d, s, r] = e, h = 1 - d - r, f = a + s, p = h + r;
+    return n >= a && n <= f && o >= h && o <= p;
   }
 }
 export {
-  Z as VideoMeshController
+  ie as VideoMeshController
 };

package/libs/PanoVideoPlugin/index.js

@@ -1,5 +1,5 @@
 import { PanoVideoPluginController as r } from "./Controller.js";
-import { typings as D } from "./typings/index.js";
+import { typings as E } from "./typings/index.js";
 import "./VideoMeshController.js";
 import "./utils/shader.js";
 import "hammerjs";
@@ -24,11 +24,12 @@ import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "../shared-utils/animationFrame/index.js";
 import "./utils/index.js";
+import "animejs";
 import "../base/BasePlugin.js";
 import "../shared-utils/url/absoluteUrl.js";
-const z = (o) => new r(o);
+const A = (o) => new r(o);
 export {
-  z as PanoVideoPlugin,
-  D as PanoVideoPluginType,
-  z as default
+  A as PanoVideoPlugin,
+  E as PanoVideoPluginType,
+  A as default
 };

package/libs/base/BasePlugin.js

@@ -14,7 +14,7 @@ let b = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "3.8.10");
+    i(this, "VERSION", "3.9.0-dev.0");
     i(this, "five");
     /**
      * 插件事件钩子

package/libs/shared-utils/logger.js

@@ -1,6 +1,6 @@
 function A() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv3.8.10",
+    "%c %c@realsee/dnalogel %cv3.9.0-dev.0",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",

package/package.json

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