Enhance 2D UI for Quest 3 readability

nixpacks.toml

@@ -0,0 +1,2 @@
+[phases.setup]
+nixPkgs = ["nodejs_23"]

src/App.tsx

@@ -1,75 +1,136 @@
-import { Canvas } from '@react-three/fiber'
+import { useState } from 'react';
-import { XR, createXRStore } from '@react-three/xr'
+import { Canvas } from '@react-three/fiber';
-import { Box, Plane, Text } from '@react-three/drei'
+import { XR, createXRStore } from '@react-three/xr';
+import { XRScene } from './components/XRScene';
 
-// Cria a store de estado para o WebXR
+// Initializing WebXR Store for Meta Quest 3
-const store = createXRStore()
+const store = createXRStore();
 
 export default function App() {
+  const [inXR, setInXR] = useState(false);
+
+  const handleEnterVR = async () => {
+    try {
+      await store.enterVR();
+      setInXR(true);
+    } catch (err) {
+      console.warn('Falha ao entrar em VR:', err);
+    }
+  };
+
+  const handleEnterAR = async () => {
+    try {
+      await store.enterAR();
+      setInXR(true);
+    } catch (err) {
+      console.warn('Falha ao entrar em AR Passthrough:', err);
+      // Fallback to VR if AR is not supported
+      handleEnterVR();
+    }
+  };
+
   return (
-    <>
+    <div style={{ width: '100vw', height: '100vh', position: 'relative', overflow: 'hidden', backgroundColor: '#090d16' }}>
-      {/* Botão de sobreposição para entrar em VR */}
+      {/* 2D Overlay Header & Start Buttons for Browser / Quest 3 Entry */}
-      <div
+      {!inXR && (
-        style={{
+        <div
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          pointerEvents: 'none', // Deixa o clique passar para o Canvas 3D
-          zIndex: 10,
-        }}
-      >
-        <button
-          onClick={() => store.enterVR()}
           style={{
-            pointerEvents: 'auto',
+            position: 'absolute',
-            padding: '16px 32px',
+            top: 0,
-            fontSize: '1.2rem',
+            left: 0,
-            backgroundColor: '#0ea5e9',
+            width: '100%',
-            color: 'white',
+            height: '100%',
-            border: 'none',
+            zIndex: 10,
-            borderRadius: '12px',
+            display: 'flex',
-            cursor: 'pointer',
+            flexDirection: 'column',
-            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+            justifyContent: 'center',
-            fontWeight: 'bold',
+            alignItems: 'center',
+            backgroundColor: 'rgba(9, 13, 22, 0.85)',
+            backdropFilter: 'blur(12px)',
           }}
         >
-          Entrar em Realidade Virtual (Quest 3)
+          <div
-        </button>
+            style={{
-      </div>
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              backgroundColor: 'rgba(15, 23, 42, 0.95)',
+              padding: '40px 60px',
+              borderRadius: '24px',
+              border: '2px solid rgba(56, 189, 248, 0.3)',
+              boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.7)',
+              gap: '30px',
+            }}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
+              <h1 style={{ color: '#f59e0b', margin: 0, fontSize: '2.5rem', fontFamily: 'sans-serif', textAlign: 'center' }}>
+                Meta Quest 3<br />Laboratório XR
+              </h1>
+              <p style={{ color: '#94a3b8', margin: 0, fontSize: '1.2rem', fontFamily: 'sans-serif', textAlign: 'center', maxWidth: '400px' }}>
+                Use seu controle e aponte o laser para escolher o modo abaixo:
+              </p>
+            </div>
 
-      {/* Canvas 3D que ocupa a tela toda */}
+            <div style={{ display: 'flex', gap: '20px', flexDirection: 'column', width: '100%' }}>
-      <Canvas style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#1e293b' }}>
+              <button
+                onClick={handleEnterVR}
+                style={{
+                  padding: '20px 30px',
+                  fontSize: '1.5rem',
+                  backgroundColor: '#0284c7',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '16px',
+                  cursor: 'pointer',
+                  fontWeight: 'bold',
+                  boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+                  transition: 'transform 0.1s',
+                }}
+              >
+                🥽 ENTRAR EM VR (IMERSIVO)
+              </button>
+
+              <button
+                onClick={handleEnterAR}
+                style={{
+                  padding: '20px 30px',
+                  fontSize: '1.5rem',
+                  backgroundColor: '#d97706',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '16px',
+                  cursor: 'pointer',
+                  fontWeight: 'bold',
+                  boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+                  transition: 'transform 0.1s',
+                }}
+              >
+                📷 MODO AR (PASSTHROUGH)
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 3D WebGL Canvas */}
+      <Canvas
+        shadows
+        camera={{ position: [0, 1.5, 1.2], fov: 50 }}
+        gl={{
+          alpha: true,
+          antialias: true,
+          powerPreference: 'high-performance',
+          preserveDrawingBuffer: true,
+        }}
+        onCreated={({ gl }) => {
+          gl.setClearColor(0x000000, 0);
+        }}
+        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+      >
         <XR store={store}>
-          <ambientLight intensity={0.6} />
+          <XRScene />
-          <directionalLight position={[10, 10, 10]} intensity={1.5} castShadow />
-          
-          {/* Chão */}
-          <Plane args={[20, 20]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
-            <meshStandardMaterial color="#475569" />
-          </Plane>
-
-          {/* Mesa (Representação) */}
-          <Box position={[0, 0.5, -1]} args={[2, 1, 1]} castShadow receiveShadow>
-            <meshStandardMaterial color="#8B4513" />
-          </Box>
-
-          {/* Cubo interativo em cima da mesa */}
-          <Box position={[0, 1.15, -1]} args={[0.3, 0.3, 0.3]} castShadow receiveShadow>
-            <meshStandardMaterial color="#f59e0b" />
-          </Box>
-          
-          {/* Instruções Flutuantes no Mundo 3D */}
-          <Text position={[0, 2, -2]} fontSize={0.2} color="white" anchorX="center" anchorY="middle">
-            Laboratório de Alinhamento XR
-          </Text>
-
         </XR>
       </Canvas>
-    </>
+    </div>
-  )
+  );
 }

