@popaya/pgsg-viewer 0.1.9 → 0.1.10

package/dist/{chunk-3HV5SAZ7.js → chunk-OUBHF2NG.js}

@@ -10,7 +10,7 @@ var PGSGViewer = class {
       const { PGSGPlayCanvasViewer } = await import("./pgsg-playcanvas-viewer-4WORM4WU.js");
       this.engine = new PGSGPlayCanvasViewer(this.options);
     } else {
-      const { PGSGThreeViewer } = await import("./pgsg-three-viewer-TOCXQMZQ.js");
+      const { PGSGThreeViewer } = await import("./pgsg-three-viewer-LWLUOAKM.js");
       this.engine = new PGSGThreeViewer(this.options);
     }
     await this.engine.load();
@@ -36,4 +36,4 @@ var PGSGViewer = class {
 export {
   PGSGViewer
 };
-//# sourceMappingURL=chunk-3HV5SAZ7.js.map
+//# sourceMappingURL=chunk-OUBHF2NG.js.map

package/dist/chunk-OUBHF2NG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewer/pgsg-viewer.ts"],"sourcesContent":["import type {\n  ViewerType,\n  PGSGViewerEngine,\n  CameraMode,\n} from \"../viewers/types\";\nimport type { PGSGViewerOptions } from \"../core/types\";\n\nexport class PGSGViewer {\n  private engine!: PGSGViewerEngine;\n\n  constructor(\n    private options: PGSGViewerOptions & { viewerType?: ViewerType },\n  ) {}\n\n  async load() {\n    const type = this.options.viewerType ?? \"three\";\n\n    if (type === \"playcanvas\") {\n      const { PGSGPlayCanvasViewer } =\n        await import(\"../viewers/playcanvas/pgsg-playcanvas-viewer\");\n      this.engine = new PGSGPlayCanvasViewer(this.options);\n    } else {\n      const { PGSGThreeViewer } =\n        await import(\"../viewers/three/pgsg-three-viewer\");\n      this.engine = new PGSGThreeViewer(this.options);\n    }\n\n    await this.engine.load();\n    this.engine.start?.();\n  }\n\n  resize() {\n    this.engine?.resize();\n  }\n\n  destroy() {\n    this.engine?.destroy();\n  }\n\n  setCameraMode(mode: CameraMode) {\n    this.engine?.setCameraMode?.(mode);\n  }\n\n  finalizePolyline() {\n    (this.engine as any)?.finalizePolyline?.();\n  }\n\n  deleteMeasurement(index: number) {\n    (this.engine as any)?.deleteMeasurement?.(index);\n  }\n}\n"],"mappings":";AAOO,IAAM,aAAN,MAAiB;AAAA,EAGtB,YACU,SACR;AADQ;AAAA,EACP;AAAA,EAJK;AAAA,EAMR,MAAM,OAAO;AACX,UAAM,OAAO,KAAK,QAAQ,cAAc;AAExC,QAAI,SAAS,cAAc;AACzB,YAAM,EAAE,qBAAqB,IAC3B,MAAM,OAAO,sCAA8C;AAC7D,WAAK,SAAS,IAAI,qBAAqB,KAAK,OAAO;AAAA,IACrD,OAAO;AACL,YAAM,EAAE,gBAAgB,IACtB,MAAM,OAAO,iCAAoC;AACnD,WAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO;AAAA,IAChD;AAEA,UAAM,KAAK,OAAO,KAAK;AACvB,SAAK,OAAO,QAAQ;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,SAAK,QAAQ,OAAO;AAAA,EACtB;AAAA,EAEA,UAAU;AACR,SAAK,QAAQ,QAAQ;AAAA,EACvB;AAAA,EAEA,cAAc,MAAkB;AAC9B,SAAK,QAAQ,gBAAgB,IAAI;AAAA,EACnC;AAAA,EAEA,mBAAmB;AACjB,IAAC,KAAK,QAAgB,mBAAmB;AAAA,EAC3C;AAAA,EAEA,kBAAkB,OAAe;AAC/B,IAAC,KAAK,QAAgB,oBAAoB,KAAK;AAAA,EACjD;AACF;","names":[]}

package/dist/core/index.d.ts

