admtracksteel/SteelXR2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add edges render mode

Browse Source 
Implemented an edge-based rendering option using THREE.EdgesGeometry with a configurable threshold. Updated store to include edgeThresholdAngle and render mode cycle (solid/wireframe/edges). Enhanced ModelViewer to render edges and UI controls to switch modes and adjust edge angle, thickness, and color.

X-Lovable-Edit-ID: edt-5361ed6c-e9a3-4ef6-b7e2-40f24b7ecd18
This commit is contained in:
gpt-engineer-app[bot]
2026-02-27 02:47:55 +00:00
parent 9d9018d83a c9a91ebc7a
commit f258de525a
3 changed files with 87 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ViewerControls.tsx
+28 -10
View File
@@ -1,4 +1,4 @@
import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette } from 'lucide-react';
import { Eye, Grid3X3, Ruler, Trash2, Camera, LayoutGrid, Palette, Box } from 'lucide-react';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -24,6 +24,7 @@ export function ViewerControls() {
showGrid, setShowGrid,
wireframeColor, setWireframeColor,
wireframeThickness, setWireframeThickness,
edgeThresholdAngle, setEdgeThresholdAngle,
} = useModelStore();
const handleScreenshot = useCallback(() => {
@@ -68,21 +69,24 @@ export function ViewerControls() {
<span className="font-mono text-xs">Grid</span>
</Button>
{/* Render mode toggle */}
{/* Render mode cycle: solid -> wireframe -> edges */}
<Button
variant={renderMode === 'wireframe' ? 'default' : 'outline'}
variant={renderMode !== 'solid' ? 'default' : 'outline'}
size="sm"
className="gap-2 h-9"
onClick={() => setRenderMode(renderMode === 'solid' ? 'wireframe' : 'solid')}
onClick={() => {
const next = renderMode === 'solid' ? 'wireframe' : renderMode === 'wireframe' ? 'edges' : 'solid';
setRenderMode(next);
}}
>
<Grid3X3 className="h-3.5 w-3.5" />
{renderMode === 'edges' ? <Box className="h-3.5 w-3.5" /> : <Grid3X3 className="h-3.5 w-3.5" />}
<span className="font-mono text-xs">
{renderMode === 'wireframe' ? 'Wireframe' : 'Sólido'}
{renderMode === 'solid' ? 'Sólido' : renderMode === 'wireframe' ? 'Wireframe' : 'Bordas'}
</span>
</Button>
{/* Wireframe settings popover */}
{renderMode === 'wireframe' && (
{/* Wireframe/Edges settings popover */}
{renderMode !== 'solid' && (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="sm" className="gap-2 h-9">
@@ -92,7 +96,7 @@ export function ViewerControls() {
</PopoverTrigger>
<PopoverContent className="w-56 space-y-3" side="top" align="start">
<div>
<span className="font-mono text-xs text-muted-foreground">Cor do Wireframe</span>
<span className="font-mono text-xs text-muted-foreground">Cor das Linhas</span>
<div className="mt-2 flex flex-wrap gap-2">
{WIRE_COLORS.map((c) => (
<button
@@ -118,10 +122,24 @@ export function ViewerControls() {
onValueChange={([v]) => setWireframeThickness(v)}
/>
</div>
{renderMode === 'edges' && (
<div>
<div className="flex items-center justify-between mb-1">
<span className="font-mono text-xs text-muted-foreground">Ângulo Limite</span>
<span className="font-mono text-xs text-foreground">{edgeThresholdAngle}°</span>
</div>
<Slider
value={[edgeThresholdAngle]}
min={1}
max={45}
step={1}
onValueChange={([v]) => setEdgeThresholdAngle(v)}
/>
</div>
)}
</PopoverContent>
</Popover>
)}
{/* Measure tool */}
<div className="flex items-end gap-1.5">
<Button
src/components/three/ModelViewer.tsx
+52 -15
View File
@@ -27,6 +27,7 @@ function GLBModel({ url }: { url: string }) {
const renderMode = useModelStore((s) => s.renderMode);
const wireframeColor = useModelStore((s) => s.wireframeColor);
const wireframeThickness = useModelStore((s) => s.wireframeThickness);
const edgeThresholdAngle = useModelStore((s) => s.edgeThresholdAngle);
const checklist = useModelStore((s) => s.checklist);
const fineTuning = useModelStore((s) => s.fineTuning);
@@ -39,6 +40,9 @@ function GLBModel({ url }: { url: string }) {
return { size, center };
}, [scene]);
// Store original colors so we can restore them
const originalColors = useRef<Map<THREE.Material, THREE.Color>>(new Map());
useEffect(() => {
const hasRejected = checklist.some(i => i.status === 'rejected');
const allApproved = checklist.every(i => i.status === 'approved');
@@ -50,31 +54,64 @@ function GLBModel({ url }: { url: string }) {
} else {
child.material = child.material.clone();
}
// Clean up previous edge lines
const toRemove: THREE.Object3D[] = [];
child.children.forEach(c => {
if (c.userData.__edgeLine) toRemove.push(c);
});
toRemove.forEach(c => {
if (c instanceof THREE.LineSegments) {
c.geometry.dispose();
(c.material as THREE.Material).dispose();
}
child.remove(c);
});
const materials = Array.isArray(child.material) ? child.material : [child.material];
materials.forEach((mat: THREE.Material) => {
if (mat instanceof THREE.MeshStandardMaterial) {
mat.transparent = opacity < 1;
mat.opacity = opacity;
mat.wireframe = renderMode === 'wireframe';
if (renderMode === 'wireframe') {
mat.wireframeLinewidth = wireframeThickness;
// Store original color on first encounter
if (!originalColors.current.has(mat)) {
originalColors.current.set(mat, mat.color.clone());
}
mat.needsUpdate = true;
mat.needsUpdate = true;
if (renderMode === 'wireframe') {
mat.color.set(wireframeColor);
} else if (hasRejected) {
mat.color.setHSL(0, 0.7, 0.5);
} else if (allApproved) {
mat.color.setHSL(0.38, 0.7, 0.45);
if (renderMode === 'edges') {
mat.visible = false;
} else {
mat.color.set(0x8899aa);
mat.visible = true;
mat.transparent = opacity < 1;
mat.opacity = opacity;
mat.wireframe = renderMode === 'wireframe';
if (renderMode === 'wireframe') {
mat.wireframeLinewidth = wireframeThickness;
mat.color.set(wireframeColor);
} else if (hasRejected) {
mat.color.setHSL(0, 0.7, 0.5);
} else if (allApproved) {
mat.color.setHSL(0.38, 0.7, 0.45);
} else {
mat.color.set(0x8899aa);
}
}
mat.needsUpdate = true;
}
});
// Create edge lines for edges mode
if (renderMode === 'edges' && child.geometry) {
const edgesGeo = new THREE.EdgesGeometry(child.geometry, edgeThresholdAngle);
const lineMat = new THREE.LineBasicMaterial({
color: wireframeColor,
linewidth: wireframeThickness,
});
const lineSegments = new THREE.LineSegments(edgesGeo, lineMat);
lineSegments.userData.__edgeLine = true;
child.add(lineSegments);
}
}
});
}, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness]);
}, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness, edgeThresholdAngle]);
const rotYRad = (fineTuning.rotY * Math.PI) / 180;
src/stores/useModelStore.ts
+7 -1
View File
@@ -15,7 +15,7 @@ interface FineTuning {
type AnchorMode = 'tracking' | 'manual' | 'fine-tuning';
type InspectionResult = 'pending' | 'approved' | 'rejected';
type RenderMode = 'solid' | 'wireframe';
type RenderMode = 'solid' | 'wireframe' | 'edges';
export interface MeasurePoint {
x: number;
@@ -77,6 +77,9 @@ interface ModelStore {
wireframeThickness: number;
setWireframeThickness: (t: number) => void;
edgeThresholdAngle: number;
setEdgeThresholdAngle: (angle: number) => void;
checklist: ChecklistItem[];
setChecklistItemStatus: (id: string, status: 'approved' | 'rejected') => void;
setChecklistItemNote: (id: string, note: string) => void;
@@ -136,6 +139,9 @@ export const useModelStore = create<ModelStore>((set) => ({
wireframeThickness: 1,
setWireframeThickness: (wireframeThickness) => set({ wireframeThickness }),
edgeThresholdAngle: 15,
setEdgeThresholdAngle: (edgeThresholdAngle) => set({ edgeThresholdAngle }),
checklist: defaultChecklist.map(i => ({ ...i })),
setChecklistItemStatus: (id, status) => set((state) => ({
checklist: state.checklist.map(item =>