src/components/InteractiveCube.tsx

@@ -0,0 +1,262 @@
+import { useRef, useState } from 'react';
+import { useFrame, type ThreeEvent } from '@react-three/fiber';
+import { useXR } from '@react-three/xr';
+import { Text } from '@react-three/drei';
+import * as THREE from 'three';
+import { soundFx } from '../services/audio';
+import { triggerHaptic } from './QuestXRLocomotion';
+
+export type FaceId = 'x+' | 'x-' | 'y+' | 'y-' | 'z+' | 'z-';
+
+export interface InteractiveCubeProps {
+  position: [number, number, number];
+  size?: number;
+  locked: boolean;
+  onFaceSelect?: (face: FaceId) => void;
+  resetSignal: number;
+  tableY?: number;
+  tableBounds?: { minX: number; maxX: number; minZ: number; maxZ: number };
+}
+
+export function InteractiveCube({
+  position: initialPosition,
+  size = 0.3,
+  locked,
+  onFaceSelect,
+  resetSignal,
+  tableY = 0.625,
+  tableBounds = { minX: -1, maxX: 1, minZ: -1.5, maxZ: -0.5 },
+}: InteractiveCubeProps) {
+  const meshRef = useRef<THREE.Group>(null);
+  const session = useXR((s) => s.session);
+
+  // Physics state
+  const pos = useRef(new THREE.Vector3(...initialPosition));
+  const vel = useRef(new THREE.Vector3(0, 0, 0));
+  const rot = useRef(new THREE.Quaternion().identity());
+  const angVel = useRef(new THREE.Vector3(0, 0, 0));
+  const scale = useRef(1);
+
+  // Hover & selection
+  const [hovered, setHovered] = useState(false);
+  const [hoveredFace, setHoveredFace] = useState<FaceId | null>(null);
+  const [selectedFace, setSelectedFace] = useState<FaceId | null>(null);
+
+  // Grab state - using ray to prevent feedback loop drift
+  const isGrabbed = useRef(false);
+  const grabPointerId = useRef<number | null>(null);
+  const grabDistance = useRef<number>(0);
+
+  const previousRayPos = useRef(new THREE.Vector3());
+
+  // Reset signal listener
+  const lastResetSignal = useRef(resetSignal);
+  if (resetSignal !== lastResetSignal.current) {
+    lastResetSignal.current = resetSignal;
+    pos.current.set(...initialPosition);
+    vel.current.set(0, 0, 0);
+    angVel.current.set(0, 0, 0);
+    rot.current.identity();
+    scale.current = 1;
+    isGrabbed.current = false;
+    setSelectedFace(null);
+  }
+
+  const onPointerDown = (e: ThreeEvent<PointerEvent>) => {
+    if (locked || isGrabbed.current) return;
+    e.stopPropagation();
+    
+    // Capture pointer to track dragging outside object bounds
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+
+    isGrabbed.current = true;
+    grabPointerId.current = e.pointerId;
+    
+    // Save the distance from the controller ray origin to the intersection point
+    grabDistance.current = e.distance;
+    
+    // Track velocity
+    previousRayPos.current.copy(e.point);
+    vel.current.set(0, 0, 0);
+    angVel.current.set(0, 0, 0);
+
+    soundFx.playGrab();
+    triggerHaptic(session, 'any', 0.8, 60);
+  };
+
+  const onPointerMove = (e: ThreeEvent<PointerEvent>) => {
+    if (locked) return;
+    if (isGrabbed.current && e.pointerId === grabPointerId.current) {
+      e.stopPropagation();
+      
+      // FIX: Use e.ray to calculate new position instead of e.point to avoid feedback drift
+      const ray = e.ray;
+      const targetPos = ray.origin.clone().add(ray.direction.clone().multiplyScalar(grabDistance.current));
+      
+      // Calculate velocity for throwing
+      const dt = 0.016; // approximate frame time for velocity calc
+      vel.current.copy(targetPos).sub(pos.current).divideScalar(dt);
+      
+      pos.current.copy(targetPos);
+    }
+  };
+
+  const onPointerUp = (e: ThreeEvent<PointerEvent>) => {
+    if (isGrabbed.current && e.pointerId === grabPointerId.current) {
+      e.stopPropagation();
+      (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
+      
+      isGrabbed.current = false;
+      grabPointerId.current = null;
+      
+      // Throw physics applied automatically via vel.current calculated in onPointerMove
+      soundFx.playRelease();
+      triggerHaptic(session, 'any', 0.4, 40);
+    }
+  };
+
+  useFrame((_, delta) => {
+    if (!meshRef.current) return;
+    const dt = Math.min(delta, 0.05);
+
+    if (!isGrabbed.current && !locked) {
+      // Physics Simulation
+      const gravity = -9.81;
+      const currentScale = scale.current * size;
+      const halfSize = currentScale / 2;
+
+      vel.current.y += gravity * dt;
+      
+      // Air resistance
+      vel.current.x *= 1 - 0.5 * dt;
+      vel.current.z *= 1 - 0.5 * dt;
+      angVel.current.multiplyScalar(1 - 1.2 * dt);
+
+      // Integrate Position
+      pos.current.addScaledVector(vel.current, dt);
+      
+      // Integrate Rotation via quaternions
+      const w = angVel.current.clone().multiplyScalar(dt);
+      const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(w.x, w.y, w.z));
+      rot.current.multiply(q);
+
+      // Collision detection (Table and Floor)
+      const isOnTable =
+        pos.current.x >= tableBounds.minX &&
+        pos.current.x <= tableBounds.maxX &&
+        pos.current.z >= tableBounds.minZ &&
+        pos.current.z <= tableBounds.maxZ;
+
+      const surfaceY = isOnTable ? tableY + halfSize : halfSize;
+
+      if (pos.current.y <= surfaceY) {
+        pos.current.y = surfaceY;
+
+        if (Math.abs(vel.current.y) > 0.4) {
+          soundFx.playImpact(Math.abs(vel.current.y));
+          triggerHaptic(session, 'any', Math.min(Math.abs(vel.current.y) * 0.2, 0.8), 30);
+          vel.current.y = -vel.current.y * 0.35; // bounce
+        } else {
+          vel.current.y = 0;
+        }
+
+        // Friction
+        vel.current.x *= 0.82;
+        vel.current.z *= 0.82;
+        angVel.current.multiplyScalar(0.75);
+      }
+    }
+
+    // Apply transform
+    meshRef.current.position.copy(pos.current);
+    meshRef.current.setRotationFromQuaternion(rot.current);
+    meshRef.current.scale.setScalar(scale.current);
+  });
+
+  const faces: { id: FaceId; pos: [number, number, number]; rot: [number, number, number]; color: string; label: string }[] = [
+    { id: 'x+', pos: [size / 2 + 0.001, 0, 0], rot: [0, Math.PI / 2, 0], color: '#ef4444', label: 'X+' },
+    { id: 'x-', pos: [-size / 2 - 0.001, 0, 0], rot: [0, -Math.PI / 2, 0], color: '#22c55e', label: 'X-' },
+    { id: 'y+', pos: [0, size / 2 + 0.001, 0], rot: [-Math.PI / 2, 0, 0], color: '#eab308', label: 'Y+' },
+    { id: 'y-', pos: [0, -size / 2 - 0.001, 0], rot: [Math.PI / 2, 0, 0], color: '#3b82f6', label: 'Y-' },
+    { id: 'z+', pos: [0, 0, size / 2 + 0.001], rot: [0, 0, 0], color: '#a855f7', label: 'Z+' },
+    { id: 'z-', pos: [0, 0, -size / 2 - 0.001], rot: [0, Math.PI, 0], color: '#f97316', label: 'Z-' },
+  ];
+
+  return (
+    <group
+      ref={meshRef}
+      onPointerOver={(e) => {
+        e.stopPropagation();
+        if (!isGrabbed.current) {
+          setHovered(true);
+          soundFx.playHover();
+          triggerHaptic(session, 'any', 0.2, 20);
+        }
+      }}
+      onPointerOut={() => {
+        if (!isGrabbed.current) {
+          setHovered(false);
+          setHoveredFace(null);
+        }
+      }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onPointerMissed={onPointerUp}
+    >
+      <mesh castShadow receiveShadow>
+        <boxGeometry args={[size, size, size]} />
+        <meshStandardMaterial
+          color={hovered || isGrabbed.current ? '#fbbf24' : '#334155'}
+          metalness={0.4}
+          roughness={0.3}
+          wireframe={locked}
+        />
+      </mesh>
+
+      {faces.map((f) => {
+        const isSelected = selectedFace === f.id;
+        const isFaceHovered = hoveredFace === f.id && !isGrabbed.current;
+
+        return (
+          <group key={f.id} position={f.pos} rotation={f.rot}>
+            <mesh
+              onPointerOver={(e) => {
+                e.stopPropagation();
+                if (!isGrabbed.current) setHoveredFace(f.id);
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (locked || isGrabbed.current) return;
+                setSelectedFace(f.id);
+                soundFx.playSnap();
+                triggerHaptic(session, 'any', 0.6, 50);
+                if (onFaceSelect) onFaceSelect(f.id);
+              }}
+            >
+              <planeGeometry args={[size * 0.94, size * 0.94]} />
+              <meshStandardMaterial
+                color={f.color}
+                emissive={isSelected ? '#ffffff' : isFaceHovered ? f.color : '#000000'}
+                emissiveIntensity={isSelected ? 0.8 : isFaceHovered ? 0.4 : 0}
+                side={THREE.DoubleSide}
+                transparent
+                opacity={0.9}
+              />
+            </mesh>
+            <Text
+              position={[0, 0, 0.002]}
+              fontSize={size * 0.28}
+              color="white"
+              anchorX="center"
+              anchorY="middle"
+            >
+              {f.label}
+            </Text>
+          </group>
+        );
+      })}
+    </group>
+  );
+}

src/components/QuestXRLocomotion.tsx

@@ -0,0 +1,99 @@
+import { useRef, type MutableRefObject } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useXR } from '@react-three/xr';
+import * as THREE from 'three';
+
+const STICK_DEADZONE = 0.15;
+const MOVE_SPEED = 1.8;
+const SNAP_TURN_ANGLE = Math.PI / 4; // 45 degrees
+const SNAP_COOLDOWN_MS = 300;
+
+export function triggerHaptic(session: any, hand: 'left' | 'right' | 'any' = 'any', intensity = 0.6, duration = 50) {
+  if (!session) return;
+  try {
+    for (const source of session.inputSources) {
+      if (source.gamepad && source.gamepad.hapticActuators && source.gamepad.hapticActuators.length > 0) {
+        if (hand === 'any' || source.handedness === hand) {
+          source.gamepad.hapticActuators[0].pulse(intensity, duration);
+        }
+      }
+    }
+  } catch {}
+}
+
+interface LocomotionProps {
+  worldRef: MutableRefObject<THREE.Group | null>;
+}
+
+export function QuestXRLocomotion({ worldRef }: LocomotionProps) {
+  const { camera } = useThree();
+  const session = useXR((s) => s.session);
+  const snapCooldownRef = useRef(0);
+
+  const moveVector = useRef(new THREE.Vector3());
+  const forwardVector = useRef(new THREE.Vector3());
+  const sideVector = useRef(new THREE.Vector3());
+
+  useFrame((_, delta) => {
+    if (!session || !worldRef.current) return;
+
+    const inputSources = session.inputSources;
+    if (!inputSources) return;
+
+    const now = performance.now();
+
+    for (const source of inputSources as any) {
+      const gamepad = source.gamepad;
+      if (!gamepad || !gamepad.axes) continue;
+
+      const handedness = source.handedness;
+
+      // Quest 3 axes mapping:
+      // axes[0], axes[1] or axes[2], axes[3] depending on the browser version
+      const axisX = Math.abs(gamepad.axes[2]) > STICK_DEADZONE ? gamepad.axes[2] 
+                  : Math.abs(gamepad.axes[0]) > STICK_DEADZONE ? gamepad.axes[0] : 0;
+      
+      const axisY = Math.abs(gamepad.axes[3]) > STICK_DEADZONE ? gamepad.axes[3] 
+                  : Math.abs(gamepad.axes[1]) > STICK_DEADZONE ? gamepad.axes[1] : 0;
+
+      if (handedness === 'left') {
+        // Left Controller -> Smooth Locomotion
+        if (axisX !== 0 || axisY !== 0) {
+          // Calculate movement relative to headset orientation
+          camera.getWorldDirection(forwardVector.current);
+          forwardVector.current.y = 0;
+          forwardVector.current.normalize();
+          
+          sideVector.current.crossVectors(camera.up, forwardVector.current).normalize();
+
+          moveVector.current.set(0, 0, 0);
+          
+          // Move the WORLD in the OPPOSITE direction of the joystick
+          moveVector.current.addScaledVector(forwardVector.current, axisY * MOVE_SPEED * delta);
+          moveVector.current.addScaledVector(sideVector.current, axisX * MOVE_SPEED * delta);
+
+          worldRef.current.position.add(moveVector.current);
+        }
+      } else if (handedness === 'right') {
+        // Right Controller -> Snap Turning
+        if (now > snapCooldownRef.current && Math.abs(axisX) > 0.6) {
+          const turnDirection = axisX > 0 ? -1 : 1;
+          
+          // To turn the player right, we rotate the world LEFT around the player's current position
+          const playerPos = camera.position.clone();
+          
+          worldRef.current.position.sub(playerPos);
+          worldRef.current.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), turnDirection * SNAP_TURN_ANGLE);
+          worldRef.current.position.add(playerPos);
+          
+          worldRef.current.rotation.y += turnDirection * SNAP_TURN_ANGLE;
+
+          triggerHaptic(session, 'right', 0.4, 40);
+          snapCooldownRef.current = now + SNAP_COOLDOWN_MS;
+        }
+      }
+    }
+  });
+
+  return null;
+}

