feat(pose_3d): etichette DX/SX sulle sfere e FRONT al base

web/pose_3d.js

@@ -26,6 +26,25 @@ function makeUCS(size = 0.1) {
   return g;
 }
 
+function makeLabelSprite(text, color = '#ffffff') {
+  const canvas = document.createElement('canvas');
+  canvas.width = 128;
+  canvas.height = 64;
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = color;
+  ctx.font = 'bold 36px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+  const texture = new THREE.CanvasTexture(canvas);
+  const material = new THREE.SpriteMaterial({ map: texture, depthTest: false });
+  const sprite = new THREE.Sprite(material);
+  sprite.scale.set(0.10, 0.05, 1);  // ~10cm wide x 5cm tall in scene units
+  return sprite;
+}
+
 function makeWristMarker(color) {
   const group = new THREE.Group();
   const sphere = new THREE.Mesh(
@@ -90,6 +109,10 @@ function initScene() {
   const baseUCS = makeUCS(0.2);
   scene.add(baseUCS);
 
+  const frontArrow = makeLabelSprite('FRONT', '#ffd54f');
+  frontArrow.position.set(0.30, 0, 0.05);
+  scene.add(frontArrow);
+
   // Torso
   const torso = new THREE.Mesh(
     new THREE.BoxGeometry(0.20, 0.40, 0.50),
@@ -106,6 +129,12 @@ function initScene() {
     scene.add(wrist);
     state.arms[side] = wrist;
 
+    // Etichetta DX / SX sopra la sfera
+    const label = makeLabelSprite(side === 'right' ? 'DX' : 'SX',
+                                   side === 'right' ? '#4da3ff' : '#ff5e7e');
+    label.position.set(0, 0, 0.08);  // 8cm sopra la sfera (locale al gruppo)
+    wrist.add(label);
+
     // Linea shoulder → wrist
     const lineGeom = new THREE.BufferGeometry().setFromPoints([
       SHOULDER[side].clone(),