@d5techs/3dgs-lib 1.4.77 → 1.4.79

package/dist/3dgs-lib.js

@@ -17613,19 +17613,19 @@ class SphereSelection {
     inputWrap.style.cssText = "display:inline-flex; align-items:center; gap:2px;";
     const input = document.createElement("input");
     input.type = "number";
-    input.min = "0.01";
-    input.step = "0.1";
-    input.value = this._radius.toFixed(2);
+    input.min = "1";
+    input.step = "1";
+    input.value = String(this._radius);
     input.style.cssText = `
-      width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+      width:40px; padding:3px 4px; border:1px solid #555; border-radius:4px;
       background:#222; color:#ddd; font-size:12px; text-align:center;
     `;
     const label = document.createElement("span");
     label.textContent = "Radius";
     label.style.cssText = "color:#888; font-size:11px;";
     input.addEventListener("change", () => {
-      const v = Math.max(0.01, parseFloat(input.value) || 0.01);
-      input.value = v.toFixed(2);
+      const v = Math.max(1, Math.round(parseFloat(input.value) || 1));
+      input.value = String(v);
       this._radius = v;
       this.callbacks.onRadiusChanged(v);
     });
@@ -17642,8 +17642,8 @@ class SphereSelection {
     return this._radius;
   }
   setRadius(radius) {
-    this._radius = radius;
-    this.radiusInput.value = radius.toFixed(2);
+    this._radius = Math.round(radius);
+    this.radiusInput.value = String(this._radius);
   }
   activate() {
     this.toolbar.style.display = "flex";
@@ -17702,19 +17702,19 @@ class BoxSelection {
       wrap.style.cssText = "display:inline-flex; align-items:center; gap:2px;";
       const input = document.createElement("input");
       input.type = "number";
-      input.min = "0.01";
-      input.step = "0.1";
-      input.value = initial.toFixed(2);
+      input.min = "1";
+      input.step = "1";
+      input.value = String(Math.round(initial));
       input.style.cssText = `
-        width:50px; padding:3px 4px; border:1px solid #555; border-radius:4px;
+        width:40px; padding:3px 4px; border:1px solid #555; border-radius:4px;
         background:#222; color:#ddd; font-size:12px; text-align:center;
       `;
       const label = document.createElement("span");
       label.textContent = placeholder;
       label.style.cssText = "color:#888; font-size:11px;";
       input.addEventListener("change", () => {
-        const v = Math.max(0.01, parseFloat(input.value) || 0.01);
-        input.value = v.toFixed(2);
+        const v = Math.max(1, Math.round(parseFloat(input.value) || 1));
+        input.value = String(v);
         onChange(v);
       });
       wrap.appendChild(input);
@@ -17757,12 +17757,12 @@ class BoxSelection {
     return this._lenZ;
   }
   setDimensions(lenX, lenY, lenZ) {
-    this._lenX = lenX;
-    this._lenY = lenY;
-    this._lenZ = lenZ;
-    this.inputX.value = lenX.toFixed(2);
-    this.inputY.value = lenY.toFixed(2);
-    this.inputZ.value = lenZ.toFixed(2);
+    this._lenX = Math.round(lenX);
+    this._lenY = Math.round(lenY);
+    this._lenZ = Math.round(lenZ);
+    this.inputX.value = String(this._lenX);
+    this.inputY.value = String(this._lenY);
+    this.inputZ.value = String(this._lenZ);
   }
   activate() {
     this.toolbar.style.display = "flex";
@@ -17875,8 +17875,10 @@ function exportEditedPLY(positions, scales, rotations, colors, opacities, shCoef
   }
   return buffer;
 }
-const SPHERE_SEGMENTS = 64;
-const SPHERE_RINGS = 3;
+const SEG = 64;
+const LAT_COUNT = 8;
+const LON_COUNT = 12;
+const BOX_GRID_SUBDIV = 4;
 class SelectionVolumeRenderer {
   constructor(renderer, camera) {
     __publicField(this, "renderer");
@@ -17887,16 +17889,14 @@ class SelectionVolumeRenderer {
     __publicField(this, "vertexBuffer", null);
     __publicField(this, "_volume", { type: null, center: [0, 0, 0], dimensions: [2, 2, 2] });
     __publicField(this, "vertexCount", 0);
-    __publicField(this, "maxVertices");
-    __publicField(this, "lineColor", [0.2, 0.8, 1]);
+    __publicField(this, "lineColor", [0.4, 0.9, 1]);
     this.renderer = renderer;
     this.camera = camera;
-    this.maxVertices = Math.max(
-      24,
-      SPHERE_SEGMENTS * 2 * SPHERE_RINGS
-    );
     this.createPipeline();
-    this.createVertexBuffer();
+    this.vertexBuffer = this.renderer.device.createBuffer({
+      size: 65536,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    });
   }
   get volume() {
     return this._volume;
@@ -17930,7 +17930,7 @@ class SelectionVolumeRenderer {
         return o;
       }
       @fragment fn fs(i: VO) -> @location(0) vec4<f32> {
-        return vec4(i.color, 0.8);
+        return vec4(i.color, 0.6);
       }
     `
     );
@@ -17968,78 +17968,115 @@ class SelectionVolumeRenderer {
       depthStencil: { format: this.renderer.depthFormat, depthWriteEnabled: false, depthCompare: "always" }
     });
   }
-  createVertexBuffer() {
-    const size = this.maxVertices * 24;
-    this.vertexBuffer = this.renderer.device.createBuffer({
-      size,
-      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-    });
-  }
+  // ========== Box: 12 edges + grid lines on all 6 faces ==========
   generateBoxVertices() {
     const [cx, cy, cz] = this._volume.center;
     const [lx, ly, lz] = this._volume.dimensions;
     const hx = lx / 2, hy = ly / 2, hz = lz / 2;
     const [r, g, b] = this.lineColor;
     const v = [];
-    const addLine = (x12, y12, z12, x2, y2, z2) => {
+    const line = (x12, y12, z12, x2, y2, z2) => {
       v.push(x12, y12, z12, r, g, b, x2, y2, z2, r, g, b);
     };
     const x0 = cx - hx, x1 = cx + hx;
     const y0 = cy - hy, y1 = cy + hy;
     const z0 = cz - hz, z1 = cz + hz;
-    addLine(x0, y0, z0, x1, y0, z0);
-    addLine(x1, y0, z0, x1, y0, z1);
-    addLine(x1, y0, z1, x0, y0, z1);
-    addLine(x0, y0, z1, x0, y0, z0);
-    addLine(x0, y1, z0, x1, y1, z0);
-    addLine(x1, y1, z0, x1, y1, z1);
-    addLine(x1, y1, z1, x0, y1, z1);
-    addLine(x0, y1, z1, x0, y1, z0);
-    addLine(x0, y0, z0, x0, y1, z0);
-    addLine(x1, y0, z0, x1, y1, z0);
-    addLine(x1, y0, z1, x1, y1, z1);
-    addLine(x0, y0, z1, x0, y1, z1);
+    line(x0, y0, z0, x1, y0, z0);
+    line(x1, y0, z0, x1, y0, z1);
+    line(x1, y0, z1, x0, y0, z1);
+    line(x0, y0, z1, x0, y0, z0);
+    line(x0, y1, z0, x1, y1, z0);
+    line(x1, y1, z0, x1, y1, z1);
+    line(x1, y1, z1, x0, y1, z1);
+    line(x0, y1, z1, x0, y1, z0);
+    line(x0, y0, z0, x0, y1, z0);
+    line(x1, y0, z0, x1, y1, z0);
+    line(x1, y0, z1, x1, y1, z1);
+    line(x0, y0, z1, x0, y1, z1);
+    const n = BOX_GRID_SUBDIV;
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const px = x0 + (x1 - x0) * t;
+      const pz = z0 + (z1 - z0) * t;
+      line(px, y0, z0, px, y0, z1);
+      line(px, y1, z0, px, y1, z1);
+      line(x0, y0, pz, x1, y0, pz);
+      line(x0, y1, pz, x1, y1, pz);
+    }
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const px = x0 + (x1 - x0) * t;
+      const py = y0 + (y1 - y0) * t;
+      line(px, y0, z0, px, y1, z0);
+      line(px, y0, z1, px, y1, z1);
+      line(x0, py, z0, x1, py, z0);
+      line(x0, py, z1, x1, py, z1);
+    }
+    for (let i = 1; i < n; i++) {
+      const t = i / n;
+      const py = y0 + (y1 - y0) * t;
+      const pz = z0 + (z1 - z0) * t;
+      line(x0, py, z0, x0, py, z1);
+      line(x1, py, z0, x1, py, z1);
+      line(x0, y0, pz, x0, y1, pz);
+      line(x1, y0, pz, x1, y1, pz);
+    }
     return new Float32Array(v);
   }
+  // ========== Sphere: latitude + longitude rings ==========
   generateSphereVertices() {
     const [cx, cy, cz] = this._volume.center;
     const radius = this._volume.dimensions[0];
     const [r, g, b] = this.lineColor;
     const v = [];
-    const seg = SPHERE_SEGMENTS;
-    const addCircle = (axis) => {
-      for (let i = 0; i < seg; i++) {
-        const a0 = i / seg * Math.PI * 2;
-        const a1 = (i + 1) / seg * Math.PI * 2;
-        let x0, y0, z0, x1, y1, z1;
-        if (axis === "y") {
-          x0 = cx + Math.cos(a0) * radius;
-          y0 = cy;
-          z0 = cz + Math.sin(a0) * radius;
-          x1 = cx + Math.cos(a1) * radius;
-          y1 = cy;
-          z1 = cz + Math.sin(a1) * radius;
-        } else if (axis === "x") {
-          x0 = cx;
-          y0 = cy + Math.cos(a0) * radius;
-          z0 = cz + Math.sin(a0) * radius;
-          x1 = cx;
-          y1 = cy + Math.cos(a1) * radius;
-          z1 = cz + Math.sin(a1) * radius;
-        } else {
-          x0 = cx + Math.cos(a0) * radius;
-          y0 = cy + Math.sin(a0) * radius;
-          z0 = cz;
-          x1 = cx + Math.cos(a1) * radius;
-          y1 = cy + Math.sin(a1) * radius;
-          z1 = cz;
-        }
-        v.push(x0, y0, z0, r, g, b, x1, y1, z1, r, g, b);
+    const addRing = (centerY, ringRadius) => {
+      for (let i = 0; i < SEG; i++) {
+        const a0 = i / SEG * Math.PI * 2;
+        const a1 = (i + 1) / SEG * Math.PI * 2;
+        v.push(
+          cx + Math.cos(a0) * ringRadius,
+          cy + centerY,
+          cz + Math.sin(a0) * ringRadius,
+          r,
+          g,
+          b,
+          cx + Math.cos(a1) * ringRadius,
+          cy + centerY,
+          cz + Math.sin(a1) * ringRadius,
+          r,
+          g,
+          b
+        );
       }
     };
-    addCircle("x");
-    addCircle("y");
-    addCircle("z");
+    for (let i = 0; i <= LAT_COUNT; i++) {
+      const phi = -Math.PI / 2 + i / LAT_COUNT * Math.PI;
+      const y = Math.sin(phi) * radius;
+      const ringR = Math.cos(phi) * radius;
+      if (ringR < 1e-3) continue;
+      addRing(y, ringR);
+    }
+    for (let j = 0; j < LON_COUNT; j++) {
+      const theta = j / LON_COUNT * Math.PI;
+      for (let i = 0; i < SEG; i++) {
+        const phi0 = i / SEG * Math.PI * 2;
+        const phi1 = (i + 1) / SEG * Math.PI * 2;
+        v.push(
+          cx + Math.cos(phi0) * Math.sin(theta) * radius,
+          cy + Math.sin(phi0) * radius,
+          cz + Math.cos(phi0) * Math.cos(theta) * radius,
+          r,
+          g,
+          b,
+          cx + Math.cos(phi1) * Math.sin(theta) * radius,
+          cy + Math.sin(phi1) * radius,
+          cz + Math.cos(phi1) * Math.cos(theta) * radius,
+          r,
+          g,
+          b
+        );
+      }
+    }
     return new Float32Array(v);
   }
   render(pass) {
@@ -18152,16 +18189,13 @@ class SplatEditor {
       this.toolOverlay.style.display = name && !isVolumeTool ? "block" : "none";
       if (isVolumeTool && this.volumeRenderer) {
         const volType = name;
-        const bounds = this.getModelBounds();
-        const defaultSize = Math.max(bounds.size[0], bounds.size[1], bounds.size[2]) * 0.3;
-        const safeSize = Math.max(defaultSize, 0.5);
+        const center = this.getModelCenter();
         if (volType === "box") {
-          this.boxTool.setDimensions(safeSize, safeSize, safeSize);
-          this.volumeRenderer.setVolume("box", bounds.center, [safeSize, safeSize, safeSize]);
+          const lx = this.boxTool.lenX, ly = this.boxTool.lenY, lz = this.boxTool.lenZ;
+          this.volumeRenderer.setVolume("box", center, [lx, ly, lz]);
         } else {
-          const r = safeSize / 2;
-          this.sphereTool.setRadius(r);
-          this.volumeRenderer.setVolume("sphere", bounds.center, [r, 0, 0]);
+          const r = this.sphereTool.radius;
+          this.volumeRenderer.setVolume("sphere", center, [r, 0, 0]);
         }
         (_b2 = (_a2 = this.callbacks).onVolumeToolActivated) == null ? void 0 : _b2.call(_a2, this.volumeRenderer.volume);
       } else {