🚀 Auto-deploy: melhoria no snap e medição AR em 24/05/2026 13:56:02

src/components/three/XRHudInWorld.tsx

@@ -11,7 +11,7 @@ import {
   stopRecording, captureScreenshot, formatElapsed,
 } from '@/hooks/useCanvasRecorder';
 
-type Tab = 'scene' | 'tools' | 'inspection' | 'share' | 'capture' | 'webxr';
+type Tab = 'scene' | 'tools' | 'inspection' | 'share' | 'capture' | 'env';
 
 interface XRHudInWorldProps {
   freeMove: boolean;
@@ -221,7 +221,7 @@ function FloatingPanel({
     { id: 'inspection', label: 'Inspeção', icon: '✓' },
     { id: 'capture', label: 'Captura', icon: '🎥' },
     { id: 'share', label: 'Compart.', icon: '📡' },
-    { id: 'webxr', label: 'WebXR', icon: '⚙' },
+    { id: 'env', label: 'Ambiente', icon: '🏝' },
   ];
   const W = 0.5, H = 0.36;
   return (
@@ -261,7 +261,7 @@ function FloatingPanel({
         {tab === 'inspection' && <InspectionTab />}
         {tab === 'capture' && <CaptureTab />}
         {tab === 'share' && <ShareTab {...p} />}
-        {tab === 'webxr' && <WebXRTab />}
+        {tab === 'env' && <EnvTab />}
       </group>
     </XR3DPanel>
   );
@@ -583,45 +583,79 @@ function ShareTab(p: XRHudInWorldProps) {
   );
 }
 
-function WebXRTab() {
-  const xrFeatures = useModelStore((s) => s.xrFeatures);
-  const setXRFeature = useModelStore((s) => s.setXRFeature);
-  const reset = useModelStore((s) => s.resetXRFeatures);
-  const keys: { k: keyof typeof xrFeatures; label: string }[] = [
-    { k: 'handTracking',    label: 'Hand' },
-    { k: 'planeDetection',  label: 'Planes' },
-    { k: 'hitTest',         label: 'HitTest' },
-    { k: 'domOverlay',      label: 'DOM Ovl' },
-    { k: 'anchors',         label: 'Anchors' },
-    { k: 'meshDetection',   label: 'Mesh' },
-    { k: 'depthSensing',    label: 'Depth' },
-    { k: 'layers',          label: 'Layers' },
-    { k: 'bodyTracking',    label: 'Body' },
-  ];
+function EnvTab() {
+  const xrEnvironment = useModelStore((s) => s.xrEnvironment);
+  const setXrEnvironment = useModelStore((s) => s.setXrEnvironment);
+  const xrScaleMode = useModelStore((s) => s.xrScaleMode);
+  const setXrScaleMode = useModelStore((s) => s.setXrScaleMode);
+
   return (
     <group>
-      <Text position={[-0.24, 0.115, 0]} fontSize={0.0085} color="#94a3b8" anchorX="left" maxWidth={0.48}>
-        Desligue uma feature por vez para descobrir qual ativa o grid de segurança do Quest.
+      <Text position={[-0.24, 0.11, 0]} fontSize={0.0085} color="#94a3b8" anchorX="left">
+        Cenário Imersivo (VR / AR)
       </Text>
-      <Text position={[-0.24, 0.095, 0]} fontSize={0.0075} color="#f59e0b" anchorX="left" maxWidth={0.48}>
-        Mudanças entram em vigor ao sair e re-entrar no AR.
+
+      <XR3DButton
+        position={[-0.14, 0.075, 0]}
+        size={[0.13, 0.026]}
+        label="Passthrough (AR)"
+        active={xrEnvironment === 'passthrough'}
+        onClick={() => setXrEnvironment('passthrough')}
+        fontSize={0.008}
+      />
+      <XR3DButton
+        position={[0.0, 0.075, 0]}
+        size={[0.13, 0.026]}
+        label="Escritório (VR)"
+        active={xrEnvironment === 'office'}
+        onClick={() => {
+          setXrEnvironment('office');
+          setXrScaleMode('tabletop');
+        }}
+        fontSize={0.008}
+      />
+      <XR3DButton
+        position={[0.14, 0.075, 0]}
+        size={[0.13, 0.026]}
+        label="Campo Aberto (VR)"
+        active={xrEnvironment === 'field'}
+        onClick={() => {
+          setXrEnvironment('field');
+          setXrScaleMode('realscale');
+        }}
+        fontSize={0.008}
+      />
+
+      <Text position={[-0.24, 0.02, 0]} fontSize={0.0085} color="#94a3b8" anchorX="left">
+        Escala de Apresentação do IFC
+      </Text>
+
+      <XR3DButton
+        position={[-0.08, -0.015, 0]}
+        size={[0.18, 0.026]}
+        label="Escala Real 1:1 (Caminhar)"
+        active={xrScaleMode === 'realscale'}
+        onClick={() => setXrScaleMode('realscale')}
+        fontSize={0.0085}
+      />
+      <XR3DButton
+        position={[0.11, -0.015, 0]}
+        size={[0.18, 0.026]}
+        label="Modo Maquete (Mesa)"
+        active={xrScaleMode === 'tabletop'}
+        onClick={() => setXrScaleMode('tabletop')}
+        fontSize={0.0085}
+      />
+
+      <Text position={[-0.24, -0.065, 0]} fontSize={0.007} color="#94a3b8" anchorX="left" maxWidth={0.48}>
+        • Passthrough: veja o mundo real à sua volta (Realidade Aumentada).
+      </Text>
+      <Text position={[-0.24, -0.085, 0]} fontSize={0.007} color="#94a3b8" anchorX="left" maxWidth={0.48}>
+        • Escritório: maquete interativa reduzida em cima de uma mesa virtual de reunião.
+      </Text>
+      <Text position={[-0.24, -0.105, 0]} fontSize={0.007} color="#94a3b8" anchorX="left" maxWidth={0.48}>
+        • Campo Aberto: terreno gramado em escala real para explorar estruturas e galpões.
       </Text>
-      {keys.map((it, i) => {
-        const col = i % 3;
-        const row = Math.floor(i / 3);
-        const x = -0.18 + col * 0.14;
-        const y = 0.05 - row * 0.045;
-        const on = xrFeatures[it.k];
-        return (
-          <XR3DButton key={it.k}
-            position={[x, y, 0]} size={[0.125, 0.034]}
-            label={`${it.label}  ${on ? 'ON' : 'OFF'}`}
-            active={on} onClick={() => setXRFeature(it.k, !on)}
-            fontSize={0.0085} />
-        );
-      })}
-      <XR3DButton position={[0, -0.14, 0]} size={[0.18, 0.028]}
-        label="↺ Resetar (todas ON)" onClick={reset} fontSize={0.009} />
     </group>
   );
 }