diff --git a/web/pose_3d.js b/web/pose_3d.js index 4691bd1..d73e19c 100644 --- a/web/pose_3d.js +++ b/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(),