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

🚀 Auto-deploy: melhoria no snap e medição AR em 24/05/2026 18:37:52

Browse Source
This commit is contained in:
admtracksteel
2026-05-24 18:37:52 +00:00
parent 2bce52fe54
commit 13c1ad315d
2 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ViewCube.tsx
+7 -37
View File
@@ -80,25 +80,15 @@ export function ViewCube() {
{/* Cubo 3D Visual */} {/* Cubo 3D Visual */}
<div className="relative h-20 w-20 flex items-center justify-center my-2 group"> <div className="relative h-20 w-20 flex items-center justify-center my-2 group">
{/* Container do Cubo Isométrico */} {/* Container do Cubo Isométrico */}
<div <div className="h-14 w-14 transition-transform duration-500 ease-out viewcube-wrapper">
className="h-14 w-14 transition-transform duration-500 ease-out"
style={{
transformStyle: 'preserve-3d',
transform: 'rotateX(-30deg) rotateY(45deg)',
}}
>
{/* TOPO (Z+) */} {/* TOPO (Z+) */}
<div <div
onClick={() => alignToFace('TOPO')} onClick={() => alignToFace('TOPO')}
onMouseEnter={() => setHoveredFace('TOPO')} onMouseEnter={() => setHoveredFace('TOPO')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-top ${
hoveredFace === 'TOPO' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-800/80 text-zinc-300' hoveredFace === 'TOPO' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-800/80 text-zinc-300'
}`} }`}
style={{
transform: 'rotateX(90deg) translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
TOPO TOPO
</div> </div>
@@ -108,13 +98,9 @@ export function ViewCube() {
onClick={() => alignToFace('FRENTE')} onClick={() => alignToFace('FRENTE')}
onMouseEnter={() => setHoveredFace('FRENTE')} onMouseEnter={() => setHoveredFace('FRENTE')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-front ${
hoveredFace === 'FRENTE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-700/80 text-zinc-300' hoveredFace === 'FRENTE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-700/80 text-zinc-300'
}`} }`}
style={{
transform: 'translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
FRENTE FRENTE
</div> </div>
@@ -124,13 +110,9 @@ export function ViewCube() {
onClick={() => alignToFace('DIREITA')} onClick={() => alignToFace('DIREITA')}
onMouseEnter={() => setHoveredFace('DIREITA')} onMouseEnter={() => setHoveredFace('DIREITA')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-right ${
hoveredFace === 'DIREITA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300' hoveredFace === 'DIREITA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
}`} }`}
style={{
transform: 'rotateY(90deg) translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
DIR DIR
</div> </div>
@@ -140,13 +122,9 @@ export function ViewCube() {
onClick={() => alignToFace('ESQUERDA')} onClick={() => alignToFace('ESQUERDA')}
onMouseEnter={() => setHoveredFace('ESQUERDA')} onMouseEnter={() => setHoveredFace('ESQUERDA')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-left ${
hoveredFace === 'ESQUERDA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300' hoveredFace === 'ESQUERDA' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-850/80 text-zinc-300'
}`} }`}
style={{
transform: 'rotateY(-90deg) translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
ESQ ESQ
</div> </div>
@@ -156,13 +134,9 @@ export function ViewCube() {
onClick={() => alignToFace('ATRÁS')} onClick={() => alignToFace('ATRÁS')}
onMouseEnter={() => setHoveredFace('ATRÁS')} onMouseEnter={() => setHoveredFace('ATRÁS')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-back ${
hoveredFace === 'ATRÁS' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-750/80 text-zinc-300' hoveredFace === 'ATRÁS' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-750/80 text-zinc-300'
}`} }`}
style={{
transform: 'rotateY(180deg) translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
ATRÁS ATRÁS
</div> </div>
@@ -172,13 +146,9 @@ export function ViewCube() {
onClick={() => alignToFace('BASE')} onClick={() => alignToFace('BASE')}
onMouseEnter={() => setHoveredFace('BASE')} onMouseEnter={() => setHoveredFace('BASE')}
onMouseLeave={() => setHoveredFace(null)} onMouseLeave={() => setHoveredFace(null)}
className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 ${ className={`absolute h-14 w-14 border border-white/20 flex items-center justify-center font-mono text-[9px] font-bold cursor-pointer transition-all duration-200 viewcube-face-bottom ${
hoveredFace === 'BASE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-900/80 text-zinc-300' hoveredFace === 'BASE' ? 'bg-primary/40 border-primary text-white shadow-[0_0_10px_rgba(59,130,246,0.5)]' : 'bg-zinc-900/80 text-zinc-300'
}`} }`}
style={{
transform: 'rotateX(-90deg) translateZ(28px)',
backfaceVisibility: 'hidden',
}}
> >
BASE BASE
</div> </div>
src/index.css
+35
View File
@@ -92,4 +92,39 @@
linear-gradient(90deg, hsl(220 14% 18% / 0.5) 1px, transparent 1px); linear-gradient(90deg, hsl(220 14% 18% / 0.5) 1px, transparent 1px);
background-size: 20px 20px; background-size: 20px 20px;
} }
.viewcube-wrapper {
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(45deg);
}
.viewcube-face-top {
transform: rotateX(90deg) translateZ(28px);
backface-visibility: hidden;
}
.viewcube-face-front {
transform: translateZ(28px);
backface-visibility: hidden;
}
.viewcube-face-right {
transform: rotateY(90deg) translateZ(28px);
backface-visibility: hidden;
}
.viewcube-face-left {
transform: rotateY(-90deg) translateZ(28px);
backface-visibility: hidden;
}
.viewcube-face-back {
transform: rotateY(180deg) translateZ(28px);
backface-visibility: hidden;
}
.viewcube-face-bottom {
transform: rotateX(-90deg) translateZ(28px);
backface-visibility: hidden;
}
} }