diff --git a/src/pages/XRSession.tsx b/src/pages/XRSession.tsx index 672120c..c68431e 100644 --- a/src/pages/XRSession.tsx +++ b/src/pages/XRSession.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useMemo, useCallback, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Canvas, useFrame, useThree } from '@react-three/fiber'; -import { useGLTF, Grid, Html, Line } from '@react-three/drei'; +import { useGLTF, Grid, Html, Line, OrbitControls, Text } from '@react-three/drei'; import { XR, createXRStore, useXR, XROrigin } from '@react-three/xr'; import * as THREE from 'three'; import { useModelStore } from '@/stores/useModelStore'; @@ -338,6 +338,59 @@ function XRGrid() { // ImageTrackingAnchor removed — replaced by XRHitTestPlacement +// ─── XR Debug HUD (floats in front of viewer) ────────── +// Shows live grip/trigger values and isGrabbing state per hand. +// Essential for diagnosing grab issues without external monitoring. +function XRDebugHud() { + const session = useXR((s) => s.session); + const groupRef = useRef(null); + const { camera } = useThree(); + const [text, setText] = useState('XR aguardando inputs...'); + + useFrame(() => { + if (!groupRef.current) return; + // Anchor the HUD to a fixed offset in front of the camera + const offset = new THREE.Vector3(-0.25, -0.18, -0.6).applyQuaternion(camera.quaternion); + groupRef.current.position.copy(camera.position).add(offset); + groupRef.current.quaternion.copy(camera.quaternion); + + if (!session) return; + const sources = Array.from(session.inputSources); + const lines: string[] = [`inputs: ${sources.length}`]; + for (const src of sources) { + const gp = src.gamepad; + const grip = gp?.buttons[2]; + const trig = gp?.buttons[1]; + const gv = grip ? (grip.value || (grip.pressed ? 1 : 0)) : 0; + const tv = trig ? (trig.value || (trig.pressed ? 1 : 0)) : 0; + const grabbing = gv > 0.7 ? 'GRAB' : gv > 0.3 ? '...' : ' '; + lines.push(`${src.handedness.padEnd(5)} grip:${gv.toFixed(2)} trg:${tv.toFixed(2)} ${grabbing}`); + } + setText(lines.join('\n')); + }); + + return ( + + + + + + + {text} + + + ); +} + + // ─── XRSession Page ──────────────────────────────────── const XRSession = () => { const navigate = useNavigate(); @@ -422,7 +475,7 @@ const XRSession = () => {
{ gl.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); @@ -438,28 +491,51 @@ const XRSession = () => { - { - setPlacementMode(false); - toast.success('Modelo posicionado na superfície!'); - }} - > - { - if (placementMode) setPlacementMode(false); - }} - > - - - + {inXR ? ( + <> + {/* In XR: hit-test placement → grab wrapper → model */} + { + setPlacementMode(false); + toast.success('Modelo posicionado na superfície!'); + }} + > + { + if (placementMode) setPlacementMode(false); + }} + > + + + + + + + + + ) : ( + <> + {/* Desktop preview (no headset): show model with OrbitControls */} + + + + + + + )} - -