🚀 Auto-deploy: melhoria no snap e medição AR em 22/05/2026 21:07:04

src/pages/XRSession.tsx

@@ -307,6 +307,61 @@ function ControllerFineTuning({ freeMove }: { freeMove: boolean }) {
   return null;
 }
 
+// Componente de renderização de texto compatível e seguro para WebXR
+function XRMeasurementText({ text, color }: { text: string; color: string }) {
+  const texture = useMemo(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 64;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      // Limpa e desenha fundo semi-transparente
+      ctx.fillStyle = 'rgba(11, 18, 32, 0.85)';
+      ctx.beginPath();
+      // Desenha retângulo arredondado manualmente
+      const x = 0, y = 0, width = 256, height = 64, radius = 12;
+      ctx.moveTo(x + radius, y);
+      ctx.lineTo(x + width - radius, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+      ctx.lineTo(x + width, y + height - radius);
+      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+      ctx.lineTo(x + radius, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+      ctx.lineTo(x, y + radius);
+      ctx.quadraticCurveTo(x, y, x + radius, y);
+      ctx.closePath();
+      ctx.fill();
+
+      // Desenha borda sutil
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 3;
+      ctx.stroke();
+
+      // Texto
+      ctx.fillStyle = color;
+      ctx.font = 'bold 24px monospace';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(text, 128, 32);
+    }
+    const tex = new THREE.CanvasTexture(canvas);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    return tex;
+  }, [text, color]);
+
+  return (
+    <mesh renderOrder={999}>
+      <planeGeometry args={[0.08, 0.02]} />
+      <meshBasicMaterial 
+        map={texture} 
+        transparent 
+        depthTest={false} 
+        side={THREE.DoubleSide} 
+      />
+    </mesh>
+  );
+}
+
 // ─── Measurement overlay (reused from ModelViewer) ─────
 function XRMeasurementOverlay() {
   const measurements = useModelStore((s) => s.measurements);
@@ -345,21 +400,7 @@ function XRMeasurementOverlay() {
               </>
             )}
             <group position={mid}>
-              <mesh position={[0, 0, 0]} renderOrder={998}>
-                <planeGeometry args={[0.09, 0.024]} />
-                <meshBasicMaterial color="#0b1220" transparent opacity={0.85} depthTest={false} />
-              </mesh>
-              <Text
-                position={[0, 0, 0.001]}
-                fontSize={0.012}
-                color={color}
-                anchorX="center"
-                anchorY="middle"
-                renderOrder={999}
-                material-depthTest={false}
-              >
-                {text}
-              </Text>
+              <XRMeasurementText text={text} color={color} />
             </group>
           </group>
         );