@adatechnology/game-destruction-three 0.1.2 → 0.2.0

package/dist/index.global.js

@@ -2329,6 +2329,8 @@ void main() {
       __publicField(this, "b");
       __publicField(this, "m4");
       __publicField(this, "box");
+      __publicField(this, "t");
+      __publicField(this, "lbox");
       /** Total live decals across meshes (kept in sync by add/remove). */
       __publicField(this, "decalCount", 0);
       __publicField(this, "tints", /* @__PURE__ */ new WeakMap());
@@ -2337,9 +2339,22 @@ void main() {
       this.b = tmpV(THREE);
       this.m4 = new THREE.Matrix4();
       this.box = new THREE.Box3();
+      this.t = tmpV(THREE);
+      this.lbox = new THREE.Box3();
     }
-    makeMeshVis(mesh, home) {
-      return {
+    /**
+     * @param range vertex range `[v0, v1)` of a merged mesh this part is drawn by (see `MeshRange`); `hosts` caches the shared state per mesh for one `bind`.
+     */
+    makeMeshVis(mesh, home, range, hosts) {
+      let host = null;
+      if (range) {
+        host = hosts?.get(mesh) ?? null;
+        if (!host) {
+          host = { mesh, origGeometry: mesh.geometry, origMaterial: mesh.material, ownGeo: false, work: null, ownMat: false, sharers: [] };
+          hosts?.set(mesh, host);
+        }
+      }
+      const mv = {
         mesh,
         home,
         origGeometry: mesh.geometry,
@@ -2356,31 +2371,72 @@ void main() {
         decals: [],
         meltApplied: 0,
         bottomY: 0,
-        moved: false
+        moved: false,
+        host,
+        range: range ? [range[0], range[1]] : null,
+        merged: host && range ? { host, range: [range[0], range[1]] } : null,
+        loose: false,
+        collapsed: false,
+        hidden: false,
+        touched: false,
+        charK: 0,
+        charHex: 0,
+        glowHex: 0,
+        glowK: 0
       };
+      host?.sharers.push(mv);
+      return mv;
     }
     vertexCount(mv) {
+      if (mv.range) return mv.range[1] - mv.range[0];
       return mv.mesh.geometry.getAttribute(POS_ATTR)?.count ?? 0;
     }
+    /** Is the part drawn? (A ranged part shares its mesh, so `mesh.visible` says nothing about it.) */
+    shown(mv) {
+      return mv.host ? !mv.hidden : mv.mesh.visible;
+    }
+    /** Box of the part's vertices in the space of its mesh (the whole geometry for a plain mesh). */
+    localBox(mv, out) {
+      out.makeEmpty();
+      if (!mv.host || !mv.range) {
+        const geo = mv.mesh.geometry;
+        if (!geo.boundingBox) geo.computeBoundingBox();
+        return geo.boundingBox ? out.copy(geo.boundingBox) : out;
+      }
+      const arr = mv.host.work ?? positionAttr(mv.mesh.geometry)?.array;
+      if (!arr) return out;
+      for (let i = mv.range[0] * 3; i < mv.range[1] * 3; i += 3) out.expandByPoint(this.t.set(arr[i], arr[i + 1], arr[i + 2]));
+      return out;
+    }
+    /** Box of the part in world space. */
+    worldBox(mv, out) {
+      if (!mv.host) return out.setFromObject(mv.mesh);
+      this.localBox(mv, out);
+      mv.mesh.updateWorldMatrix(true, false);
+      return out.isEmpty() ? out : out.applyMatrix4(mv.mesh.matrixWorld);
+    }
     /**
      * Average vertex colour of a mesh whose material uses `vertexColors` (computed once per mesh, from its original geometry), else null. Fragments
      * and debris of such a mesh multiply it by `material.color`; without it they come out white.
      */
     vertexTint(mv) {
-      if (this.tints.has(mv.mesh)) return this.tints.get(mv.mesh) ?? null;
+      if (this.tints.has(mv)) return this.tints.get(mv) ?? null;
       let tint = null;
       const used = materialsOf(mv.origMaterial).some((m) => m.vertexColors === true);
       const attr = used ? mv.origGeometry.getAttribute("color") : void 0;
       if (attr && attr.count > 0 && attr.itemSize >= 3) {
+        const from = mv.merged ? mv.merged.range[0] : 0;
+        const to = mv.merged ? Math.min(attr.count, mv.merged.range[1]) : attr.count;
         let r = 0, g = 0, b = 0;
-        for (let i = 0; i < attr.count; i++) {
+        for (let i = from; i < to; i++) {
           r += attr.getX(i);
           g += attr.getY(i);
           b += attr.getZ(i);
         }
-        tint = new this.THREE.Color(r / attr.count, g / attr.count, b / attr.count);
+        const n = Math.max(1, to - from);
+        tint = new this.THREE.Color(r / n, g / n, b / n);
       }
-      this.tints.set(mv.mesh, tint);
+      this.tints.set(mv, tint);
       return tint;
     }
     /** Colour of the original material (before any char) times the vertex tint, `0xRRGGBB`, or -1. */
@@ -2404,6 +2460,7 @@ void main() {
     }
     /** Clone the geometry (vertex edits); false when its positions cannot be edited. */
     ownGeometry(mv) {
+      if (mv.host) return this.ownHostGeometry(mv.host);
       if (mv.ownGeo) return true;
       const pos = positionAttr(mv.mesh.geometry);
       if (!pos) return false;
@@ -2413,6 +2470,16 @@ void main() {
       mv.work = new Float32Array(positionAttr(g).array);
       return true;
     }
+    ownHostGeometry(host) {
+      if (host.ownGeo) return true;
+      const pos = positionAttr(host.mesh.geometry);
+      if (!pos) return false;
+      host.ownGeo = true;
+      const g = host.mesh.geometry.clone();
+      host.mesh.geometry = g;
+      host.work = new Float32Array(positionAttr(g).array);
+      return true;
+    }
     // ------------------------------------------------------------------------------------------------------------------------------------
     // Dents
     // ------------------------------------------------------------------------------------------------------------------------------------
@@ -2430,10 +2497,15 @@ void main() {
       const r = dent.radius / s;
       const depth = dent.depth / s;
       const geo = mesh.geometry;
-      if (!geo.boundingBox) geo.computeBoundingBox();
-      if (geo.boundingBox && geo.boundingBox.distanceToPoint(lp) > r) return false;
+      let bb;
+      if (mv.host) bb = this.localBox(mv, this.lbox);
+      else {
+        if (!geo.boundingBox) geo.computeBoundingBox();
+        bb = geo.boundingBox;
+      }
+      if (bb && !bb.isEmpty() && bb.distanceToPoint(lp) > r) return false;
       if (!this.ownGeometry(mv)) return false;
-      const work = mv.work;
+      const work = mv.host ? mv.host.work : mv.work;
       const pos = positionAttr(mesh.geometry);
       const r2 = r * r;
       let touched = false;
@@ -2443,7 +2515,9 @@ void main() {
       const nx = ln.x;
       const ny = ln.y;
       const nz = ln.z;
-      for (let i = 0; i < work.length; i += 3) {
+      const from = mv.range ? mv.range[0] * 3 : 0;
+      const to = mv.range ? mv.range[1] * 3 : work.length;
+      for (let i = from; i < to; i += 3) {
         const dx = work[i] - px;
         const dy = work[i + 1] - py;
         const dz = work[i + 2] - pz;
@@ -2457,11 +2531,16 @@ void main() {
         touched = true;
       }
       if (!touched) return false;
+      mv.touched = true;
       this.writePositions(mv, pos);
       return true;
     }
     /** Copy `work` (dents) into the geometry, adding the melt sag when the mesh is melting. */
     writePositions(mv, pos) {
+      if (mv.host) {
+        this.rebuildHost(mv.host);
+        return;
+      }
       const work = mv.work;
       const arr = pos.array;
       const melt = mv.meltApplied;
@@ -2575,6 +2654,12 @@ void main() {
       pv.charApplied = char;
       const target = new this.THREE.Color(charColor);
       for (const mv of pv.meshes) {
+        if (mv.host) {
+          mv.charK = clamp(char, 0, 1);
+          mv.charHex = charColor;
+          this.paint(mv);
+          continue;
+        }
         this.ownMaterial(mv);
         const mats = materialsOf(mv.mesh.material);
         mats.forEach((m, i) => {
@@ -2592,6 +2677,12 @@ void main() {
       pv.glowApplied = key;
       const intensity = hex === 0 ? 0 : clamp(0.35 + (temperatureC - 450) / 900, 0, 1.4);
       for (const mv of pv.meshes) {
+        if (mv.host) {
+          mv.glowHex = hex;
+          mv.glowK = intensity;
+          this.paint(mv);
+          continue;
+        }
         this.ownMaterial(mv);
         for (const m of materialsOf(mv.mesh.material)) {
           const e = m.emissive;
@@ -2612,6 +2703,12 @@ void main() {
       pv.meltApplied = m;
       for (const mv of pv.meshes) {
         const mesh = mv.mesh;
+        if (mv.host) {
+          mv.meltApplied = m;
+          mv.touched = true;
+          if (!(this.lowQuality && this.vertexCount(mv) > 2e4) && this.ownGeometry(mv)) this.rebuildHost(mv.host);
+          continue;
+        }
         if (mv.meltApplied === 0 && m > 0) {
           mesh.updateWorldMatrix(true, false);
           mv.bottomY = this.box.setFromObject(mesh).min.y;
@@ -2642,10 +2739,270 @@ void main() {
     // ------------------------------------------------------------------------------------------------------------------------------------
     hide(pv, reason) {
       pv.gone = reason;
-      for (const mv of pv.meshes) mv.mesh.visible = false;
+      for (const mv of pv.meshes) {
+        if (!mv.host || mv.loose) {
+          mv.mesh.visible = false;
+          mv.hidden = true;
+          continue;
+        }
+        mv.hidden = true;
+        for (const d of mv.decals) d.obj.visible = false;
+        this.collapse(mv);
+      }
+    }
+    // ------------------------------------------------------------------------------------------------------------------------------------
+    // Parts drawn by a vertex range of a merged mesh
+    // ------------------------------------------------------------------------------------------------------------------------------------
+    /** Collapse the part's vertices in the merged mesh to one point (its triangles become degenerate and vanish). */
+    collapse(mv) {
+      if (!mv.merged || !this.ownHostGeometry(mv.merged.host)) return;
+      mv.collapsed = true;
+      mv.touched = true;
+      this.rebuildHost(mv.merged.host);
+    }
+    /** Write `work` into the geometry again with the melt of ranged parts and the collapsed ranges applied. */
+    rebuildHost(host) {
+      const geo = host.mesh.geometry;
+      const pos = positionAttr(geo);
+      const work = host.work;
+      if (!pos || !work) return;
+      const arr = pos.array;
+      arr.set(work);
+      for (const s of host.sharers) {
+        if (s.merged && s.merged.host === host) {
+          if (s.collapsed) this.collapseRange(arr, s.merged.range);
+          else if (s.meltApplied > 0 && !s.loose) this.meltRange(arr, work, s.merged.range, s.meltApplied);
+        } else if (s.host === host && s.range && s.meltApplied > 0) this.meltRange(arr, work, s.range, s.meltApplied);
+      }
+      pos.needsUpdate = true;
+      geo.computeVertexNormals();
+      geo.boundingBox = null;
+      geo.boundingSphere = null;
+    }
+    collapseRange(arr, range) {
+      const x = arr[range[0] * 3];
+      const y = arr[range[0] * 3 + 1];
+      const z = arr[range[0] * 3 + 2];
+      for (let i = range[0] * 3; i < range[1] * 3; i += 3) {
+        arr[i] = x;
+        arr[i + 1] = y;
+        arr[i + 2] = z;
+      }
+    }
+    /** Melt of one range: shorter in Y (down to 25 %) with the bottom fixed, a bit wider around its centre, with the same noise as a whole mesh. */
+    meltRange(arr, work, range, melt) {
+      let minY = Infinity;
+      let maxY = -Infinity;
+      let cx = 0;
+      let cz = 0;
+      const n = Math.max(1, range[1] - range[0]);
+      for (let i = range[0] * 3; i < range[1] * 3; i += 3) {
+        minY = Math.min(minY, work[i + 1]);
+        maxY = Math.max(maxY, work[i + 1]);
+        cx += work[i];
+        cz += work[i + 2];
+      }
+      cx /= n;
+      cz /= n;
+      const h = Math.max(1e-4, maxY - minY);
+      const sy = lerp(1, 0.25, melt);
+      const sxz = 1 + 0.18 * melt;
+      for (let i = range[0] * 3, v = 0; i < range[1] * 3; i += 3, v++) {
+        const noise = (Math.imul(v + 1, 2654435761) >>> 0) % 1e3 / 1e3;
+        arr[i] = cx + (work[i] - cx) * sxz;
+        arr[i + 2] = cz + (work[i + 2] - cz) * sxz;
+        arr[i + 1] = Math.max(minY, minY + (work[i + 1] - minY) * sy - noise * melt * h * 0.04);
+      }
+    }
+    /** The colour attribute of the host's current geometry (created white when there is none) with vertex colours switched on in its material. */
+    ensureColors(host) {
+      if (!this.ownHostGeometry(host)) return null;
+      const geo = host.mesh.geometry;
+      let attr = geo.getAttribute("color");
+      if (!attr) {
+        const n = geo.getAttribute(POS_ATTR).count;
+        attr = new this.THREE.BufferAttribute(new Float32Array(n * 3).fill(1), 3);
+        geo.setAttribute("color", attr);
+      }
+      if (!host.ownMat) {
+        host.ownMat = true;
+        const src = materialsOf(host.mesh.material);
+        const cloned = src.map((m) => m.clone());
+        host.mesh.material = Array.isArray(host.mesh.material) ? cloned : cloned[0];
+      }
+      for (const m of materialsOf(host.mesh.material)) {
+        if (m.vertexColors !== true) {
+          ;
+          m.vertexColors = true;
+          m.needsUpdate = true;
+        }
+      }
+      return attr;
+    }
+    /** Colour of the part's vertices from the original colours, its char and its heat. Only the part's range is written. */
+    paint(mv) {
+      if (!mv.host || !mv.range || !mv.merged) return;
+      const idle = mv.charK <= 0 && mv.glowK <= 0;
+      if (idle && !mv.touched) return;
+      const attr = this.ensureColors(mv.host);
+      if (!attr) return;
+      const size = attr.itemSize;
+      const arr = attr.array;
+      const orig = mv.merged.host.origGeometry.getAttribute("color");
+      const oSize = orig?.itemSize ?? 3;
+      const oArr = orig?.array;
+      const shift = mv.merged.range[0] - mv.range[0];
+      const ch = new this.THREE.Color(mv.charHex);
+      const heat = new this.THREE.Color(mv.glowHex);
+      const k = clamp(mv.charK, 0, 1);
+      const gk = clamp(mv.glowK, 0, 1);
+      const boost = 1 + Math.max(0, mv.glowK - 1);
+      for (let i = mv.range[0]; i < mv.range[1]; i++) {
+        const o = (i + shift) * oSize;
+        let r = oArr ? oArr[o] : 1;
+        let g = oArr ? oArr[o + 1] : 1;
+        let b = oArr ? oArr[o + 2] : 1;
+        if (k > 0) {
+          r = lerp(r, ch.r, k);
+          g = lerp(g, ch.g, k);
+          b = lerp(b, ch.b, k);
+        }
+        if (gk > 0) {
+          r = lerp(r, heat.r * boost, gk);
+          g = lerp(g, heat.g * boost, gk);
+          b = lerp(b, heat.b * boost, gk);
+        }
+        arr[i * size] = r;
+        arr[i * size + 1] = g;
+        arr[i * size + 2] = b;
+      }
+      mv.touched = true;
+      attr.needsUpdate = true;
+    }
+    /**
+     * Move a ranged part to a mesh of its own: the faces whose vertices all lie in its range are copied (with the current dents and colours) into a
+     * new mesh that takes the merged mesh's transform and material, then attached to `group`; the range is collapsed in the merged mesh. Decals
+     * go with it.
+     */
+    extract(mv, group) {
+      if (!mv.host || !mv.range || !mv.merged || mv.loose) return;
+      const host = mv.host;
+      const [v0, v1] = mv.range;
+      const src = host.mesh.geometry;
+      const geo = new this.THREE.BufferGeometry();
+      const count = v1 - v0;
+      for (const name of Object.keys(src.attributes)) {
+        const a = src.getAttribute(name);
+        if (a.isInterleavedBufferAttribute) continue;
+        const size = a.itemSize;
+        const from = (name === POS_ATTR ? host.work : null) ?? a.array;
+        const slice = from.slice(v0 * size, v1 * size);
+        const Ctor = a.array.constructor;
+        geo.setAttribute(name, new this.THREE.BufferAttribute(new Ctor(slice), size, a.normalized));
+      }
+      const index = src.getIndex();
+      if (index) {
+        const out = [];
+        for (let i = 0; i + 2 < index.count; i += 3) {
+          const a = index.getX(i);
+          const b = index.getX(i + 1);
+          const c = index.getX(i + 2);
+          if (a >= v0 && a < v1 && b >= v0 && b < v1 && c >= v0 && c < v1) out.push(a - v0, b - v0, c - v0);
+        }
+        geo.setIndex(count > 65535 ? new this.THREE.Uint32BufferAttribute(out, 1) : new this.THREE.Uint16BufferAttribute(out, 1));
+      }
+      const mats = materialsOf(host.mesh.material).map((m) => m.clone());
+      const loose = new this.THREE.Mesh(geo, mats[0]);
+      loose.name = `${host.mesh.name || "mesh"}:${v0}-${v1}`;
+      loose.castShadow = host.mesh.castShadow;
+      loose.receiveShadow = host.mesh.receiveShadow;
+      loose.renderOrder = host.mesh.renderOrder;
+      loose.frustumCulled = host.mesh.frustumCulled;
+      loose.layers.mask = host.mesh.layers.mask;
+      loose.position.copy(host.mesh.position);
+      loose.quaternion.copy(host.mesh.quaternion);
+      loose.scale.copy(host.mesh.scale);
+      const parent = host.mesh.parent;
+      if (parent) parent.add(loose);
+      loose.updateMatrixWorld(true);
+      this.collapse(mv);
+      for (const d of mv.decals) {
+        d.obj.visible = true;
+        loose.add(d.obj);
+      }
+      const lp = positionAttr(geo);
+      const lh = {
+        mesh: loose,
+        origGeometry: geo,
+        origMaterial: loose.material,
+        ownGeo: true,
+        work: new Float32Array(lp.array),
+        ownMat: true,
+        sharers: [mv]
+      };
+      mv.host = lh;
+      mv.range = [0, count];
+      mv.mesh = loose;
+      mv.loose = true;
+      mv.moved = true;
+      group.attach(loose);
+      for (const m of materialsOf(loose.material)) m.needsUpdate = true;
+    }
+    restoreRanged(mv) {
+      const merged = mv.merged;
+      const host = merged.host;
+      for (const d of mv.decals) this.disposeDecal(d);
+      mv.decals.length = 0;
+      if (mv.loose) {
+        const loose = mv.mesh;
+        loose.parent?.remove(loose);
+        loose.geometry.dispose();
+        for (const m of materialsOf(loose.material)) m.dispose();
+        mv.host = host;
+        mv.range = [merged.range[0], merged.range[1]];
+        mv.mesh = host.mesh;
+        mv.loose = false;
+        mv.moved = false;
+      }
+      mv.collapsed = false;
+      mv.hidden = false;
+      mv.meltApplied = 0;
+      mv.charK = 0;
+      mv.glowK = 0;
+      mv.touched = false;
+      if (!host.ownGeo) return;
+      const work = host.work;
+      const op = positionAttr(host.origGeometry);
+      const [v0, v1] = merged.range;
+      if (op) work.set(op.array.subarray(v0 * 3, v1 * 3), v0 * 3);
+      const attr = host.mesh.geometry.getAttribute("color");
+      if (attr) {
+        const orig = host.origGeometry.getAttribute("color");
+        const size = attr.itemSize;
+        const a = attr.array;
+        for (let i = v0; i < v1; i++) {
+          for (let c = 0; c < 3; c++) a[i * size + c] = orig ? orig.array[i * orig.itemSize + c] : 1;
+        }
+        attr.needsUpdate = true;
+      }
+      if (host.sharers.every((s) => !s.touched)) {
+        host.mesh.geometry.dispose();
+        host.mesh.geometry = host.origGeometry;
+        host.work = null;
+        host.ownGeo = false;
+        if (host.ownMat) {
+          for (const m of materialsOf(host.mesh.material)) m.dispose();
+          host.mesh.material = host.origMaterial;
+          host.ownMat = false;
+        }
+      } else this.rebuildHost(host);
     }
     /** Bring one mesh back to how it was when it was bound. */
     restoreMesh(mv) {
+      if (mv.merged) {
+        this.restoreRanged(mv);
+        return;
+      }
       const mesh = mv.mesh;
       for (const d of mv.decals) this.disposeDecal(d);
       mv.decals.length = 0;
@@ -2745,6 +3102,10 @@ void main() {
   function materialsOf2(m) {
     return Array.isArray(m) ? m : [m];
   }
+  function isMeshRange(v) {
+    const r = v;
+    return !!r.mesh && Array.isArray(r.range);
+  }
   function createDestructionRenderer(THREE, options) {
     return new Renderer(THREE, options);
   }
@@ -2838,12 +3199,23 @@ void main() {
       const partIds = new Set((state?.parts ?? []).map((p) => p.id));
       const byPart = /* @__PURE__ */ new Map();
       const taken = /* @__PURE__ */ new Set();
+      const put = (pid, e) => {
+        const l = byPart.get(pid);
+        if (l) l.push(e);
+        else byPart.set(pid, [e]);
+      };
       const add = (pid, m) => {
         if (taken.has(m)) return;
         taken.add(m);
-        const l = byPart.get(pid);
-        if (l) l.push(m);
-        else byPart.set(pid, [m]);
+        put(pid, { mesh: m });
+      };
+      const addRange = (pid, r) => {
+        const n = r.mesh.geometry.getAttribute("position")?.count ?? 0;
+        const [v0, v1] = r.range;
+        if (!Number.isInteger(v0) || !Number.isInteger(v1) || v0 < 0 || v1 <= v0 || v1 > n) {
+          throw new Error(`game-destruction-three: invalid vertex range [${v0}, ${v1}) for part "${pid}" (the mesh has ${n} vertices)`);
+        }
+        put(pid, { mesh: r.mesh, range: [v0, v1] });
       };
       const meshesIn = (o) => {
         const out = [];
@@ -2854,7 +3226,10 @@ void main() {
       };
       if (options.parts) {
         for (const [pid, v] of Object.entries(options.parts)) {
-          for (const o of Array.isArray(v) ? v : [v]) for (const m of meshesIn(o)) add(pid, m);
+          for (const o of Array.isArray(v) ? v : [v]) {
+            if (isMeshRange(o)) addRange(pid, o);
+            else for (const m of meshesIn(o)) add(pid, m);
+          }
         }
       } else {
         const leftovers = [];
@@ -2867,14 +3242,15 @@ void main() {
         if (leftovers.length) this.matchByBox(objectId, root, leftovers, add);
       }
       const bound = { id: objectId, root, sync: options.syncTransform !== false, parts: /* @__PURE__ */ new Map(), lastPos: null, lastQuat: null, piece: null, isSplit: false };
-      for (const pid of partIds) bound.parts.set(pid, this.makePartVis(objectId, pid, state?.parts.find((p) => p.id === pid)?.material ?? "", byPart.get(pid) ?? []));
+      const hosts = /* @__PURE__ */ new Map();
+      for (const pid of partIds) bound.parts.set(pid, this.makePartVis(objectId, pid, state?.parts.find((p) => p.id === pid)?.material ?? "", byPart.get(pid) ?? [], hosts));
       for (const [pid, meshes] of byPart) {
-        if (!bound.parts.has(pid)) bound.parts.set(pid, this.makePartVis(objectId, pid, this.world.part(objectId, pid)?.material ?? "", meshes));
+        if (!bound.parts.has(pid)) bound.parts.set(pid, this.makePartVis(objectId, pid, this.world.part(objectId, pid)?.material ?? "", meshes, hosts));
       }
       this.bounds.set(objectId, bound);
     }
-    makePartVis(home, id, material, meshes) {
-      return { id, home, material, meshes: meshes.map((m) => this.visuals.makeMeshVis(m, home)), charApplied: 0, glowApplied: 0, meltApplied: 0, gone: "none" };
+    makePartVis(home, id, material, meshes, hosts) {
+      return { id, home, material, meshes: meshes.map((m) => this.visuals.makeMeshVis(m.mesh, home, m.range, hosts)), charApplied: 0, glowApplied: 0, meltApplied: 0, gone: "none" };
     }
     /** Match unlabelled meshes to the part whose shape contains the centre of the mesh's bounding box. */
     matchByBox(objectId, root, meshes, add) {
@@ -2934,11 +3310,13 @@ void main() {
       const inv = root.matrixWorld.clone().invert();
       const total = new this.THREE.Box3();
       const m4 = new this.THREE.Matrix4();
-      for (const m of meshes) {
-        const g = m.geometry;
-        if (!g.boundingBox) g.computeBoundingBox();
-        if (!g.boundingBox || g.boundingBox.isEmpty()) continue;
-        total.union(g.boundingBox.clone().applyMatrix4(m4.multiplyMatrices(inv, m.matrixWorld)));
+      const lb = new this.THREE.Box3();
+      for (const mv of meshes) {
+        const m = mv.mesh;
+        m.updateWorldMatrix(true, false);
+        this.visuals.localBox(mv, lb);
+        if (lb.isEmpty()) continue;
+        total.union(lb.clone().applyMatrix4(m4.multiplyMatrices(inv, m.matrixWorld)));
       }
       if (total.isEmpty()) return { half: [0.25, 0.25, 0.25], center: new this.THREE.Vector3() };
       const size = total.getSize(new this.THREE.Vector3());
@@ -2946,7 +3324,7 @@ void main() {
     }
     meshesOf(b) {
       const out = [];
-      for (const pv of b.parts.values()) if (pv.gone === "none") for (const mv of pv.meshes) out.push(mv.mesh);
+      for (const pv of b.parts.values()) if (pv.gone === "none") for (const mv of pv.meshes) out.push(mv);
       return out;
     }
     massOf(objectId) {
@@ -3077,6 +3455,9 @@ void main() {
         case "detach":
           this.onDetach(ev);
           break;
+        case "collapse":
+          this.splitLoose(ev.object);
+          break;
         case "disassemble_progress": {
           const k = `unscrew:${ev.joint}`;
           if (this.time - (this.throttles.get(k) ?? -1) > 0.25) {
@@ -3195,8 +3576,8 @@ void main() {
       let best = null;
       let bd = Infinity;
       for (const mv of pv.meshes) {
-        if (!mv.mesh.visible) continue;
-        const d = this.box.setFromObject(mv.mesh).distanceToPoint(p);
+        if (!this.visuals.shown(mv)) continue;
+        const d = this.visuals.worldBox(mv, this.box).distanceToPoint(p);
         if (d < bd) {
           bd = d;
           best = mv;
@@ -3216,7 +3597,7 @@ void main() {
       const wp = new this.THREE.Vector3(ev.worldPoint[0], ev.worldPoint[1], ev.worldPoint[2]);
       const wn = this.worldDir(b, ev.dent.normal);
       for (const mv of pv.meshes) {
-        if (!mv.mesh.visible) continue;
+        if (!this.visuals.shown(mv)) continue;
         this.visuals.applyDent(mv, wp, wn, ev.dent);
       }
       if (def?.tags?.includes("metal")) this.particles.burst("sparks", ev.worldPoint, [wn.x, wn.y, wn.z], 4 + Math.min(8, ev.dent.depth * 150), 3.2);
@@ -3307,16 +3688,20 @@ void main() {
     }
     onDetach(ev) {
       this.sound("detach", this.rootPoint(ev.object), 0.5);
+      this.splitLoose(ev.object);
+    }
+    /** Turn every loose group of the object (a detach, a collapse) into a piece of its own. */
+    splitLoose(objectId) {
       if (!this.autoSplit) return;
-      const b = this.bounds.get(ev.object);
+      const b = this.bounds.get(objectId);
       if (!b) return;
-      const st = this.world.state(ev.object);
+      const st = this.world.state(objectId);
       if (!st || st.groups.length < 2) return;
       const loose = st.groups.length - 1;
       for (let i = 0; i < loose; i++) {
         let newId;
         try {
-          newId = this.world.splitGroup(ev.object, 1);
+          newId = this.world.splitGroup(objectId, 1);
         } catch {
           break;
         }
@@ -3327,7 +3712,7 @@ void main() {
         const { half, center } = this.measure(b.root, this.meshesOf(b));
         old.halfExtents = half;
         this.pieceSys.setCenter(old, center);
-        old.mass = Math.max(0.05, this.massOf(ev.object));
+        old.mass = Math.max(0.05, this.massOf(objectId));
         old.sleeping = false;
       }
     }
@@ -3349,8 +3734,11 @@ void main() {
         from.parts.delete(p.id);
         nb.parts.set(p.id, pv);
         for (const mv of pv.meshes) {
-          group.attach(mv.mesh);
-          mv.moved = true;
+          if (mv.host && !mv.loose) this.visuals.extract(mv, group);
+          else {
+            group.attach(mv.mesh);
+            mv.moved = true;
+          }
         }
       }
       this.bounds.set(newId, nb);
@@ -3466,7 +3854,7 @@ void main() {
     }
     onGone(objectId, pv, reason, def) {
       const bb = new this.THREE.Box3();
-      for (const mv of pv.meshes) bb.union(this.box.setFromObject(mv.mesh));
+      for (const mv of pv.meshes) bb.union(this.visuals.worldBox(mv, this.box));
       this.visuals.hide(pv, reason);
       if (bb.isEmpty()) return;
       const c = bb.getCenter(new this.THREE.Vector3());
@@ -3483,7 +3871,7 @@ void main() {
       const bb = this.box;
       bb.makeEmpty();
       const tmp = new this.THREE.Box3();
-      for (const mv of pv.meshes) if (mv.mesh.visible) bb.union(tmp.setFromObject(mv.mesh));
+      for (const mv of pv.meshes) if (this.visuals.shown(mv)) bb.union(this.visuals.worldBox(mv, tmp));
       let cx = f.point[0];
       let cy = f.point[1];
       let cz = f.point[2];