pmndrs/xr

To implement teleportation, follow these steps:

1. Manage Position State: Maintain a state (e.g., using useState) to track the user's current Vector3 position.
2. Control User Origin: Pass the position state to the <XROrigin /> component to move the user's camera/origin.
3. Define Teleport Targets: Wrap target meshes in a <TeleportTarget /> component. Use the onTeleport prop to receive the new position and update your state.

Example implementation:

const store = createXRStore({
  hand: { teleportPointer: true },
  controller: { teleportPointer: true },
})

export function App() {
  const [position, setPosition] = useState(new Vector3())
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <ambientLight />
          <XROrigin position={position} />
          <TeleportTarget onTeleport={setPosition}>
            <mesh scale={[10, 1, 10]} position={[0, -0.5, 0]}>
              <boxGeometry />
              <meshBasicMaterial color="green" />
            </mesh>
          </TeleportTarget>
        </XR>
      </Canvas>
    </>
 )
}

To implement a teleportation system, follow these steps:

1. Manage Position State: Use a state manager (like useState) to track the user's current Vector3 position.
2. Control User Origin: Pass the position state to the <XROrigin /> component to move the user's camera/origin.
3. Define Teleport Targets: Wrap your target meshes in a <TeleportTarget /> component.
4. Handle Teleportation: Bind your position state setter to the onTeleport prop of <TeleportTarget />. This function is called whenever a user successfully teleports to that target.

const store = createXRStore({
  hand: { teleportPointer: true },
  controller: { teleportPointer: true },
})

export function App() {
  const [position, setPosition] = useState(new Vector3())
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <ambientLight />
          <XROrigin position={position} />
          <TeleportTarget onTeleport={setPosition}>
            <mesh scale={[10, 1, 10]} position={[0, -0.5, 0]}>
              <boxGeometry />
              <meshBasicMaterial color="green" />
            </mesh>
          </TeleportTarget>
        </XR>
      </Canvas>
    </>
 )
}

To ensure high visual quality and effective user experience in XR, follow these guidelines:

Environment & Scene Construction:

• Build domain-specific scenes rather than placeholder demos.
• Include recognizable context like floors, walls, lanes, studios, or workstations.
• Use multiple object types and readable scale cues.
• Add lighting and material variation.

Interactivity & Feedback:

• Make interactive affordances obvious from plausible headset/controller poses.
• Provide explicit feedback for hover, selection, hit, miss, completion, errors, score changes, or configuration changes.
• Contextual Feedback Requirements:
  • Games: Show motion, progression, score, failure states, and final results.
  • Tools/Training: Show task state, current target, completion criteria, and final reports.
  • Simulations: Show telemetry, constraints, warnings, recovery, and mission outcomes.
  • Commerce: Show selected products/parts, variants, dimensions, price, and cart summaries.

Camera & View Management:

• Keep the primary object visible while UI is displayed. If a user looks at a menu, ensure the view returns to the active world object or frames both the panel and object.
• Treat camera orientation as part of visual quality. After interacting with a control, move or turn the camera back so the next recorded frames show the active world object rather than an empty background.