@broberg/bodymap 0.2.8 → 0.3.0

package/dist/three.cjs

@@ -236,6 +236,17 @@ var ANCHORS = {
   foot_left: [-0.1, 0.02, 0.11],
   foot_right: [0.1, 0.02, 0.11]
 };
+var SEAM = 0.18;
+function seamBlend(nearestSq, secondSq) {
+  const d1 = Math.sqrt(nearestSq), d2 = Math.sqrt(secondSq);
+  const sum = d1 + d2;
+  if (!(sum > 0)) return 0;
+  const ratio = d1 / sum;
+  const t = (ratio - (0.5 - SEAM)) / SEAM;
+  if (t <= 0) return 0;
+  if (t >= 1) return 0.5;
+  return t * t * (3 - 2 * t) * 0.5;
+}
 var ANCHOR_KEYS = Object.keys(ANCHORS);
 for (const k of ANCHOR_KEYS) ANCHORS[k][0] = -ANCHORS[k][0];
 function mergeLabels(locale, overrides) {
@@ -378,6 +389,8 @@ function BodyMap3D(props) {
     let modelRoot = null;
     let bodyMesh = null;
     let vertexRegion = [];
+    let vertexNeighbour = [];
+    let vertexBlend = new Float32Array(0);
     let colorAttr = null;
     let hovered = null;
     const loader = new GLTFLoader_js.GLTFLoader();
@@ -389,14 +402,32 @@ function BodyMap3D(props) {
       if (selectedRef.current === key) return paletteRef.current.selected;
       return baseColorFor(key, paletteRef.current);
     };
-    const colorRegion = (key, hex) => {
+    const tmp2 = new THREE__namespace.Color();
+    const colourOf = (key) => hovered === key ? paletteRef.current.hover : restingHex(key);
+    const paint = () => {
       if (!colorAttr) return;
-      tmp.set(hex);
-      for (let i = 0; i < vertexRegion.length; i++) if (vertexRegion[i] === key) colorAttr.setXYZ(i, tmp.r, tmp.g, tmp.b);
+      const cache = /* @__PURE__ */ new Map();
+      const col = (k) => {
+        let c = cache.get(k);
+        if (!c) {
+          c = new THREE__namespace.Color(colourOf(k));
+          cache.set(k, c);
+        }
+        return c;
+      };
+      for (let i = 0; i < vertexRegion.length; i++) {
+        tmp.copy(col(vertexRegion[i]));
+        const w = vertexBlend[i];
+        if (w > 0) {
+          tmp2.copy(col(vertexNeighbour[i]));
+          tmp.lerp(tmp2, w);
+        }
+        colorAttr.setXYZ(i, tmp.r, tmp.g, tmp.b);
+      }
       colorAttr.needsUpdate = true;
     };
     const refresh = () => {
-      for (const k of ANCHOR_KEYS) colorRegion(k, hovered === k ? paletteRef.current.hover : restingHex(k));
+      paint();
       renderFrame();
     };
     const loadModel = (which) => {
@@ -425,18 +456,27 @@ function BodyMap3D(props) {
           const n = pos.count;
           const cols = new Float32Array(n * 3);
           vertexRegion = new Array(n);
+          vertexNeighbour = new Array(n);
+          vertexBlend = new Float32Array(n);
           const v = new THREE__namespace.Vector3();
           for (let i = 0; i < n; i++) {
             v.fromBufferAttribute(pos, i).applyMatrix4(bodyMesh.matrixWorld);
-            let best = 0, bd = Infinity;
+            let best = 0, second = 0, bd = Infinity, sd = Infinity;
             for (let a = 0; a < anchorVecs.length; a++) {
               const d = v.distanceToSquared(anchorVecs[a]);
               if (d < bd) {
+                sd = bd;
+                second = best;
                 bd = d;
                 best = a;
+              } else if (d < sd) {
+                sd = d;
+                second = a;
               }
             }
             vertexRegion[i] = ANCHOR_KEYS[best];
+            vertexNeighbour[i] = ANCHOR_KEYS[second];
+            vertexBlend[i] = seamBlend(bd, sd);
           }
           colorAttr = new THREE__namespace.BufferAttribute(cols, 3);
           geo.setAttribute("color", colorAttr);
@@ -496,10 +536,8 @@ function BodyMap3D(props) {
       if ((e.buttons || 0) !== 0) return;
       const k = pick(e.clientX, e.clientY);
       if (k === hovered) return;
-      const prev = hovered;
       hovered = k;
-      if (prev) colorRegion(prev, restingHex(prev));
-      if (k) colorRegion(k, paletteRef.current.hover);
+      paint();
       canvas.style.cursor = k ? "pointer" : "default";
       renderFrame();
     };
@@ -609,6 +647,7 @@ function BodyMap3D(props) {
 }
 
 exports.BodyMap3D = BodyMap3D;
+exports.seamBlend = seamBlend;
 exports.serializeReport = serializeReport;
 //# sourceMappingURL=three.cjs.map
 //# sourceMappingURL=three.cjs.map