@popaya/pgsg-viewer 0.2.0 → 0.2.2

package/dist/{chunk-LFICZTG7.js → chunk-MNOTPSNH.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-TH7LXVVZ.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-MNOTPSNH.js.map

package/dist/core/index.js

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

package/dist/index.js

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

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

@@ -1,7 +1,10 @@
 // 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 * as RAPIER2 from "@dimforge/rapier3d-compat";
 import nipplejs from "nipplejs";
 
@@ -294,6 +297,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 +375,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 +389,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 +418,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 +430,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 +1015,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 +1049,30 @@ 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());
+    this.transformControls.getHelper().traverse((child) => {
+      child.userData.ignoreOutline = true;
+    });
     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.75);
+    this.transformControls.setSpace("local");
     await RAPIER2.init();
     this.world = new RAPIER2.World({
       x: 0,
@@ -1061,6 +1087,7 @@ var PGSGThreeViewer = class {
     this.splatPivot.clear();
     this.splatPivot.add(mesh);
     this.cvRoot.add(this.splatPivot);
+    this.createNeutralEnvironment();
     if (this.options.colliderSource) {
       await this.loadCollider(this.options.colliderSource);
     }
@@ -1080,7 +1107,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 +1136,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 +1147,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 +1211,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 +1232,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) => {
@@ -1208,6 +1261,14 @@ var PGSGThreeViewer = class {
           }
           const floorBox = new THREE5.Box3().setFromObject(model);
           model.position.y -= floorBox.min.y;
+          model.traverse((child) => {
+            if (!child.isMesh) return;
+            const mat = child.material;
+            if (mat.isMeshStandardMaterial || mat.isMeshPhysicalMaterial) {
+              mat.envMapIntensity = 0.8;
+              mat.needsUpdate = true;
+            }
+          });
           this.cvRoot.add(model);
           resolve(model);
         },
@@ -1238,14 +1299,18 @@ var PGSGThreeViewer = class {
     this.renderer.setPixelRatio(
       this.options.renderer?.pixelRatio ?? window.devicePixelRatio
     );
+    this.renderer.toneMapping = THREE5.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 0.85;
     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, 0.25);
+    this.scene.add(hemi);
+    const amb = new THREE5.AmbientLight(16777215, 0.35);
+    this.scene.add(amb);
   }
   initCamera() {
     this.camera = new THREE5.PerspectiveCamera(
@@ -1257,6 +1322,32 @@ 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.hoverOutline.clear = false;
+    this.selectOutline.clear = false;
+  }
   bindResize() {
     this.resizeObserver?.disconnect();
     this.resizeObserver = new ResizeObserver(() => this.resize());
@@ -1488,17 +1579,39 @@ var PGSGThreeViewer = class {
     }
     return hits;
   }
+  collectMeshes(obj) {
+    const meshes = [];
+    obj.traverse((c) => {
+      if (c.isMesh && !c.userData.ignoreOutline) meshes.push(c);
+    });
+    return meshes;
+  }
+  createNeutralEnvironment() {
+    const pmrem = new THREE5.PMREMGenerator(this.renderer);
+    const envScene = new THREE5.Scene();
+    envScene.background = new THREE5.Color(16777215);
+    const light = new THREE5.HemisphereLight(16777215, 4473924, 1);
+    envScene.add(light);
+    const envMap = pmrem.fromScene(envScene).texture;
+    this.scene.environment = envMap;
+    pmrem.dispose();
+  }
   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 +1623,6 @@ var PGSGThreeViewer = class {
       "wheel",
       this.onPlacementWheel
     );
-    this.renderer.domElement.removeEventListener("click", this.onSceneClick);
     window.removeEventListener("keydown", this.onPlacementCancel);
   };
   onPlacementMove = (event) => {
@@ -1527,7 +1639,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 +1653,8 @@ var PGSGThreeViewer = class {
     }
   };
   onPlacementWheel = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
     if (!this.ghostModel) return;
     event.preventDefault();
     const step = Math.PI / 12;
@@ -1567,8 +1684,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 = this.collectMeshes(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 = this.collectMeshes(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-TH7LXVVZ.js.map