@@ -1,4 +1,5 @@
 type ViewerType = "three" | "playcanvas" | "spark";
+type CameraMode = "walk" | "orbit" | "floorplan" | "measure";
 
 type SourceType = "pgsg" | "ply";
 interface PGSGSource {
@@ -43,7 +44,7 @@ declare class PGSGViewer {
     load(): Promise<void>;
     resize(): void;
     destroy(): void;
-    setCameraMode(mode: "orbit" | "walk" | "measure"): void;
+    setCameraMode(mode: CameraMode): void;
     finalizePolyline(): void;
     deleteMeasurement(index: number): void;
 }

package/dist/core/index.js

@@ -1,7 +1,7 @@
 import "../chunk-PYYLHUV6.js";
 import {
   PGSGViewer
-} from "../chunk-3HV5SAZ7.js";
+} from "../chunk-OUBHF2NG.js";
 export {
   PGSGViewer
 };

package/dist/index.js

@@ -1,7 +1,7 @@
 import "./chunk-PYYLHUV6.js";
 import {
   PGSGViewer
-} from "./chunk-3HV5SAZ7.js";
+} from "./chunk-OUBHF2NG.js";
 export {
   PGSGViewer
 };

package/dist/{pgsg-three-viewer-TOCXQMZQ.js → pgsg-three-viewer-LWLUOAKM.js}

@@ -1,5 +1,5 @@
 // src/viewers/three/pgsg-three-viewer.ts
-import * as THREE4 from "three";
+import * as THREE5 from "three";
 import { GLTFLoader } from "three/examples/jsm/Addons.js";
 import nipplejs from "nipplejs";
 
@@ -904,6 +904,148 @@ var MeasurementController = class {
   }
 };
 