src/components/SpatialHUD.tsx

@@ -0,0 +1,109 @@
+import { Text } from '@react-three/drei';
+import { soundFx } from '../services/audio';
+
+export interface SpatialHUDProps {
+  position?: [number, number, number];
+  locked: boolean;
+  onToggleLock: () => void;
+  onReset: () => void;
+  alignmentStep: string;
+  isAR: boolean;
+}
+
+export function SpatialHUD({
+  position = [0, 1.8, -1.8],
+  locked,
+  onToggleLock,
+  onReset,
+  alignmentStep,
+  isAR,
+}: SpatialHUDProps) {
+  return (
+    <group position={position}>
+      <Text
+        position={[0, 0.45, 0]}
+        fontSize={0.14}
+        color="#f59e0b"
+        anchorX="center"
+        anchorY="middle"
+        outlineWidth={0.004}
+        outlineColor="#000000"
+      >
+        LABORATÓRIO XR — META QUEST 3
+      </Text>
+
+      {alignmentStep && (
+        <group position={[0, 0.25, 0]}>
+          <mesh position={[0, 0, -0.005]}>
+            <planeGeometry args={[1.6, 0.12]} />
+            <meshBasicMaterial color="#0f172a" transparent opacity={0.85} />
+          </mesh>
+          <Text
+            position={[0, 0, 0]}
+            fontSize={0.07}
+            color="#38bdf8"
+            anchorX="center"
+            anchorY="middle"
+          >
+            {alignmentStep}
+          </Text>
+        </group>
+      )}
+
+      <mesh position={[0, -0.1, -0.01]}>
+        <planeGeometry args={[1.8, 0.5]} />
+        <meshStandardMaterial
+          color="#0f172a"
+          roughness={0.2}
+          metalness={0.8}
+          transparent
+          opacity={0.85}
+        />
+      </mesh>
+
+      <group
+        position={[-0.45, -0.1, 0.01]}
+        onClick={(e) => {
+          e.stopPropagation();
+          soundFx.playHover();
+          onToggleLock();
+        }}
+      >
+        <mesh>
+          <boxGeometry args={[0.55, 0.14, 0.02]} />
+          <meshStandardMaterial color={locked ? '#ef4444' : '#22c55e'} metalness={0.5} roughness={0.3} />
+        </mesh>
+        <Text position={[0, 0, 0.015]} fontSize={0.065} color="white" anchorX="center" anchorY="middle">
+          {locked ? '🔒 FÍSICA: PRESO' : '🔓 FÍSICA: LIVRE'}
+        </Text>
+      </group>
+
+      <group
+        position={[0.45, -0.1, 0.01]}
+        onClick={(e) => {
+          e.stopPropagation();
+          soundFx.playSnap();
+          onReset();
+        }}
+      >
+        <mesh>
+          <boxGeometry args={[0.55, 0.14, 0.02]} />
+          <meshStandardMaterial color="#3b82f6" metalness={0.5} roughness={0.3} />
+        </mesh>
+        <Text position={[0, 0, 0.015]} fontSize={0.065} color="white" anchorX="center" anchorY="middle">
+          🔄 RESETAR MUNDO
+        </Text>
+      </group>
+
+      <Text
+        position={[0, -0.28, 0.01]}
+        fontSize={0.045}
+        color="#94a3b8"
+        anchorX="center"
+        anchorY="middle"
+      >
+        {isAR ? 'MODO: PASSTHROUGH AR ATIVO' : 'MODO: VR IMERSIVO'} • Joysticks Movem e Giram
+      </Text>
+    </group>
+  );
+}

