@popaya/pgsg-viewer 0.2.0 → 0.2.1

package/dist/{chunk-LFICZTG7.js → chunk-Q2W7KVNK.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-5BUDBGSE.js");
+      const { PGSGThreeViewer } = await import("./pgsg-three-viewer-B5AH6DJO.js");
       this.engine = new PGSGThreeViewer(this.options);
     }
     await this.engine.load();
@@ -45,4 +45,4 @@ var PGSGViewer = class {
 export {
   PGSGViewer
 };
-//# sourceMappingURL=chunk-LFICZTG7.js.map
+//# sourceMappingURL=chunk-Q2W7KVNK.js.map

package/dist/core/index.js

@@ -1,7 +1,7 @@
 import "../chunk-PYYLHUV6.js";
 import {
   PGSGViewer
-} from "../chunk-LFICZTG7.js";
+} from "../chunk-Q2W7KVNK.js";
 export {
   PGSGViewer
 };

package/dist/index.js

@@ -1,7 +1,7 @@
 import "./chunk-PYYLHUV6.js";
 import {
   PGSGViewer
-} from "./chunk-LFICZTG7.js";
+} from "./chunk-Q2W7KVNK.js";
 export {
   PGSGViewer
 };

package/dist/{pgsg-three-viewer-5BUDBGSE.js → pgsg-three-viewer-B5AH6DJO.js}

@@ -1,7 +1,11 @@
 // src/viewers/three/pgsg-three-viewer.ts
 import * as THREE5 from "three";
-import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
-import { TransformControls } from "three/addons/controls/TransformControls.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 import * as RAPIER2 from "@dimforge/rapier3d-compat";
 import nipplejs from "nipplejs";
 