+// src/viewers/three/controls/FloorplanController.ts
+import * as THREE4 from "three";
+var FloorplanController = class {
+  dom;
+  camera;
+  target;
+  height;
+  panSpeed;
+  zoomSpeed;
+  minHeight;
+  maxHeight;
+  isDragging = false;
+  lastX = 0;
+  lastY = 0;
+  // touch
+  touchMode = "none";
+  lastDist = 0;
+  constructor(opts) {
+    this.dom = opts.dom;
+    this.camera = opts.camera;
+    this.target = opts.target.clone();
+    this.height = opts.height;
+    this.panSpeed = opts.panSpeed ?? 0.01;
+    this.zoomSpeed = opts.zoomSpeed ?? 1.1;
+    this.minHeight = opts.minHeight ?? opts.height * 0.25;
+    this.maxHeight = opts.maxHeight ?? opts.height * 3;
+    this.applyCamera();
+    this.bind();
+  }
+  dispose() {
+    this.unbind();
+  }
+  update(_dt) {
+    this.applyCamera();
+  }
+  setTarget(t) {
+    this.target.copy(t);
+    this.applyCamera();
+  }
+  applyCamera() {
+    this.height = THREE4.MathUtils.clamp(
+      this.height,
+      this.minHeight,
+      this.maxHeight
+    );
+    this.camera.position.set(
+      this.target.x,
+      this.target.y + this.height,
+      this.target.z
+    );
+    this.camera.up.set(0, 0, -1);
+    this.camera.lookAt(this.target);
+  }
+  bind() {
+    this.dom.addEventListener("contextmenu", (e) => e.preventDefault());
+    this.dom.addEventListener("mousedown", this.onMouseDown);
+    window.addEventListener("mousemove", this.onMouseMove);
+    window.addEventListener("mouseup", this.onMouseUp);
+    this.dom.addEventListener("wheel", this.onWheel, { passive: false });
+    this.dom.addEventListener("touchstart", this.onTouchStart, {
+      passive: false
+    });
+    this.dom.addEventListener("touchmove", this.onTouchMove, {
+      passive: false
+    });
+    this.dom.addEventListener("touchend", this.onTouchEnd);
+  }
+  unbind() {
+    this.dom.removeEventListener("mousedown", this.onMouseDown);
+    window.removeEventListener("mousemove", this.onMouseMove);
+    window.removeEventListener("mouseup", this.onMouseUp);
+    this.dom.removeEventListener("wheel", this.onWheel);
+    this.dom.removeEventListener("touchstart", this.onTouchStart);
+    this.dom.removeEventListener("touchmove", this.onTouchMove);
+    this.dom.removeEventListener("touchend", this.onTouchEnd);
+  }
+  onMouseDown = (e) => {
+    if (e.button !== 0) return;
+    this.isDragging = true;
+    this.lastX = e.clientX;
+    this.lastY = e.clientY;
+  };
+  onMouseUp = () => {
+    this.isDragging = false;
+  };
+  onMouseMove = (e) => {
+    if (!this.isDragging) return;
+    const dx = e.clientX - this.lastX;
+    const dy = e.clientY - this.lastY;
+    this.lastX = e.clientX;
+    this.lastY = e.clientY;
+    this.target.x -= dx * this.panSpeed * this.height;
+    this.target.z += dy * this.panSpeed * this.height;
+    this.applyCamera();
+  };
+  onWheel = (e) => {
+    e.preventDefault();
+    const factor = Math.pow(this.zoomSpeed, e.deltaY / 100);
+    this.height *= factor;
+    this.applyCamera();
+  };
+  onTouchStart = (e) => {
+    if (e.touches.length === 1) {
+      this.touchMode = "pan";
+      this.lastX = e.touches[0].clientX;
+      this.lastY = e.touches[0].clientY;
+    } else if (e.touches.length === 2) {
+      this.touchMode = "pinch";
+      this.lastDist = this.touchDistance(e.touches[0], e.touches[1]);
+    }
+  };
+  onTouchMove = (e) => {
+    e.preventDefault();
+    if (this.touchMode === "pan" && e.touches.length === 1) {
+      const x = e.touches[0].clientX;
+      const y = e.touches[0].clientY;
+      const dx = x - this.lastX;
+      const dy = y - this.lastY;
+      this.lastX = x;
+      this.lastY = y;
+      this.target.x -= dx * this.panSpeed * this.height;
+      this.target.z += dy * this.panSpeed * this.height;
+      this.applyCamera();
+    }
+    if (this.touchMode === "pinch" && e.touches.length === 2) {
+      const dist = this.touchDistance(e.touches[0], e.touches[1]);
+      const ratio = this.lastDist / Math.max(1e-6, dist);
+      this.lastDist = dist;
+      this.height *= ratio;
+      this.applyCamera();
+    }
+  };
+  onTouchEnd = () => {
+    this.touchMode = "none";
+  };
+  touchDistance(a, b) {
+    const dx = a.clientX - b.clientX;
+    const dy = a.clientY - b.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+};
+
 // src/viewers/three/pgsg-three-viewer.ts
 var PGSGThreeViewer = class {
   constructor(options) {
@@ -914,7 +1056,7 @@ var PGSGThreeViewer = class {
       throw new Error("[PGSGThreeViewer] Container is required");
     }
   }
-  scene = new THREE4.Scene();
+  scene = new THREE5.Scene();
   camera;
   renderer;
   splats;
@@ -922,15 +1064,17 @@ var PGSGThreeViewer = class {
   resizeObserver = null;
   controls;
   running = false;
-  orbitTarget = new THREE4.Vector3();
+  orbitTarget = new THREE5.Vector3();
   lastTime = performance.now();
   colliders = [];
   persistentMeasurements = [];
   measurementController = null;
-  worldRoot = new THREE4.Object3D();
-  splatPivot = new THREE4.Object3D();
+  worldRoot = new THREE5.Object3D();
+  splatPivot = new THREE5.Object3D();
   colliderMesh;
   modeButton;
+  currentMode = "orbit";
+  camTween = null;
   async load() {
     this.initRenderer();
     this.initCamera();
@@ -944,11 +1088,11 @@ var PGSGThreeViewer = class {
     this.splatPivot.add(mesh);
     this.worldRoot.add(this.splatPivot);
     this.worldRoot.rotation.x = Math.PI;
+    this.worldRoot.position.y -= bounds.min.y;
     this.worldRoot.updateMatrixWorld(true);
     if (this.options.colliderSource) {
       await this.loadCollider(this.options.colliderSource);
     }
-    this.scene.updateMatrixWorld(true);
     if (this.isMobile()) {
       this.initJoystick();
       this.initModeToggle();
@@ -976,6 +1120,26 @@ var PGSGThreeViewer = class {
       const now = performance.now();
       const delta = (now - this.lastTime) / 1e3;
       this.lastTime = now;
+      if (this.camTween) {
+        this.camTween.t += delta;
+        const a = THREE5.MathUtils.clamp(
+          this.camTween.t / this.camTween.dur,
+          0,
+          1
+        );
+        const s = a * a * (3 - 2 * a);
+        this.camera.position.lerpVectors(
+          this.camTween.fromPos,
+          this.camTween.toPos,
+          s
+        );
+        this.camera.quaternion.slerpQuaternions(
+          this.camTween.fromQuat,
+          this.camTween.toQuat,
+          s
+        );
+        if (a >= 1) this.camTween = null;
+      }
       this.controls?.update?.(delta);
       this.renderer.render(this.scene, this.camera);
     });
@@ -1000,6 +1164,7 @@ var PGSGThreeViewer = class {
     this.renderer.dispose();
   }
   setCameraMode(mode) {
+    this.currentMode = mode;
     console.log("[PGSGThreeViewer] setCameraMode:", mode);
     if (this.controls instanceof MeasurementController) {
       this.persistentMeasurements = this.controls.measurements;
@@ -1020,8 +1185,11 @@ var PGSGThreeViewer = class {
       case "walk":
         this.switchToWalk();
         break;
+      case "floorplan":
+        this.switchToFloorplan();
+        break;
       default:
-        this.switchToMeasure();
+        this.switchToOrbit();
         break;
     }
   }
@@ -1034,15 +1202,37 @@ var PGSGThreeViewer = class {
       this.updateModeLabel("WALK");
     }
   }
+  getMeasurements() {
+    if (this.measurementController) {
+      return this.measurementController.getMeasurements();
+    }
+    return [];
+  }
+  clearMeasurements() {
+    if (this.measurementController) {
+      this.measurementController.clearAll();
+      this.persistentMeasurements = [];
+    }
+  }
+  finalizePolyline() {
+    if (this.controls instanceof MeasurementController) {
+      this.controls.finalizePolyline();
+    }
+  }
+  deleteMeasurement(index) {
+    if (this.measurementController) {
+      this.measurementController.deleteMeasurement(index);
+    }
+  }
   initRenderer() {
     if (this.renderer) return;
-    this.renderer = new THREE4.WebGLRenderer({
+    this.renderer = new THREE5.WebGLRenderer({
       antialias: this.options.renderer?.antialias ?? false,
       alpha: false,
       powerPreference: "high-performance"
     });
     this.renderer.setClearColor(1118481, 1);
-    this.renderer.outputColorSpace = THREE4.SRGBColorSpace;
+    this.renderer.outputColorSpace = THREE5.SRGBColorSpace;
     this.renderer.setSize(
       this.container.clientWidth,
       this.container.clientHeight
@@ -1050,6 +1240,7 @@ var PGSGThreeViewer = class {
     this.renderer.setPixelRatio(
       this.options.renderer?.pixelRatio ?? window.devicePixelRatio
     );
+    this.renderer.localClippingEnabled = true;
     this.container.appendChild(this.renderer.domElement);
     this.renderer.domElement.addEventListener("webglcontextlost", (e) => {
       e.preventDefault();
@@ -1057,14 +1248,15 @@ var PGSGThreeViewer = class {
     });
   }
   initScene() {
-    this.scene = new THREE4.Scene();
-    this.scene.background = new THREE4.Color(1118481);
-    const gridHelper = new THREE4.GridHelper(10, 10);
-    const light = new THREE4.HemisphereLight(16777215, 2236962, 1);
+    this.scene = new THREE5.Scene();
+    this.scene.background = new THREE5.Color(1118481);
+    const gridHelper = new THREE5.GridHelper(10, 10);
+    this.scene.add(gridHelper);
+    const light = new THREE5.HemisphereLight(16777215, 2236962, 1);
     this.scene.add(light);
   }
   initCamera() {
-    this.camera = new THREE4.PerspectiveCamera(
+    this.camera = new THREE5.PerspectiveCamera(
       this.options.camera?.fov ?? 60,
       this.container.clientWidth / this.container.clientHeight,
       this.options.camera?.near ?? 0.01,
@@ -1124,9 +1316,9 @@ var PGSGThreeViewer = class {
     this.colliders.length = 0;
     this.colliderMesh.traverse((child) => {
       if (child.isMesh) {
-        child.material = new THREE4.MeshBasicMaterial({
+        child.material = new THREE5.MeshBasicMaterial({
           visible: false,
-          side: THREE4.DoubleSide
+          side: THREE5.DoubleSide
         });
         child.updateMatrixWorld(true);
         this.colliders.push(child);
@@ -1148,6 +1340,7 @@ var PGSGThreeViewer = class {
   };
   switchToMeasure() {
     this.controls?.dispose();
+    this.clearCeilingClip();
     this.measurementController = new MeasurementController({
       dom: this.renderer.domElement,
       camera: this.camera,
@@ -1159,6 +1352,7 @@ var PGSGThreeViewer = class {
   }
   switchToWalk() {
     this.controls?.dispose();
+    this.clearCeilingClip();
     const walk = new WalkCapsuleController({
       camera: this.camera,
       dom: this.renderer.domElement,
@@ -1175,6 +1369,7 @@ var PGSGThreeViewer = class {
   }
   switchToOrbit() {
     this.controls?.dispose();
+    this.clearCeilingClip();
     const distance = 5;
     this.controls = new OrbitCameraController(
       this.camera,
@@ -1186,30 +1381,53 @@ var PGSGThreeViewer = class {
       }
     );
   }
-  getMeasurements() {
-    if (this.measurementController) {
-      return this.measurementController.getMeasurements();
-    }
-    return [];
+  switchToFloorplan() {
+    this.controls?.dispose();
+    const box = new THREE5.Box3().setFromObject(this.worldRoot);
+    const center = box.getCenter(new THREE5.Vector3());
+    const size = box.getSize(new THREE5.Vector3());
+    const height = Math.max(size.x, size.z) * 1.2;
+    this.orbitTarget.copy(center);
+    this.controls = new FloorplanController({
+      dom: this.renderer.domElement,
+      camera: this.camera,
+      target: center,
+      height,
+      panSpeed: 15e-4,
+      // tune
+      zoomSpeed: 1.15
+    });
+    const clipY = this.getCeilingClipY();
+    this.applyCeilingClip(clipY);
   }
-  clearMeasurements() {
-    if (this.measurementController) {
-      this.measurementController.clearAll();
-      this.persistentMeasurements = [];
-    }
+  applyCeilingClip(clipY) {
+    const plane = new THREE5.Plane(new THREE5.Vector3(0, -1, 0), clipY);
+    this.renderer.clippingPlanes = [plane];
   }
-  finalizePolyline() {
-    if (this.controls instanceof MeasurementController) {
-      this.controls.finalizePolyline();
-    }
+  clearCeilingClip() {
+    this.renderer.clippingPlanes = [];
   }
-  deleteMeasurement(index) {
-    if (this.measurementController) {
-      this.measurementController.deleteMeasurement(index);
-    }
+  getCeilingClipY() {
+    if (!this.colliderMesh) return 0;
+    const box = new THREE5.Box3().setFromObject(this.colliderMesh);
+    const sizeY = box.max.y - box.min.y;
+    return box.min.y + sizeY * 0.65;
+  }
+  startCameraTween(toPos, toLookAt, dur = 0.45) {
+    const toQuat = new THREE5.Quaternion().setFromRotationMatrix(
+      new THREE5.Matrix4().lookAt(toPos, toLookAt, new THREE5.Vector3(0, 1, 0))
+    );
+    this.camTween = {
+      t: 0,
+      dur,
+      fromPos: this.camera.position.clone(),
+      toPos: toPos.clone(),
+      fromQuat: this.camera.quaternion.clone(),
+      toQuat
+    };
   }
 };
 export {
   PGSGThreeViewer
 };
-//# sourceMappingURL=pgsg-three-viewer-TOCXQMZQ.js.map
+//# sourceMappingURL=pgsg-three-viewer-LWLUOAKM.js.map