Atualizou visual de bordas

X-Lovable-Edit-ID: edt-f5acd6ab-7778-44a9-9aae-716f987b2f62
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>

src/components/ViewerControls.tsx

@@ -11,13 +11,14 @@ import * as THREE from 'three';
 import { elementKey, sceneRef } from '@/components/three/ModelViewer';
 
 const WIRE_COLORS = [
-  { label: 'Cinza', value: '#8899aa' },
+  { label: 'Ciano (radiante)', value: '#00f3ff' },
   { label: 'Vermelho', value: '#ef4444' },
   { label: 'Verde', value: '#22c55e' },
   { label: 'Azul', value: '#3b82f6' },
   { label: 'Amarelo', value: '#eab308' },
   { label: 'Laranja', value: '#f97316' },
   { label: 'Branco', value: '#e2e8f0' },
+  { label: 'Cinza', value: '#8899aa' },
 ];
 
 export function ViewerControls() {
@@ -108,22 +109,19 @@ export function ViewerControls() {
       <ScaleSelector />
 
       <Button
-        variant={renderMode !== 'solid' ? 'default' : 'outline'}
+        variant={renderMode === 'edges' ? 'default' : 'outline'}
         size="sm"
         className="gap-2 h-9"
-        onClick={() => {
+        onClick={() => setRenderMode(renderMode === 'edges' ? 'solid' : 'edges')}
-          const next = renderMode === 'solid' ? 'wireframe' : renderMode === 'wireframe' ? 'edges' : 'solid';
-          setRenderMode(next);
-        }}
       >
-        {renderMode === 'edges' ? <Box className="h-3.5 w-3.5" /> : <Grid3X3 className="h-3.5 w-3.5" />}
+        <Box className="h-3.5 w-3.5" />
         <span className="font-mono text-xs">
-          {renderMode === 'solid' ? 'Sólido' : renderMode === 'wireframe' ? 'Wireframe' : 'Bordas'}
+          {renderMode === 'edges' ? 'Bordas' : 'Sólido'}
         </span>
       </Button>
 
-      {/* Wireframe/Edges settings popover */}
+      {/* Edges color/thickness/threshold popover */}
-      {renderMode !== 'solid' && (
+      {renderMode === 'edges' && (
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="outline" size="sm" className="gap-2 h-9">

src/components/XRHud.tsx

@@ -342,15 +342,12 @@ export function XRHud({ freeMove, onToggleFreeMove, placementMode = false, onTog
               </Button>
 
               <Button
-                variant={renderMode !== 'solid' ? 'default' : 'outline'}
+                variant={renderMode === 'edges' ? 'default' : 'outline'}
                 size="sm" className="h-8 gap-1.5 text-[10px] font-mono"
-                onClick={() => {
+                onClick={() => setRenderMode(renderMode === 'edges' ? 'solid' : 'edges')}
-                  const next = renderMode === 'solid' ? 'wireframe' : renderMode === 'wireframe' ? 'edges' : 'solid';
-                  setRenderMode(next);
-                }}
               >
-                {renderMode === 'edges' ? <Box className="h-3.5 w-3.5" /> : <Grid3X3 className="h-3.5 w-3.5" />}
+                <Box className="h-3.5 w-3.5" />
-                {renderMode === 'solid' ? 'Sólido' : renderMode === 'wireframe' ? 'Wire' : 'Bordas'}
+                {renderMode === 'edges' ? 'Bordas' : 'Sólido'}
               </Button>
 
               <Button

src/components/three/ModelViewer.tsx

@@ -190,6 +190,9 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive:
           const lineMat = new THREE.LineBasicMaterial({
             color: measureMode ? '#00f3ff' : wireframeColor,
             linewidth: measureMode ? 2 : wireframeThickness,
+            toneMapped: false,
+            transparent: true,
+            opacity: 0.95,
           });
           const lineSegments = new THREE.LineSegments(edgesGeo, lineMat);
           lineSegments.userData.__edgeLine = true;

src/pages/XRSession.tsx

@@ -182,6 +182,9 @@ function XRModel({ sceneModel }: { sceneModel: import('@/stores/useModelStore').
           const lineMat = new THREE.LineBasicMaterial({
             color: measureMode ? '#00f3ff' : wireframeColor,
             linewidth: measureMode ? 2 : wireframeThickness,
+            toneMapped: false,
+            transparent: true,
+            opacity: 0.95,
           });
           const lineSegments = new THREE.LineSegments(edgesGeo, lineMat);
           lineSegments.userData.__edgeLine = true;

src/stores/useModelStore.ts

@@ -485,10 +485,10 @@ export const useModelStore = create<ModelStore>((set, get) => ({
   setGridAutoFollow: (gridAutoFollow) => set({ gridAutoFollow }),
   nudgeGridY: (delta) => set((s) => ({ gridY: s.gridY + delta, gridAutoFollow: false })),
 
-  wireframeColor: '#8899aa',
+  wireframeColor: '#00f3ff',
   setWireframeColor: (wireframeColor) => set({ wireframeColor }),
 
-  wireframeThickness: 1,
+  wireframeThickness: 2,
   setWireframeThickness: (wireframeThickness) => set({ wireframeThickness }),
 
   edgeThresholdAngle: 15,