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

Corrigiu painel do modo Ar

Browse Source 
X-Lovable-Edit-ID: edt-ddabb83a-766e-4d4f-84c8-609c78508f43
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-05-15 11:45:30 +00:00
parent 443b2acbe3 9c435cc694
commit 27e4950c2e
1 changed files with 63 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/three/XRHudInWorld.tsx
+63 -22
View File
@@ -51,10 +51,13 @@ const WristToggle = forwardRef<THREE.Group, { open: boolean; onToggle: () => voi
export function XRHudInWorld(props: XRHudInWorldProps) {
const { camera } = useThree();
const leftCtrl = useXRInputSourceState('controller', 'left');
const rightCtrl = useXRInputSourceState('controller', 'right');
const [open, setOpen] = useState(true);
const [tab, setTab] = useState<Tab>('scene');
/** When pinned, the panel stays fixed in world space and does NOT follow the head. */
const [pinned, setPinned] = useState(true);
/** While true, the panel is glued to the right controller (drag mode). */
const [dragging, setDragging] = useState(false);
/** Forces re-anchor on next frame (used by "trazer" / unpin→pin). */
const reanchorRequested = useRef(true);
@@ -63,6 +66,10 @@ export function XRHudInWorld(props: XRHudInWorldProps) {
const targetPos = useRef(new THREE.Vector3());
const targetQuat = useRef(new THREE.Quaternion());
const lastABtn = useRef(false);
/** Cached offset from controller to panel at drag start. */
const dragOffsetPos = useRef(new THREE.Vector3());
const dragOffsetQuat = useRef(new THREE.Quaternion());
const dragInitialized = useRef(false);
useFrame(() => {
// Toggle via left A button (Quest Touch buttons[4])
@@ -79,24 +86,47 @@ export function XRHudInWorld(props: XRHudInWorldProps) {
// • If unpinned → continuously follow head with damping.
// • On (re)anchor request → snap target once and stop.
if (panelRef.current && open) {
const fwd = new THREE.Vector3(0, -0.05, -0.7).applyQuaternion(camera.quaternion);
const wantPos = new THREE.Vector3().copy(camera.position).add(fwd);
const euler = new THREE.Euler().setFromQuaternion(camera.quaternion, 'YXZ');
const wantQuat = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, euler.y, 0, 'YXZ'));
// Drag mode → panel rigidly follows right controller using captured offset.
if (dragging) {
const ctrlObj = rightCtrl?.object;
if (ctrlObj) {
ctrlObj.updateMatrixWorld();
const cPos = new THREE.Vector3().setFromMatrixPosition(ctrlObj.matrixWorld);
const cQuat = new THREE.Quaternion().setFromRotationMatrix(ctrlObj.matrixWorld);
if (!dragInitialized.current) {
// Capture current panel pose relative to controller
const invQ = cQuat.clone().invert();
dragOffsetPos.current
.copy(panelRef.current.position).sub(cPos).applyQuaternion(invQ);
dragOffsetQuat.current.copy(invQ).multiply(panelRef.current.quaternion);
dragInitialized.current = true;
}
const newPos = dragOffsetPos.current.clone().applyQuaternion(cQuat).add(cPos);
const newQuat = cQuat.clone().multiply(dragOffsetQuat.current);
panelRef.current.position.copy(newPos);
panelRef.current.quaternion.copy(newQuat);
}
} else {
if (dragInitialized.current) dragInitialized.current = false;
const fwd = new THREE.Vector3(0, -0.05, -0.7).applyQuaternion(camera.quaternion);
const wantPos = new THREE.Vector3().copy(camera.position).add(fwd);
const euler = new THREE.Euler().setFromQuaternion(camera.quaternion, 'YXZ');
const wantQuat = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, euler.y, 0, 'YXZ'));
if (reanchorRequested.current) {
targetPos.current.copy(wantPos);
targetQuat.current.copy(wantQuat);
panelRef.current.position.copy(wantPos);
panelRef.current.quaternion.copy(wantQuat);
reanchorRequested.current = false;
} else if (!pinned) {
targetPos.current.copy(wantPos);
targetQuat.current.copy(wantQuat);
panelRef.current.position.lerp(targetPos.current, 0.12);
panelRef.current.quaternion.slerp(targetQuat.current, 0.18);
if (reanchorRequested.current) {
targetPos.current.copy(wantPos);
targetQuat.current.copy(wantQuat);
panelRef.current.position.copy(wantPos);
panelRef.current.quaternion.copy(wantQuat);
reanchorRequested.current = false;
} else if (!pinned) {
targetPos.current.copy(wantPos);
targetQuat.current.copy(wantQuat);
panelRef.current.position.lerp(targetPos.current, 0.12);
panelRef.current.quaternion.slerp(targetQuat.current, 0.18);
}
// pinned + already anchored → leave panel where it is.
}
// pinned + already anchored → leave panel where it is.
}
// Wrist toggle follows left controller
@@ -126,6 +156,8 @@ export function XRHudInWorld(props: XRHudInWorldProps) {
setTab={setTab}
pinned={pinned}
onTogglePin={() => setPinned((v) => !v)}
dragging={dragging}
onToggleDrag={() => setDragging((v) => !v)}
onRecenter={() => { reanchorRequested.current = true; }}
{...props}
/>
@@ -136,12 +168,14 @@ export function XRHudInWorld(props: XRHudInWorldProps) {
}
function FloatingPanel({
tab, setTab, pinned, onTogglePin, onRecenter, ...p
tab, setTab, pinned, onTogglePin, dragging, onToggleDrag, onRecenter, ...p
}: {
tab: Tab;
setTab: (t: Tab) => void;
pinned: boolean;
onTogglePin: () => void;
dragging: boolean;
onToggleDrag: () => void;
onRecenter: () => void;
} & XRHudInWorldProps) {
const tabs: { id: Tab; label: string; icon: string }[] = [
@@ -158,13 +192,20 @@ function FloatingPanel({
anchorX="left" anchorY="middle">
TrackSteelXR · HUD AR
</Text>
{/* Pin / Recenter controls (replace the previous static "A button" hint) */}
<group position={[W / 2 - 0.012, H / 2 - 0.018, 0.002]}>
<XR3DButton position={[-0.045, 0, 0]} size={[0.05, 0.022]}
{/* Pin / Drag / Recenter — anchored to top-right, kept inside the panel.
Group origin is at the right edge with margin; buttons extend leftward. */}
<group position={[W / 2 - 0.008, H / 2 - 0.018, 0.002]}>
{/* Trazer (recenter) — rightmost, half-width 0.029 from origin */}
<XR3DButton position={[-0.029, 0, 0]} size={[0.054, 0.022]}
label="⎚ Trazer" onClick={onRecenter} fontSize={0.007} />
{/* Mover (drag with right controller) */}
<XR3DButton position={[-0.088, 0, 0]} size={[0.054, 0.022]}
label={dragging ? '✋ Solte' : '✋ Mover'}
active={dragging} onClick={onToggleDrag} fontSize={0.007} />
{/* Pin */}
<XR3DButton position={[-0.144, 0, 0]} size={[0.054, 0.022]}
label={pinned ? '📌 Fixo' : '↻ Solto'}
active={pinned} onClick={onTogglePin} fontSize={0.007} />
<XR3DButton position={[0.012, 0, 0]} size={[0.058, 0.022]}
label="⎚ Trazer" onClick={onRecenter} fontSize={0.007} />
</group>
<group position={[0, H / 2 - 0.045, 0.001]}>