@threlte/xr
Version:
Tools to more easily create VR and AR experiences with Threlte
47 lines (46 loc) • 1.63 kB
TypeScript
import type { HTMLButtonAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte';
/**
* `<XRButton />` is an HTML `<button />` that can be used to init and
* display info about your WebXR session. This is aliased by `ARButton` and
* `VRButton` with sensible session defaults.
*
* ```svelte
* <XRButton
* mode={'immersive-ar' | 'immersive-vr' | 'inline'}
* sessionInit={{
* optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
* }}
* force={'enter' | 'exit' | undefined}
* styled={'true' | 'false'}
* onerror={(event) => {}}
* onclick={(event) => {}}
* />
* ```
*/
declare const XrButton: import("svelte").Component<HTMLButtonAttributes & {
/** The type of `XRSession` to create */
mode: XRSessionMode;
/**
* `XRSession` configuration options
* @see https://immersive-web.github.io/webxr/#feature-dependencies
*/
sessionInit?: XRSessionInit & {
domOverlay?: {
root: HTMLElement;
} | undefined;
};
/** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
force?: "enter" | "exit";
/** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
styled?: boolean;
children?: Snippet<[{
state: "blocked" | "unsupported" | "insecure" | "supported";
}]>;
onclick?: (event: {
state: "blocked" | "unsupported" | "insecure" | "supported";
nativeEvent: MouseEvent;
}) => void;
onerror?: (error: Error) => void;
}, {}, "">;
export default XrButton;