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

🚀 Auto-deploy: melhoria no snap e medição AR em 28/05/2026 21:16:09

Browse Source
This commit is contained in:
admtracksteel
2026-05-28 21:16:09 +00:00
parent aff19146f0
commit 9b7f237afc
4 changed files with 494 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/three/XRHudInWorld.tsx
+133 -3
View File
@@ -12,8 +12,16 @@ import {
stopRecording, captureScreenshot, formatElapsed,
} from '@/hooks/useCanvasRecorder';
import { getAllModelLocalGroups } from '@/lib/modelTransforms';
import { toast } from 'sonner';
import {
xrCalibration,
startXRCalibration,
cancelXRCalibration,
subscribeXRCalibration,
} from './xrCalibrationBus';
import { XRViewCube } from './XRViewCube';
type Tab = 'scene' | 'tools' | 'cuts' | 'inspection' | 'share' | 'capture' | 'webxr';
type Tab = 'scene' | 'tools' | 'calib' | 'cuts' | 'inspection' | 'share' | 'capture' | 'webxr';
interface XRHudInWorldProps {
freeMove: boolean;
@@ -225,6 +233,7 @@ function FloatingPanel({
const tabs: { id: Tab; label: string; icon: string }[] = [
{ id: 'scene', label: 'Cena', icon: '🧩' },
{ id: 'tools', label: 'Ferram.', icon: '🛠' },
{ id: 'calib', label: 'Calibrar', icon: '🎯' },
{ id: 'cuts', label: 'Cortes', icon: '✂' },
{ id: 'inspection', label: 'Inspeção', icon: '✓' },
{ id: 'capture', label: 'Captura', icon: '🎥' },
@@ -257,15 +266,16 @@ function FloatingPanel({
<group position={[0, H / 2 - 0.045, 0.001]}>
{tabs.map((t, i) => (
<XR3DButton key={t.id}
position={[-W / 2 + 0.038 + i * 0.072, 0, 0]} size={[0.066, 0.022]}
position={[-W / 2 + 0.0495 + i * 0.063, 0, 0]} size={[0.058, 0.020]}
label={t.label} icon={t.icon} active={tab === t.id}
onClick={() => setTab(t.id)} fontSize={0.0068} />
onClick={() => setTab(t.id)} fontSize={0.0062} />
))}
</group>
<group position={[0, -0.018, 0.001]}>
{tab === 'scene' && <SceneTab />}
{tab === 'tools' && <ToolsTab {...p} />}
{tab === 'calib' && <CalibrationTab />}
{tab === 'cuts' && <CutsTab />}
{tab === 'inspection' && <InspectionTab />}
{tab === 'capture' && <CaptureTab />}
@@ -879,3 +889,123 @@ function RecIndicator() {
</group>
);
}
function CalibrationTab() {
const activeModelId = useModelStore((s) => s.activeModelId);
const models = useModelStore((s) => s.models);
const setCalibrationStore = useModelStore((s) => s.setCalibration);
const active = models.find((m) => m.id === activeModelId);
// Escuta o barramento de calibração do XR
const [, force] = useState(0);
useEffect(() => subscribeXRCalibration(() => force((t) => t + 1)), []);
const isCalibrating = xrCalibration.step !== 'idle' && xrCalibration.step !== 'done';
const isDone = xrCalibration.step === 'done';
const progress = isDone ? 1 : xrCalibration.progress;
const onClickCalibrar = () => {
if (isCalibrating || isDone) {
cancelXRCalibration();
return;
}
if (!active) {
toast.error('Selecione uma peça antes de calibrar');
return;
}
if (active.locked) {
toast.error('Peça travada — destranque a peça para calibrar');
return;
}
startXRCalibration(active.id);
};
const onResetCalibration = () => {
if (!active) return;
setCalibrationStore(active.id, null);
toast.success('Calibração removida');
};
const STEP_HINTS_AR: Record<string, string> = {
'await-cube-1': '1/3 - Clique numa face do Cubo à direita',
'await-model-1': '1/3 - Aponte e clique na face correspondente da peça',
'await-cube-2': '2/3 - Clique em outra face do Cubo',
'await-model-2': '2/3 - Clique na face correspondente da peça',
'await-cube-3': '3/3 (Verificar) - Clique em uma 3ª face do Cubo (opcional)',
'await-model-3': '3/3 - Clique na face correspondente da peça',
'done': 'Calibração concluída com sucesso!',
};
const currentHint = STEP_HINTS_AR[xrCalibration.step] ?? 'Clique em "Iniciar Calibrar" para alinhar o modelo';
return (
<group>
{/* Coluna da esquerda: Informações e Fluxo */}
<Text position={[-0.24, 0.11, 0]} fontSize={0.012} color="#3b82f6" anchorX="left" anchorY="middle" fontStyle="bold">
Calibração 3D da Peça
</Text>
<Text position={[-0.24, 0.07, 0]} fontSize={0.008} color="#cbd5e1" anchorX="left" anchorY="top" maxWidth={0.28}>
Alinhe os eixos intrínsecos do modelo 3D com a estrutura física correspondente no ambiente.
</Text>
{/* Caixa de status do passo atual */}
<group position={[-0.24, 0.00, 0]}>
<mesh position={[0.13, 0, -0.0005]}>
<planeGeometry args={[0.26, 0.05]} />
<meshBasicMaterial color="#111827" transparent opacity={0.65} />
</mesh>
<Text position={[0.01, 0, 0.001]} fontSize={0.0085} color={isDone ? '#22c55e' : isCalibrating ? '#f59e0b' : '#ffffff'} anchorX="left" anchorY="middle" maxWidth={0.24}>
{currentHint}
</Text>
{isDone && Number.isFinite(xrCalibration.verifyErrorDeg) && (
<Text position={[0.01, -0.016, 0.001]} fontSize={0.007} color="#22c55e" anchorX="left" anchorY="middle">
Erro residual calculado: {xrCalibration.verifyErrorDeg.toFixed(1)}°
</Text>
)}
</group>
{/* Botões na parte inferior esquerda */}
<group position={[-0.24, -0.06, 0]}>
<XR3DButton
position={[0.06, 0, 0]}
size={[0.11, 0.026]}
label={isDone ? 'Concluído' : isCalibrating ? 'Cancelar' : 'Iniciar Calibrar'}
active={isCalibrating || isDone}
color={isDone ? '#22c55e' : isCalibrating ? '#d97706' : '#3b82f6'}
onClick={onClickCalibrar}
fontSize={0.008}
/>
{active?.calibrationQuat && !isCalibrating && (
<XR3DButton
position={[0.18, 0, 0]}
size={[0.09, 0.026]}
label="Remover Cal."
color="#dc2626"
onClick={onResetCalibration}
fontSize={0.008}
/>
)}
</group>
<Text position={[-0.24, -0.11, 0]} fontSize={0.007} color="#64748b" anchorX="left" maxWidth={0.28}>
{active ? `Peça ativa: ${active.fileName}` : 'Selecione uma peça na aba "Cena"'}
</Text>
{/* Coluna da direita: Cubo de views 3D interativo */}
<group position={[0.14, -0.01, 0.04]}>
<XRViewCube activeModelId={activeModelId} size={0.075} />
{/* Tripé dos eixos abaixo do cubo */}
<group position={[0, -0.06, -0.04]} scale={[0.035, 0.035, 0.035]}>
<arrowHelper args={[new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0), 0.7, 0xff4444, 0.18, 0.12]} />
<arrowHelper args={[new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0), 0.7, 0x44ff66, 0.18, 0.12]} />
<arrowHelper args={[new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 0), 0.7, 0x4488ff, 0.18, 0.12]} />
</group>
<Text position={[0, 0.065, -0.04]} fontSize={0.008} color="#cbd5e1" anchorX="center" anchorY="middle">
Cubo de Calibração
</Text>
</group>
</group>
);
}
src/components/three/XRViewCube.tsx
+125
View File
@@ -0,0 +1,125 @@
import { useRef, useMemo, useEffect, useState } from 'react';
import { useFrame, ThreeEvent } from '@react-three/fiber';
import * as THREE from 'three';
import { pushXRCubeFace } from './xrCalibrationBus';
import { getModelLocalGroup } from '@/lib/modelTransforms';
function makeFaceTexture(label: string, accent: boolean): THREE.CanvasTexture {
const size = 256;
const c = document.createElement('canvas');
c.width = size;
c.height = size;
const ctx = c.getContext('2d')!;
const grad = ctx.createLinearGradient(0, 0, 0, size);
grad.addColorStop(0, accent ? '#1e3a8a' : '#111827');
grad.addColorStop(1, accent ? '#0f172a' : '#030712');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, size, size);
ctx.strokeStyle = '#3b82f6';
ctx.lineWidth = 8;
ctx.strokeRect(4, 4, size - 8, size - 8);
ctx.fillStyle = '#ffffff';
ctx.font = '700 52px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.shadowColor = '#3b82f6';
ctx.shadowBlur = 10;
ctx.fillText(label, size / 2, size / 2);
const tex = new THREE.CanvasTexture(c);
tex.anisotropy = 4;
tex.needsUpdate = true;
return tex;
}
const FACE_DEFS: { label: string; dir: [number, number, number] }[] = [
{ label: 'DIR', dir: [ 1, 0, 0] },
{ label: 'ESQ', dir: [-1, 0, 0] },
{ label: 'TOPO', dir: [ 0, 1, 0] },
{ label: 'BASE', dir: [ 0,-1, 0] },
{ label: 'FRENTE', dir: [ 0, 0, 1] },
{ label: 'ATRÁS', dir: [ 0, 0,-1] },
];
export function XRViewCube({ activeModelId, size = 0.06 }: { activeModelId: string | null; size?: number }) {
const groupRef = useRef<THREE.Group>(null);
const [hover, setHover] = useState<number | null>(null);
const materials = useMemo(() => {
return FACE_DEFS.map((f, i) => {
const tex = makeFaceTexture(f.label, false);
const mat = new THREE.MeshBasicMaterial({ map: tex });
mat.userData.baseTex = tex;
mat.userData.hoverTex = makeFaceTexture(f.label, true);
mat.userData.faceIndex = i;
return mat;
});
}, []);
useEffect(() => {
return () => {
materials.forEach((m) => {
m.userData.baseTex?.dispose?.();
m.userData.hoverTex?.dispose?.();
m.dispose();
});
};
}, [materials]);
useEffect(() => {
materials.forEach((m, i) => {
m.map = i === hover ? m.userData.hoverTex : m.userData.baseTex;
m.needsUpdate = true;
});
}, [hover, materials]);
const modelQuat = useMemo(() => new THREE.Quaternion(), []);
const getModelWorldQuat = (): THREE.Quaternion => {
const g = getModelLocalGroup(activeModelId);
if (g) {
g.updateWorldMatrix(true, false);
g.getWorldQuaternion(modelQuat);
return modelQuat;
}
modelQuat.identity();
return modelQuat;
};
useFrame(() => {
if (groupRef.current) {
// Sincroniza a rotação do cubo no HUD AR com a rotação do modelo ativo no mundo AR.
// Desta forma, o cubo reflete a orientação 3D da peça.
groupRef.current.quaternion.copy(getModelWorldQuat());
}
});
const onClick = (e: ThreeEvent<MouseEvent>) => {
e.stopPropagation();
const idx = e.face?.materialIndex;
if (idx == null) return;
const def = FACE_DEFS[idx];
if (!def) return;
const dirWorld = new THREE.Vector3(...def.dir).applyQuaternion(getModelWorldQuat()).normalize();
pushXRCubeFace(dirWorld);
};
return (
<group ref={groupRef}>
<mesh
material={materials}
onClick={onClick}
onPointerOver={(e) => {
e.stopPropagation();
const idx = e.face?.materialIndex ?? null;
setHover(idx);
}}
onPointerOut={(e) => {
e.stopPropagation();
setHover(null);
}}
>
<boxGeometry args={[size, size, size]} />
</mesh>
</group>
);
}
src/components/three/xrCalibrationBus.ts
+168
View File
@@ -0,0 +1,168 @@
import * as THREE from 'three';
import { useModelStore } from '@/stores/useModelStore';
export type XRCalibrationStep =
| 'idle'
| 'await-cube-1'
| 'await-model-1'
| 'await-cube-2'
| 'await-model-2'
| 'await-cube-3' // opcional verificação
| 'await-model-3'
| 'done';
interface XRPair {
cube: THREE.Vector3;
model: THREE.Vector3;
}
interface XRCalState {
step: XRCalibrationStep;
modelId: string | null;
pairs: XRPair[];
pendingCube: THREE.Vector3 | null;
progress: number;
verifyErrorDeg: number;
listeners: Set<() => void>;
}
export const xrCalibration: XRCalState = {
step: 'idle',
modelId: null,
pairs: [],
pendingCube: null,
progress: 0,
verifyErrorDeg: NaN,
listeners: new Set(),
};
function notify() {
xrCalibration.listeners.forEach((fn) => {
try {
fn();
} catch {}
});
}
export function subscribeXRCalibration(fn: () => void): () => void {
xrCalibration.listeners.add(fn);
return () => {
xrCalibration.listeners.delete(fn);
};
}
export function startXRCalibration(modelId: string) {
xrCalibration.step = 'await-cube-1';
xrCalibration.modelId = modelId;
xrCalibration.pairs = [];
xrCalibration.pendingCube = null;
xrCalibration.progress = 0;
xrCalibration.verifyErrorDeg = NaN;
notify();
}
export function cancelXRCalibration() {
xrCalibration.step = 'idle';
xrCalibration.modelId = null;
xrCalibration.pairs = [];
xrCalibration.pendingCube = null;
xrCalibration.progress = 0;
xrCalibration.verifyErrorDeg = NaN;
notify();
}
export function pushXRCubeFace(dirWorld: THREE.Vector3) {
if (xrCalibration.step === 'await-cube-1') {
xrCalibration.pendingCube = dirWorld.clone().normalize();
xrCalibration.step = 'await-model-1';
} else if (xrCalibration.step === 'await-cube-2') {
xrCalibration.pendingCube = dirWorld.clone().normalize();
xrCalibration.step = 'await-model-2';
} else if (xrCalibration.step === 'await-cube-3') {
xrCalibration.pendingCube = dirWorld.clone().normalize();
xrCalibration.step = 'await-model-3';
} else {
return;
}
notify();
}
function snapToPrincipalAxis(v: THREE.Vector3, maxDeg = 12): THREE.Vector3 {
const cosT = Math.cos(THREE.MathUtils.degToRad(maxDeg));
const axes = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, -1, 0),
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0, 0, -1),
];
let best = v;
let bestDot = cosT;
for (const a of axes) {
const d = v.dot(a);
if (d > bestDot) {
bestDot = d;
best = a.clone();
}
}
return best;
}
export function pushXRModelFaceNormal(normalWorld: THREE.Vector3, calGroupWorldQuat: THREE.Quaternion) {
if (!xrCalibration.pendingCube) return;
const cubeWorld = xrCalibration.pendingCube;
const inv = calGroupWorldQuat.clone().invert();
const cubeLocal = cubeWorld.clone().applyQuaternion(inv).normalize();
const modelLocalRaw = normalWorld.clone().applyQuaternion(inv).normalize();
const modelLocal = snapToPrincipalAxis(modelLocalRaw, 12);
xrCalibration.pairs.push({ cube: cubeLocal, model: modelLocal });
xrCalibration.pendingCube = null;
if (xrCalibration.step === 'await-model-1') {
xrCalibration.step = 'await-cube-2';
xrCalibration.progress = 0.33;
} else if (xrCalibration.step === 'await-model-2') {
xrCalibration.progress = 0.75;
xrCalibration.step = 'await-cube-3';
} else if (xrCalibration.step === 'await-model-3') {
xrCalibration.progress = 1;
xrCalibration.verifyErrorDeg = computeXRVerifyError(xrCalibration.pairs);
xrCalibration.step = 'done';
}
notify();
}
export function computeXRCalibrationQuaternion(pairs: XRPair[]): THREE.Quaternion | null {
if (pairs.length < 2) return null;
const n1 = pairs[0].model.clone().normalize();
const n2raw = pairs[1].model.clone();
let n2 = n2raw.sub(n1.clone().multiplyScalar(n2raw.dot(n1)));
if (n2.lengthSq() < 1e-6) return null;
n2.normalize();
const n3 = new THREE.Vector3().crossVectors(n1, n2);
const c1 = pairs[0].cube.clone().normalize();
const c2raw = pairs[1].cube.clone();
let c2 = c2raw.sub(c1.clone().multiplyScalar(c2raw.dot(c1)));
if (c2.lengthSq() < 1e-6) return null;
c2.normalize();
const c3 = new THREE.Vector3().crossVectors(c1, c2);
const N = new THREE.Matrix4().makeBasis(n1, n2, n3);
const C = new THREE.Matrix4().makeBasis(c1, c2, c3);
const Nt = N.clone().transpose();
const R = new THREE.Matrix4().multiplyMatrices(C, Nt);
const q = new THREE.Quaternion().setFromRotationMatrix(R);
return q;
}
export function computeXRVerifyError(pairs: XRPair[]): number {
if (pairs.length < 3) return NaN;
const q = computeXRCalibrationQuaternion(pairs.slice(0, 2));
if (!q) return NaN;
const predicted = pairs[2].model.clone().applyQuaternion(q).normalize();
const target = pairs[2].cube.clone().normalize();
const cos = THREE.MathUtils.clamp(predicted.dot(target), -1, 1);
return THREE.MathUtils.radToDeg(Math.acos(cos));
}
src/pages/XRSession.tsx
+68 -15
View File
@@ -26,6 +26,12 @@ import { VisibilityApplier } from '@/components/three/ModelViewer';
import { registerModelLocalGroup, unregisterModelLocalGroup } from '@/lib/modelTransforms';
import { parseIFCtoThree } from '@/lib/convertIFC';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {
xrCalibration,
pushXRModelFaceNormal,
computeXRCalibrationQuaternion,
subscribeXRCalibration,
} from '@/components/three/xrCalibrationBus';
// --- Diagnóstico XR ---
console.log('[XR] Inicializando store...');
@@ -100,8 +106,15 @@ function XRModel({ sceneModel }: { sceneModel: import('@/stores/useModelStore').
}, [sceneModel.url, sceneModel.fileName]);
const ref = useRef<THREE.Group>(null);
const calGroupRef = useRef<THREE.Group>(null);
const localFrameRef = useRef<THREE.Group>(null);
// Escuta mudanças de calibração para re-renderizar no AR
const [, setCalTick] = useState(0);
useEffect(() => subscribeXRCalibration(() => setCalTick(t => t + 1)), []);
useEffect(() => {
const g = ref.current;
const g = localFrameRef.current;
if (!g) return;
registerModelLocalGroup(sceneModel.id, g);
return () => unregisterModelLocalGroup(sceneModel.id, g);
@@ -201,24 +214,64 @@ function XRModel({ sceneModel }: { sceneModel: import('@/stores/useModelStore').
const scaleRatio = useModelStore((st) => st.scaleRatio);
const renderFactor = scaleRatio?.factor ?? 1;
const calQuatArr = sceneModel.calibrationQuat;
const isCalibratingThis = xrCalibration.modelId === sceneModel.id && xrCalibration.step !== 'idle' && xrCalibration.step !== 'done';
const calQuat = useMemo(() => {
if (isCalibratingThis) return new THREE.Quaternion();
if (!calQuatArr) return new THREE.Quaternion();
return new THREE.Quaternion(calQuatArr[0], calQuatArr[1], calQuatArr[2], calQuatArr[3]);
}, [calQuatArr, isCalibratingThis]);
if (!sceneModel.visible) return null;
if (!scene) return null;
return (
<group scale={[renderFactor, renderFactor, renderFactor]}>
<group
ref={ref}
userData={{ modelId: sceneModel.id }}
position={[
-modelInfo.center.x + fineTuning.posX,
-modelInfo.center.y + fineTuning.posY,
-modelInfo.center.z + fineTuning.posZ,
]}
rotation={[rotXRad, rotYRad, rotZRad]}
scale={[s, s, s]}
>
<primitive object={scene} />
<XRLocalModelMeasurements modelId={sceneModel.id} />
<group
scale={[renderFactor, renderFactor, renderFactor]}
onClick={(e) => {
e.stopPropagation();
// Calibração XR: captura normal da face do modelo em espaço de mundo.
if (
xrCalibration.modelId === sceneModel.id &&
(xrCalibration.step === 'await-model-1' || xrCalibration.step === 'await-model-2' || xrCalibration.step === 'await-model-3') &&
e.face && e.object
) {
const n = e.face.normal.clone();
const nm = new THREE.Matrix3().getNormalMatrix(e.object.matrixWorld);
n.applyMatrix3(nm).normalize();
const wq = new THREE.Quaternion();
(calGroupRef.current ?? e.object).getWorldQuaternion(wq);
pushXRModelFaceNormal(n, wq);
// Aplica/atualiza calibração se tivermos >= 2 pares
if (xrCalibration.pairs.length >= 2) {
const q = computeXRCalibrationQuaternion(xrCalibration.pairs);
if (q) {
useModelStore.getState().setCalibration(sceneModel.id, [q.x, q.y, q.z, q.w]);
}
}
return;
}
}}
>
{/* Translação */}
<group position={[fineTuning.posX, fineTuning.posY, fineTuning.posZ]}>
{/* Rotação e escala em volta do centro geométrico */}
<group
ref={ref}
rotation={[rotXRad, rotYRad, rotZRad]}
scale={[s, s, s]}
>
{/* Rotação de calibração */}
<group ref={calGroupRef} quaternion={calQuat}>
{/* Sistema local do modelo com pivot no centro */}
<group ref={localFrameRef} position={[-modelInfo.center.x, -modelInfo.center.y, -modelInfo.center.z]} userData={{ modelId: sceneModel.id }}>
<primitive object={scene} />
<XRLocalModelMeasurements modelId={sceneModel.id} />
</group>
</group>
</group>
</group>
</group>
);