src/components/WorkbenchTable.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { type ThreeEvent } from '@react-three/fiber';
+import { Text } from '@react-three/drei';
+import { soundFx } from '../services/audio';
+
+export interface WorkbenchTableProps {
+  position?: [number, number, number];
+  onSurfaceClick?: (surfaceName: string) => void;
+  onEdgeClick?: (edgeName: string) => void;
+}
+
+export function WorkbenchTable({
+  position = [0, 0, -1],
+  onSurfaceClick,
+  onEdgeClick,
+}: WorkbenchTableProps) {
+  const [hoveredSurface, setHoveredSurface] = useState(false);
+  const [hoveredEdge, setHoveredEdge] = useState<string | null>(null);
+
+  const handleSurfaceClick = (surfaceName: string, e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation();
+    soundFx.playSnap();
+    if (onSurfaceClick) onSurfaceClick(surfaceName);
+  };
+
+  const handleEdgeClick = (edgeName: string, e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation();
+    soundFx.playSnap();
+    if (onEdgeClick) onEdgeClick(edgeName);
+  };
+
+  return (
+    <group position={position}>
+      {/* Principal Workbench Top Plate */}
+      <mesh
+        position={[0, 0.6, 0]}
+        castShadow
+        receiveShadow
+        onPointerOver={() => setHoveredSurface(true)}
+        onPointerOut={() => setHoveredSurface(false)}
+        onClick={(e) => handleSurfaceClick('Tampo Principal', e)}
+      >
+        <boxGeometry args={[2, 0.05, 1]} />
+        <meshStandardMaterial
+          color={hoveredSurface ? '#475569' : '#1e293b'}
+          metalness={0.8}
+          roughness={0.2}
+        />
+      </mesh>
+
+      {/* Target Alignment Mat Grid on Table Surface */}
+      <mesh position={[0, 0.626, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[1.8, 0.8]} />
+        <meshStandardMaterial
+          color="#0f172a"
+          roughness={0.9}
+          metalness={0.1}
+          wireframe
+        />
+      </mesh>
+
+      {/* Target Placement Circle (Laser Target) */}
+      <group position={[0, 0.628, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.2, 0.22, 32]} />
+        <meshBasicMaterial color="#38bdf8" transparent opacity={0.8} />
+        <Text position={[0, 0, 0.001]} fontSize={0.05} color="#38bdf8" anchorX="center" anchorY="middle">
+          ALVO DE ALINHAMENTO (X:0, Y:0)
+        </Text>
+      </group>
+
+      {/* Lower Shelf */}
+      <mesh position={[0, 0.25, 0]} castShadow receiveShadow>
+        <boxGeometry args={[1.8, 0.03, 0.8]} />
+        <meshStandardMaterial color="#334155" metalness={0.6} roughness={0.4} />
+      </mesh>
+
+      {/* 4 Metallic Legs */}
+      {[
+        [-0.92, 0.3, -0.42],
+        [0.92, 0.3, -0.42],
+        [-0.92, 0.3, 0.42],
+        [0.92, 0.3, 0.42],
+      ].map((legPos, i) => (
+        <mesh key={i} position={legPos as [number, number, number]} castShadow receiveShadow>
+          <cylinderGeometry args={[0.03, 0.03, 0.6, 16]} />
+          <meshStandardMaterial color="#64748b" metalness={0.9} roughness={0.1} />
+        </mesh>
+      ))}
+
+      {/* Glowing Edge Alignment Markers (North, South, East, West) */}
+      {[
+        { name: 'Aresta Frontal', pos: [0, 0.627, 0.49], rot: [0, 0, 0], args: [1.9, 0.02, 0.02] },
+        { name: 'Aresta Traseira', pos: [0, 0.627, -0.49], rot: [0, 0, 0], args: [1.9, 0.02, 0.02] },
+        { name: 'Aresta Esquerda', pos: [-0.99, 0.627, 0], rot: [0, Math.PI / 2, 0], args: [0.9, 0.02, 0.02] },
+        { name: 'Aresta Direita', pos: [0.99, 0.627, 0], rot: [0, Math.PI / 2, 0], args: [0.9, 0.02, 0.02] },
+      ].map((edge, i) => {
+        const isHovered = hoveredEdge === edge.name;
+        return (
+          <mesh
+            key={i}
+            position={edge.pos as [number, number, number]}
+            rotation={edge.rot as [number, number, number]}
+            onPointerOver={() => setHoveredEdge(edge.name)}
+            onPointerOut={() => setHoveredEdge(null)}
+            onClick={(e) => handleEdgeClick(edge.name, e)}
+          >
+            <boxGeometry args={edge.args as [number, number, number]} />
+            <meshStandardMaterial
+              color={isHovered ? '#f59e0b' : '#0284c7'}
+              emissive={isHovered ? '#f59e0b' : '#0284c7'}
+              emissiveIntensity={isHovered ? 0.9 : 0.4}
+            />
+          </mesh>
+        );
+      })}
+    </group>
+  );
+}

src/components/XRScene.tsx

@@ -0,0 +1,115 @@
+import { useState, Suspense, useRef } from 'react';
+import { useXR } from '@react-three/xr';
+import { Environment, Grid } from '@react-three/drei';
+import * as THREE from 'three';
+import { WorkbenchTable } from './WorkbenchTable';
+import { InteractiveCube, type FaceId } from './InteractiveCube';
+import { SpatialHUD } from './SpatialHUD';
+import { QuestXRLocomotion } from './QuestXRLocomotion';
+
+export function XRScene() {
+  const session = useXR((s) => s.session);
+  const isAR = !!(session && (session as any).environmentBlendMode === 'additive');
+
+  const [locked, setLocked] = useState(false);
+  const [resetSignal, setResetSignal] = useState(0);
+
+  const worldRef = useRef<THREE.Group>(null);
+
+  // Alignment tracking
+  const [selectedCubeFace, setSelectedCubeFace] = useState<FaceId | null>(null);
+  const [alignmentStep, setAlignmentStep] = useState<string>(
+    'Selecione uma face no cubo para iniciar o alinhamento'
+  );
+
+  const handleFaceSelect = (face: FaceId) => {
+    setSelectedCubeFace(face);
+    setAlignmentStep(`Face [${face.toUpperCase()}] selecionada. Clique na superfície do tampo.`);
+  };
+
+  const handleSurfaceSelect = (surfaceName: string) => {
+    if (selectedCubeFace) {
+      setAlignmentStep(`Alinhando Face [${selectedCubeFace.toUpperCase()}] com ${surfaceName}... Concluído!`);
+      setTimeout(() => {
+        setSelectedCubeFace(null);
+        setAlignmentStep('Selecione uma face no cubo para iniciar o alinhamento');
+      }, 3000);
+    }
+  };
+
+  return (
+    <>
+      <QuestXRLocomotion worldRef={worldRef} />
+
+      {!isAR && (
+        <>
+          <color attach="background" args={['#090d16']} />
+          <fog attach="fog" args={['#090d16', 4, 15]} />
+        </>
+      )}
+
+      {/* World Group that moves inversely to simulate player movement */}
+      <group ref={worldRef}>
+        <ambientLight intensity={isAR ? 1.4 : 0.6} />
+        <directionalLight
+          position={[4, 6, 4]}
+          intensity={isAR ? 1.6 : 1.4}
+          castShadow
+          shadow-mapSize={[2048, 2048]}
+          shadow-bias={-0.0001}
+        />
+        <pointLight position={[-3, 4, -2]} intensity={0.5} color="#38bdf8" />
+        <pointLight position={[3, 4, -2]} intensity={0.5} color="#f59e0b" />
+
+        <Grid
+          position={[0, -0.01, 0]}
+          args={[20, 20]}
+          cellSize={0.25}
+          cellThickness={0.6}
+          cellColor="#334155"
+          sectionSize={1}
+          sectionThickness={1.2}
+          sectionColor="#0284c7"
+          fadeDistance={10}
+          fadeStrength={1.5}
+          infiniteGrid
+        />
+
+        <Suspense fallback={null}>
+          <Environment preset="city" />
+        </Suspense>
+
+        <WorkbenchTable
+          position={[0, 0, -1]}
+          onSurfaceClick={handleSurfaceSelect}
+          onEdgeClick={(edge) => setAlignmentStep(`Aresta selecionada: ${edge}`)}
+        />
+
+        <InteractiveCube
+          position={[0, 1.2, -1]}
+          size={0.3}
+          locked={locked}
+          onFaceSelect={handleFaceSelect}
+          resetSignal={resetSignal}
+          tableY={0.625}
+          tableBounds={{ minX: -1, maxX: 1, minZ: -1.5, maxZ: -0.5 }}
+        />
+
+        <SpatialHUD
+          position={[0, 1.85, -1.7]}
+          locked={locked}
+          onToggleLock={() => setLocked((l) => !l)}
+          onReset={() => {
+            setResetSignal((s) => s + 1);
+            if (worldRef.current) {
+              worldRef.current.position.set(0, 0, 0);
+              worldRef.current.rotation.set(0, 0, 0);
+            }
+          }}
+          alignmentStep={alignmentStep}
+          isAR={isAR}
+        />
+      </group>
+    </>
+  );
+}

src/services/audio.ts

@@ -0,0 +1,130 @@
+// Web Audio API Synthesizer for VR/AR Spatial Feedback
+
+class SoundManager {
+  private ctx: AudioContext | null = null;
+
+  private initCtx() {
+    if (!this.ctx) {
+      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+      if (AudioCtx) {
+        this.ctx = new AudioCtx();
+      }
+    }
+    if (this.ctx && this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+  }
+
+  // Soft click for UI / hover
+  playHover() {
+    this.initCtx();
+    if (!this.ctx) return;
+    try {
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(440, this.ctx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(880, this.ctx.currentTime + 0.04);
+
+      gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.04);
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.start();
+      osc.stop(this.ctx.currentTime + 0.04);
+    } catch {}
+  }
+
+  // Grab attach sound
+  playGrab() {
+    this.initCtx();
+    if (!this.ctx) return;
+    try {
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+      osc.type = 'triangle';
+      osc.frequency.setValueAtTime(220, this.ctx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(440, this.ctx.currentTime + 0.08);
+
+      gain.gain.setValueAtTime(0.12, this.ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.08);
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.start();
+      osc.stop(this.ctx.currentTime + 0.08);
+    } catch {}
+  }
+
+  // Release / Throw sound
+  playRelease() {
+    this.initCtx();
+    if (!this.ctx) return;
+    try {
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(350, this.ctx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(180, this.ctx.currentTime + 0.09);
+
+      gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.09);
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.start();
+      osc.stop(this.ctx.currentTime + 0.09);
+    } catch {}
+  }
+
+  // Impact thud on table collision
+  playImpact(intensity = 1) {
+    this.initCtx();
+    if (!this.ctx) return;
+    try {
+      const vol = Math.min(Math.max(intensity * 0.15, 0.02), 0.3);
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(140, this.ctx.currentTime);
+      osc.frequency.exponentialRampToValueAtTime(40, this.ctx.currentTime + 0.12);
+
+      gain.gain.setValueAtTime(vol, this.ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.12);
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.start();
+      osc.stop(this.ctx.currentTime + 0.12);
+    } catch {}
+  }
+
+  // Alignment snap beep
+  playSnap() {
+    this.initCtx();
+    if (!this.ctx) return;
+    try {
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(587.33, this.ctx.currentTime); // D5
+      osc.frequency.setValueAtTime(880, this.ctx.currentTime + 0.06); // A5
+
+      gain.gain.setValueAtTime(0.12, this.ctx.currentTime);
+      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.15);
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.start();
+      osc.stop(this.ctx.currentTime + 0.15);
+    } catch {}
+  }
+}
+
+export const soundFx = new SoundManager();