gpt-engineer-app[bot]
396 lines
13 KiB
TypeScript
396 lines
13 KiB
TypeScript
import { useEffect, useRef, useMemo, useCallback, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
||
import { useGLTF } from '@react-three/drei';
|
||
import { XR, createXRStore, useXR, XROrigin } from '@react-three/xr';
|
||
import * as THREE from 'three';
|
||
import { useModelStore } from '@/stores/useModelStore';
|
||
import { toast } from 'sonner';
|
||
import { ArrowLeft, Move, RotateCw, QrCode, Download, Crosshair } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { generateTrackingMarker, generateMarkerDownloadURL } from '@/lib/trackingMarker';
|
||
|
||
// Store tracking marker bitmap globally so it persists across renders
|
||
let markerBitmapPromise: Promise<ImageBitmap> | null = null;
|
||
function getMarkerBitmap(): Promise<ImageBitmap> {
|
||
if (!markerBitmapPromise) {
|
||
markerBitmapPromise = generateTrackingMarker();
|
||
}
|
||
return markerBitmapPromise;
|
||
}
|
||
|
||
const xrStore = createXRStore({
|
||
emulate: 'metaQuest3',
|
||
hand: { left: true, right: true },
|
||
controller: { left: true, right: true },
|
||
});
|
||
|
||
/**
|
||
* The 3D model rendered inside the XR scene.
|
||
*/
|
||
function XRModel({ url }: { url: string }) {
|
||
const { scene } = useGLTF(url);
|
||
const ref = useRef<THREE.Group>(null);
|
||
const fineTuning = useModelStore((s) => s.fineTuning);
|
||
const opacity = useModelStore((s) => s.opacity);
|
||
const renderMode = useModelStore((s) => s.renderMode);
|
||
const checklist = useModelStore((s) => s.checklist);
|
||
|
||
const modelInfo = useMemo(() => {
|
||
const box = new THREE.Box3().setFromObject(scene);
|
||
const size = new THREE.Vector3();
|
||
const center = new THREE.Vector3();
|
||
box.getSize(size);
|
||
box.getCenter(center);
|
||
return { size, center };
|
||
}, [scene]);
|
||
|
||
useEffect(() => {
|
||
const hasRejected = checklist.some(i => i.status === 'rejected');
|
||
const allApproved = checklist.every(i => i.status === 'approved');
|
||
|
||
scene.traverse((child) => {
|
||
if (child instanceof THREE.Mesh) {
|
||
if (Array.isArray(child.material)) {
|
||
child.material = child.material.map(m => m.clone());
|
||
} else {
|
||
child.material = child.material.clone();
|
||
}
|
||
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';
|
||
mat.needsUpdate = true;
|
||
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);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}, [scene, opacity, renderMode, checklist]);
|
||
|
||
const rotYRad = (fineTuning.rotY * Math.PI) / 180;
|
||
|
||
return (
|
||
<group
|
||
ref={ref}
|
||
position={[
|
||
-modelInfo.center.x + fineTuning.posX,
|
||
-modelInfo.center.y + fineTuning.posY,
|
||
-modelInfo.center.z + fineTuning.posZ,
|
||
]}
|
||
rotation={[0, rotYRad, 0]}
|
||
>
|
||
<primitive object={scene} />
|
||
</group>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Controller-based fine tuning input handler.
|
||
*/
|
||
function ControllerFineTuning() {
|
||
const { setFineTuning } = useModelStore();
|
||
const session = useXR((s) => s.session);
|
||
|
||
useFrame(() => {
|
||
if (!session) return;
|
||
const inputSources = session.inputSources;
|
||
if (!inputSources) return;
|
||
|
||
let leftAxes: number[] | null = null;
|
||
let rightAxes: number[] | null = null;
|
||
let gripHeld = false;
|
||
|
||
for (const source of inputSources) {
|
||
const gp = source.gamepad;
|
||
if (!gp) continue;
|
||
const gripButton = gp.buttons[2];
|
||
if (gripButton && gripButton.pressed) gripHeld = true;
|
||
if (source.handedness === 'left' && gp.axes.length >= 4) {
|
||
leftAxes = [gp.axes[2], gp.axes[3]];
|
||
}
|
||
if (source.handedness === 'right' && gp.axes.length >= 4) {
|
||
rightAxes = [gp.axes[2], gp.axes[3]];
|
||
}
|
||
}
|
||
|
||
if (!gripHeld) return;
|
||
|
||
const posStep = 0.001;
|
||
const rotStep = 0.1;
|
||
const deadzone = 0.15;
|
||
const store = useModelStore.getState();
|
||
const ft = { ...store.fineTuning };
|
||
|
||
if (leftAxes) {
|
||
if (Math.abs(leftAxes[0]) > deadzone) ft.posX += leftAxes[0] * posStep;
|
||
if (Math.abs(leftAxes[1]) > deadzone) ft.posY -= leftAxes[1] * posStep;
|
||
}
|
||
if (rightAxes) {
|
||
if (Math.abs(rightAxes[1]) > deadzone) ft.posZ += rightAxes[1] * posStep;
|
||
if (Math.abs(rightAxes[0]) > deadzone) ft.rotY += rightAxes[0] * rotStep;
|
||
}
|
||
|
||
setFineTuning(ft);
|
||
});
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Image Tracking Anchor — uses WebXR's getImageTrackingResults()
|
||
* to position the model at a detected QR marker.
|
||
* Falls back to manual placement when tracking is lost or unavailable.
|
||
*/
|
||
function ImageTrackingAnchor({ children }: { children: React.ReactNode }) {
|
||
const groupRef = useRef<THREE.Group>(null);
|
||
const session = useXR((s) => s.session);
|
||
const { gl } = useThree();
|
||
const { setAnchorMode } = useModelStore();
|
||
const trackingActive = useRef(false);
|
||
const lastPoseMatrix = useRef(new THREE.Matrix4());
|
||
|
||
useFrame((_, __, frame: any) => {
|
||
if (!frame || !session || !groupRef.current) return;
|
||
|
||
// Try to get image tracking results from the XR frame
|
||
try {
|
||
const results = frame.getImageTrackingResults?.();
|
||
if (results && results.length > 0) {
|
||
for (const result of results) {
|
||
if (result.trackingState === 'tracked' || result.trackingState === 'emulated') {
|
||
const refSpace = gl.xr.getReferenceSpace();
|
||
if (!refSpace) continue;
|
||
|
||
const pose = frame.getPose(result.imageSpace, refSpace);
|
||
if (pose) {
|
||
const pos = pose.transform.position;
|
||
const ori = pose.transform.orientation;
|
||
|
||
groupRef.current.position.set(pos.x, pos.y, pos.z);
|
||
groupRef.current.quaternion.set(ori.x, ori.y, ori.z, ori.w);
|
||
|
||
if (!trackingActive.current) {
|
||
trackingActive.current = true;
|
||
setAnchorMode('tracking');
|
||
toast.success('QR Code detectado — Modelo ancorado!');
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch {
|
||
// getImageTrackingResults not available — fall back to manual
|
||
}
|
||
|
||
// If tracking was active but lost
|
||
if (trackingActive.current) {
|
||
// Keep last known position (don't reset)
|
||
return;
|
||
}
|
||
|
||
// Manual fallback — place 1.5m in front
|
||
if (!trackingActive.current) {
|
||
groupRef.current.position.set(0, 0, -1.5);
|
||
groupRef.current.quaternion.identity();
|
||
}
|
||
});
|
||
|
||
return <group ref={groupRef}>{children}</group>;
|
||
}
|
||
|
||
const XRSession = () => {
|
||
const navigate = useNavigate();
|
||
const { model, xrSupported, anchorMode, setAnchorMode } = useModelStore();
|
||
const [inXR, setInXR] = useState(false);
|
||
const [markerReady, setMarkerReady] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!model) {
|
||
navigate('/');
|
||
return;
|
||
}
|
||
// Pre-load marker bitmap
|
||
getMarkerBitmap().then(() => setMarkerReady(true));
|
||
}, [model, navigate]);
|
||
|
||
const handleEnterAR = useCallback(async () => {
|
||
try {
|
||
// We attempt to request with image-tracking as optional feature.
|
||
// The createXRStore.enterAR will handle the session request.
|
||
// We need to configure the session with trackedImages.
|
||
// Since @react-three/xr doesn't directly support trackedImages,
|
||
// we'll try to patch it through the native API.
|
||
|
||
const bitmap = await getMarkerBitmap();
|
||
|
||
// Try entering AR with image tracking support
|
||
// The @react-three/xr store manages the session, but we can
|
||
// request image-tracking as an optional feature
|
||
try {
|
||
// Override: request session directly with trackedImages
|
||
if (navigator.xr) {
|
||
const session = await navigator.xr.requestSession('immersive-ar', {
|
||
requiredFeatures: ['local-floor'],
|
||
optionalFeatures: [
|
||
'hand-tracking',
|
||
'image-tracking',
|
||
'anchors',
|
||
'plane-detection',
|
||
],
|
||
// @ts-ignore — trackedImages is a WebXR extension
|
||
trackedImages: [
|
||
{
|
||
image: bitmap,
|
||
widthInMeters: 0.15, // 15cm QR code
|
||
},
|
||
],
|
||
});
|
||
|
||
// Let @react-three/xr know about this session
|
||
// by entering through the store after manual session creation
|
||
session.addEventListener('end', () => {
|
||
setInXR(false);
|
||
setAnchorMode('manual');
|
||
});
|
||
}
|
||
} catch {
|
||
// Fallback: enter AR without image tracking
|
||
console.warn('Image tracking not available, using manual placement');
|
||
}
|
||
|
||
await xrStore.enterAR();
|
||
setInXR(true);
|
||
setAnchorMode('manual');
|
||
toast.success('Sessão XR iniciada — Buscando QR Code…');
|
||
} catch (err: any) {
|
||
console.error('XR error:', err);
|
||
toast.error(`Falha ao iniciar XR: ${err.message}`);
|
||
}
|
||
}, [setAnchorMode]);
|
||
|
||
const handleDownloadMarker = useCallback(async () => {
|
||
const url = await generateMarkerDownloadURL();
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'TrackkSteelXR_Marker.png';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
toast.success('Marcador baixado — Imprima em 15×15cm');
|
||
}, []);
|
||
|
||
if (!model) return null;
|
||
|
||
return (
|
||
<div className="flex h-screen flex-col bg-background">
|
||
{/* Header */}
|
||
<header className="flex items-center justify-between border-b bg-card px-4 py-3 z-10">
|
||
<div className="flex items-center gap-3">
|
||
<Button variant="ghost" size="icon" onClick={() => navigate('/viewer')}>
|
||
<ArrowLeft className="h-5 w-5" />
|
||
</Button>
|
||
<h1 className="font-mono text-sm font-semibold text-foreground">
|
||
Modo <span className="text-primary">XR Imersivo</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
{!inXR && (
|
||
<>
|
||
<Button variant="outline" size="sm" className="gap-1.5" onClick={handleDownloadMarker}>
|
||
<Download className="h-3.5 w-3.5" />
|
||
<span className="font-mono text-xs">Marcador QR</span>
|
||
</Button>
|
||
<Button className="gap-2 glow-primary" onClick={handleEnterAR}>
|
||
Iniciar Sessão AR
|
||
</Button>
|
||
</>
|
||
)}
|
||
|
||
{inXR && (
|
||
<div className="flex items-center gap-3">
|
||
<span className="font-mono text-xs text-success flex items-center gap-1.5">
|
||
<span className="h-2 w-2 rounded-full bg-success animate-pulse" />
|
||
XR Ativo
|
||
</span>
|
||
{anchorMode === 'tracking' ? (
|
||
<span className="font-mono text-[10px] text-primary flex items-center gap-1">
|
||
<QrCode className="h-3 w-3" />
|
||
Tracking
|
||
</span>
|
||
) : (
|
||
<span className="font-mono text-[10px] text-muted-foreground flex items-center gap-1">
|
||
<Crosshair className="h-3 w-3" />
|
||
Manual
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</header>
|
||
|
||
{/* 3D Canvas */}
|
||
<div className="flex-1 relative">
|
||
<Canvas
|
||
gl={{ antialias: true, alpha: true, powerPreference: 'high-performance' }}
|
||
camera={{ position: [0, 1.6, 0], fov: 50, near: 0.01, far: 100 }}
|
||
className="!bg-transparent"
|
||
onCreated={({ gl }) => {
|
||
gl.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
|
||
gl.setClearColor(0x000000, 0);
|
||
}}
|
||
>
|
||
<XR store={xrStore}>
|
||
<ambientLight intensity={0.8} />
|
||
<directionalLight position={[3, 5, 3]} intensity={1.2} />
|
||
<directionalLight position={[-3, 3, -3]} intensity={0.4} />
|
||
|
||
<XROrigin />
|
||
|
||
<ImageTrackingAnchor>
|
||
<XRModel url={model.url} />
|
||
</ImageTrackingAnchor>
|
||
|
||
<ControllerFineTuning />
|
||
</XR>
|
||
</Canvas>
|
||
|
||
{/* Floating HUD overlay */}
|
||
<div className="absolute bottom-4 left-4 right-4 z-10 pointer-events-none">
|
||
<div className="pointer-events-auto inline-flex flex-wrap gap-3 rounded-lg border bg-card/90 backdrop-blur-sm p-3 shadow-lg">
|
||
<div className="flex items-center gap-2">
|
||
<QrCode className="h-3.5 w-3.5 text-primary" />
|
||
<span className="font-mono text-[10px] text-muted-foreground">
|
||
{anchorMode === 'tracking' ? '● QR Detectado' : '○ Buscando QR…'}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Move className="h-3.5 w-3.5 text-primary" />
|
||
<span className="font-mono text-[10px] text-muted-foreground">
|
||
Grip + Joy Esq: X/Y
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<RotateCw className="h-3.5 w-3.5 text-primary" />
|
||
<span className="font-mono text-[10px] text-muted-foreground">
|
||
Grip + Joy Dir: Z/Rot
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default XRSession;
|