@@ -294,6 +298,7 @@ var OrbitCameraController = class {
   lastTouchY = 0;
   externalMove = new THREE2.Vector2(0, 0);
   moveSpeed = 5;
+  enabled = true;
   constructor(camera, dom, opts) {
     this.camera = camera;
     this.dom = dom;
@@ -371,6 +376,7 @@ var OrbitCameraController = class {
   // Input
   // -----------------------------
   onMouseDown = (e) => {
+    if (!this.enabled) return;
     if (e.button === 0) {
       this.dragging = true;
     } else if (e.button === 2 || e.button === 1) {
@@ -384,6 +390,7 @@ var OrbitCameraController = class {
     this.panning = false;
   };
   onMouseMove = (e) => {
+    if (!this.enabled) return;
     if (!this.dragging && !this.panning) return;
     const dx = e.clientX - this.lastX;
     const dy = e.clientY - this.lastY;
@@ -412,6 +419,7 @@ var OrbitCameraController = class {
     }
   };
   onWheel = (e) => {
+    if (!this.enabled) return;
     e.preventDefault();
     const zoomFactor = Math.pow(this.zoomSpeed, e.deltaY / 100);
     this.distance *= zoomFactor;
@@ -423,11 +431,13 @@ var OrbitCameraController = class {
     this.updateCamera();
   };
   onTouchStart = (e) => {
+    if (!this.enabled) return;
     const t = e.touches[0];
     this.lastTouchX = t.clientX;
     this.lastTouchY = t.clientY;
   };
   onTouchMove = (e) => {
+    if (!this.enabled) return;
     const t = e.touches[0];
     const deltaX = t.clientX - this.lastTouchX;
     const deltaY = t.clientY - this.lastTouchY;
@@ -1006,6 +1016,14 @@ var PGSGThreeViewer = class {
   placementRotation = 0;
   transformControls;
   inputEnabled = true;
+  placementMouseMoved = false;
+  placedObjects = [];
+  ghostYOffset = 0;
+  composer;
+  hoverOutline;
+  selectOutline;
+  selectedObject;
+  hoveredObject;
   container;
   resizeObserver = null;
   controls;
@@ -1032,21 +1050,28 @@ var PGSGThreeViewer = class {
     this.initRenderer();
     this.initCamera();
     this.initScene();
+    this.initPostProcessing();
     this.bindResize();
     this.resize();
     this.transformControls = new TransformControls(
       this.camera,
       this.renderer.domElement
     );
-    this.scene.add(this.transformControls);
-    console.log(this.transformControls instanceof THREE5.Object3D);
+    this.scene.add(this.transformControls.getHelper());
+    console.log(this.transformControls.getHelper() instanceof THREE5.Object3D);
     this.transformControls.addEventListener("dragging-changed", (event) => {
       if (!this.controls) return;
       this.controls.enabled = !event.value;
     });
     this.transformControls.addEventListener("mouseDown", () => {
       document.exitPointerLock?.();
+      this.controls.enabled = false;
     });
+    this.transformControls.addEventListener("mouseUp", () => {
+      this.controls.enabled = true;
+    });
+    this.transformControls.setSize(0.8);
+    this.transformControls.setSpace("world");
     await RAPIER2.init();
     this.world = new RAPIER2.World({
       x: 0,
@@ -1080,7 +1105,20 @@ var PGSGThreeViewer = class {
       if (e.key === "t") this.transformControls.setMode("translate");
       if (e.key === "s") this.transformControls.setMode("scale");
     });
-    this.renderer.domElement.addEventListener("click", this.onSceneClick);
+    this.renderer.domElement.addEventListener("mousedown", () => {
+      this.placementMouseMoved = false;
+    });
+    this.renderer.domElement.addEventListener("mousemove", () => {
+      this.placementMouseMoved = true;
+    });
+    this.renderer.domElement.addEventListener("mouseup", (e) => {
+      if (!this.placementMouseMoved) {
+        this.onSceneClick(e);
+      }
+    });
+    this.renderer.domElement.addEventListener("click", this.onSelectObject);
+    this.renderer.domElement.addEventListener("mousemove", this.onHoverObject);
+    window.addEventListener("keydown", this.onDeleteObject);
   }
   start() {
     if (this.running) return;
@@ -1096,7 +1134,7 @@ var PGSGThreeViewer = class {
         this.acc -= this.fixedDt;
       }
       this.controls?.update?.(delta);
-      this.renderer.render(this.scene, this.camera);
+      this.composer.render();
     });
   }
   pause() {
@@ -1107,6 +1145,9 @@ var PGSGThreeViewer = class {
     const w = Math.max(1, this.container.clientWidth);
     const h = Math.max(1, this.container.clientHeight);
     this.renderer.setSize(w, h);
+    this.composer?.setSize(w, h);
+    this.hoverOutline?.setSize(w, h);
+    this.selectOutline?.setSize(w, h);
     this.camera.aspect = w / h;
     this.camera.updateProjectionMatrix();
   }
@@ -1168,6 +1209,7 @@ var PGSGThreeViewer = class {
     this.pendingPlacementUrl = url;
     this.placementRotation = 0;
     console.log("[PGSG Viewer] Placement mode enabled");
+    this.controls.enabled = false;
     const gltf = await this.gltfLoader.loadAsync(url);
     this.ghostModel = gltf.scene;
     const box = new THREE5.Box3().setFromObject(this.ghostModel);
@@ -1188,8 +1230,17 @@ var PGSGThreeViewer = class {
       this.onPlacementMove
     );
     this.renderer.domElement.addEventListener("wheel", this.onPlacementWheel);
-    this.renderer.domElement.addEventListener("click", this.onSceneClick);
     window.addEventListener("keydown", this.onPlacementCancel);
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    this.mouse.set(0, 0);
+    this.raycaster.setFromCamera(this.mouse, this.camera);
+    const intersects = this.raycaster.intersectObjects(
+      this.colliderMeshes,
+      true
+    );
+    if (intersects.length) {
+      this.ghostModel.position.copy(intersects[0].point);
+    }
   }
   async addModelFromUrl(url, position) {
     return new Promise((resolve, reject) => {
@@ -1238,14 +1289,21 @@ var PGSGThreeViewer = class {
     this.renderer.setPixelRatio(
       this.options.renderer?.pixelRatio ?? window.devicePixelRatio
     );
+    this.renderer.toneMapping = THREE5.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 1.2;
     this.renderer.localClippingEnabled = true;
     this.container.appendChild(this.renderer.domElement);
   }
   initScene() {
     this.scene = new THREE5.Scene();
     this.scene.background = new THREE5.Color(1118481);
-    const light = new THREE5.HemisphereLight(16777215, 2236962, 1);
-    this.scene.add(light);
+    const hemi = new THREE5.HemisphereLight(16777215, 4473924, 1.2);
+    this.scene.add(hemi);
+    const dir = new THREE5.DirectionalLight(16777215, 2.5);
+    dir.position.set(5, 10, 5);
+    this.scene.add(dir);
+    const amb = new THREE5.AmbientLight(16777215, 0.35);
+    this.scene.add(amb);
   }
   initCamera() {
     this.camera = new THREE5.PerspectiveCamera(
@@ -1257,6 +1315,31 @@ var PGSGThreeViewer = class {
     this.camera.position.set(2, 2, 5);
     this.camera.lookAt(0, 0, 0);
   }
+  initPostProcessing() {
+    this.composer = new EffectComposer(this.renderer);
+    this.composer.addPass(new RenderPass(this.scene, this.camera));
+    const size = new THREE5.Vector2(
+      this.container.clientWidth,
+      this.container.clientHeight
+    );
+    this.hoverOutline = new OutlinePass(size, this.scene, this.camera);
+    this.hoverOutline.edgeStrength = 6;
+    this.hoverOutline.edgeGlow = 1;
+    this.hoverOutline.edgeThickness = 2;
+    this.hoverOutline.pulsePeriod = 0;
+    this.hoverOutline.visibleEdgeColor.set("#00e5ff");
+    this.hoverOutline.hiddenEdgeColor.set("#00e5ff");
+    this.composer.addPass(this.hoverOutline);
+    this.selectOutline = new OutlinePass(size, this.scene, this.camera);
+    this.selectOutline.edgeStrength = 8;
+    this.selectOutline.edgeGlow = 1.2;
+    this.selectOutline.edgeThickness = 2.5;
+    this.selectOutline.pulsePeriod = 0;
+    this.selectOutline.visibleEdgeColor.set("#ffd400");
+    this.selectOutline.hiddenEdgeColor.set("#ffd400");
+    this.composer.addPass(this.selectOutline);
+    this.composer.addPass(new OutputPass());
+  }
   bindResize() {
     this.resizeObserver?.disconnect();
     this.resizeObserver = new ResizeObserver(() => this.resize());
@@ -1489,16 +1572,21 @@ var PGSGThreeViewer = class {
     return hits;
   }
   onSceneClick = async (event) => {
+    if (this.placementMouseMoved) return;
     if (!this.pendingPlacementUrl || !this.ghostModel) return;
     const position = this.ghostModel.position.clone();
     const placed = await this.addModelFromUrl(
       this.pendingPlacementUrl,
       position
     );
+    if (placed) {
+      this.placedObjects.push(placed);
+    }
     if (placed && this.transformControls) {
       placed.rotation.y = this.placementRotation;
       this.transformControls.attach(placed);
     }
+    this.controls.enabled = true;
     this.scene.remove(this.ghostModel);
     this.ghostModel = void 0;
     this.pendingPlacementUrl = void 0;
@@ -1510,7 +1598,6 @@ var PGSGThreeViewer = class {
       "wheel",
       this.onPlacementWheel
     );
-    this.renderer.domElement.removeEventListener("click", this.onSceneClick);
     window.removeEventListener("keydown", this.onPlacementCancel);
   };
   onPlacementMove = (event) => {
@@ -1527,7 +1614,10 @@ var PGSGThreeViewer = class {
     );
     if (!intersects.length) return;
     const hit = intersects[0];
+    const box = new THREE5.Box3().setFromObject(this.ghostModel);
+    this.ghostYOffset = -box.min.y;
     this.ghostModel.position.copy(hit.point);
+    this.ghostModel.position.y += this.ghostYOffset;
     if (hit.face) {
       const normal = this.getWorldNormalSafe(hit);
       if (normal) {
@@ -1538,6 +1628,8 @@ var PGSGThreeViewer = class {
     }
   };
   onPlacementWheel = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
     if (!this.ghostModel) return;
     event.preventDefault();
     const step = Math.PI / 12;
@@ -1567,8 +1659,71 @@ var PGSGThreeViewer = class {
     );
     window.removeEventListener("keydown", this.onPlacementCancel);
   };
+  onSelectObject = (event) => {
+    if (this.pendingPlacementUrl) return;
+    if (this.transformControls?.dragging) return;
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    this.mouse.set(
+      (event.clientX - rect.left) / rect.width * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1
+    );
+    this.raycaster.setFromCamera(this.mouse, this.camera);
+    const hits = this.raycaster.intersectObjects(this.placedObjects, true);
+    if (!hits.length) {
+      this.selectedObject = void 0;
+      this.transformControls?.detach();
+      this.selectOutline.selectedObjects = [];
+      return;
+    }
+    let root = hits[0].object;
+    while (root && !this.placedObjects.includes(root)) root = root.parent;
+    if (!root) return;
+    this.selectedObject = root;
+    this.transformControls?.attach(root);
+    this.selectOutline.selectedObjects = [root];
+  };
+  onHoverObject = (event) => {
+    if (this.pendingPlacementUrl) return;
+    if (this.transformControls?.dragging) return;
+    const rect = this.renderer.domElement.getBoundingClientRect();
+    this.mouse.set(
+      (event.clientX - rect.left) / rect.width * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1
+    );
+    this.raycaster.setFromCamera(this.mouse, this.camera);
+    const hits = this.raycaster.intersectObjects(this.placedObjects, true);
+    if (!hits.length) {
+      this.hoveredObject = void 0;
+      this.hoverOutline.selectedObjects = [];
+      this.renderer.domElement.style.cursor = "default";
+      return;
+    }
+    let root = hits[0].object;
+    while (root && !this.placedObjects.includes(root)) root = root.parent;
+    if (!root) return;
+    if (root !== this.hoveredObject) {
+      this.hoveredObject = root;
+      this.hoverOutline.selectedObjects = [root];
+      this.renderer.domElement.style.cursor = "pointer";
+    }
+  };
+  onDeleteObject = (event) => {
+    const tag = event.target?.tagName?.toLowerCase();
+    if (tag === "input" || tag === "textarea") return;
+    if (event.key !== "Delete" && event.key !== "Backspace") return;
+    if (!this.selectedObject) return;
+    event.preventDefault();
+    this.selectedObject.parent?.remove(this.selectedObject);
+    this.placedObjects = this.placedObjects.filter(
+      (o) => o !== this.selectedObject
+    );
+    this.transformControls?.detach();
+    this.selectOutline.selectedObjects = [];
+    this.hoverOutline.selectedObjects = [];
+    this.selectedObject = void 0;
+  };
 };
 export {
   PGSGThreeViewer
 };
-//# sourceMappingURL=pgsg-three-viewer-5BUDBGSE.js.map
+//# sourceMappingURL=pgsg-three-viewer-B5AH6DJO.js.map