@threlte/xr 0.0.8 → 0.0.10

package/dist/components/ARButton.svelte

@@ -14,13 +14,14 @@
 </script>
 
 <XRButton
-  {...$$restProps}
-  mode='immersive-ar'
   sessionInit={{
     domOverlay: typeof document !== 'undefined' ? { root: document.body } : undefined,
     requiredFeatures: ['plane-detection'],
     optionalFeatures: ['hit-test', 'light-estimation', 'dom-overlay', 'dom-overlay-for-handheld-ar']
   }}
+  {...$$restProps}
+  mode='immersive-ar'
+  
   on:click
   on:error
 />

package/dist/components/ARButton.svelte.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
@@ -221,10 +222,16 @@ declare const __propDef: {
         'on:close'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
         'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
+        sessionInit?: XRSessionInit & {
+            domOverlay?: {
+                root: HTMLElement;
+            } | undefined;
+        };
     };
     events: {
         click: CustomEvent<{
             state: "unsupported" | "insecure" | "blocked" | "supported";
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/components/VRButton.svelte

@@ -14,11 +14,11 @@
 </script>
 
 <XRButton
-  {...$$restProps}
-  mode='immersive-vr'
   sessionInit={{
     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
   }}
+  {...$$restProps}
+  mode='immersive-vr'
   on:click
   on:error
 />

package/dist/components/VRButton.svelte.d.ts

@@ -225,6 +225,7 @@ declare const __propDef: {
     events: {
         click: CustomEvent<{
             state: "unsupported" | "insecure" | "blocked" | "supported";
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/components/XRButton.svelte

@@ -27,11 +27,11 @@ export let sessionInit = void 0;
 export let force = void 0;
 export let styled = true;
 const dispatch = createEventDispatcher();
-const handleButtonClick = async (state) => {
+const handleButtonClick = async (nativeEvent, state) => {
   if (!$initialized) {
     throw new Error("The <XR> component was not created. This is required to start an XR session.");
   }
-  dispatch("click", { state });
+  dispatch("click", { state, nativeEvent });
   if (state !== "supported")
     return;
   try {
@@ -65,7 +65,10 @@ $:
 </script>
 
 {#await getXRSupportState(mode) then state}
-  <button {...$$restProps} on:click={() => handleButtonClick(state)}>
+  <button
+    {...$$restProps}
+    on:click={(event) => handleButtonClick(event, state)}
+  >
     {#if state === 'unsupported'}
       {modeText} unsupported
     {:else if state === 'insecure'}

package/dist/components/XRButton.svelte.d.ts

@@ -232,6 +232,7 @@ declare const __propDef: {
     events: {
         click: CustomEvent<{
             state: 'unsupported' | 'insecure' | 'blocked' | 'supported';
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/hooks/useHitTest.d.ts

@@ -1,5 +1,23 @@
-import type { HitTestCallback } from '../types';
+/// <reference types="webxr" />
+import * as THREE from 'three';
+export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult | undefined) => void;
+export type UseHitTestOptions = {
+    /**
+     * The ray source when performing hit testing.
+     *
+     * @default 'viewer'
+     */
+    source?: 'viewer' | 'leftInput' | 'rightInput';
+};
 /**
- * Use this hook to perform a hit test for an AR environment.
+ * Use this hook to perform a hit test per frame in an AR environment.
+ *
+ * ```ts
+ * useHitTest((hitMatrix, hit) => {
+ *   mesh.matrix.copy(hitMatrix)
+ * }, {
+ *   source: 'viewer' | 'leftInput' | 'rightInput' // Default 'viewer'
+ * })
+ * ```
  */
-export declare const useHitTest: (hitTestCallback: HitTestCallback) => void;
+export declare const useHitTest: (hitTestCallback: HitTestCallback, options?: UseHitTestOptions) => void;

package/dist/hooks/useHitTest.js

@@ -1,44 +1,69 @@
 import * as THREE from 'three';
-import { onDestroy } from 'svelte';
-import { session } from '../internal/stores';
-import { useThrelte, useFrame } from '@threlte/core';
+import { useThrelte, useFrame, watch, currentWritable } from '@threlte/core';
+import { useXR } from './useXR';
+import { useController } from './useController';
 /**
- * Use this hook to perform a hit test for an AR environment.
+ * Use this hook to perform a hit test per frame in an AR environment.
+ *
+ * ```ts
+ * useHitTest((hitMatrix, hit) => {
+ *   mesh.matrix.copy(hitMatrix)
+ * }, {
+ *   source: 'viewer' | 'leftInput' | 'rightInput' // Default 'viewer'
+ * })
+ * ```
  */
-export const useHitTest = (hitTestCallback) => {
+export const useHitTest = (hitTestCallback, options = {}) => {
+    const source = options.source ?? 'viewer';
     const { xr } = useThrelte().renderer;
+    const xrState = useXR();
     const hitMatrix = new THREE.Matrix4();
-    let started = false;
-    let hitTestSource;
-    onDestroy(session.subscribe(async (value) => {
-        if (value === undefined) {
-            hitTestSource = undefined;
-            if (started) {
-                stop();
-                started = false;
-            }
-            return;
-        }
-        const space = await value.requestReferenceSpace('viewer');
-        hitTestSource = await value.requestHitTestSource?.({ space });
-        if (!started) {
-            start();
-            started = true;
-        }
-    }));
+    let hitTestSource = currentWritable(undefined);
+    if (source === 'viewer') {
+        watch(xrState.session, async (session) => {
+            if (session === undefined)
+                return;
+            const space = await session.requestReferenceSpace('viewer');
+            hitTestSource.set(await session.requestHitTestSource?.({ space }));
+        });
+    }
+    else {
+        const controller = useController(source === 'leftInput' ? 'left' : 'right');
+        const hand = useController(source === 'leftInput' ? 'left' : 'right');
+        watch([xrState.session, controller], async ([session, input]) => {
+            if (input === undefined || session === undefined)
+                return;
+            const space = input.inputSource.targetRaySpace;
+            hitTestSource.set(await session.requestHitTestSource?.({ space }));
+        });
+        watch([xrState.session, hand], async ([session, input]) => {
+            if (input === undefined || session === undefined)
+                return;
+            const space = input.inputSource.targetRaySpace;
+            hitTestSource.set(await session.requestHitTestSource?.({ space }));
+        });
+    }
     const { start, stop } = useFrame(() => {
-        if (hitTestSource === undefined)
-            return;
-        const [hit] = xr.getFrame().getHitTestResults(hitTestSource);
-        if (hit === undefined)
-            return;
         const referenceSpace = xr.getReferenceSpace();
-        if (referenceSpace === null)
-            return;
-        const pose = hit.getPose(referenceSpace);
-        if (pose === undefined)
-            return;
+        if (referenceSpace === null || hitTestSource.current === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
+        const [hit] = xr.getFrame().getHitTestResults(hitTestSource.current);
+        const pose = hit?.getPose(referenceSpace);
+        if (pose === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
         hitMatrix.fromArray(pose.transform.matrix);
         hitTestCallback(hitMatrix, hit);
     }, { autostart: false });
+    watch(hitTestSource, (testSource) => {
+        if (testSource === undefined) {
+            stop();
+            // Execute callback one last time to inform consumers of no hits.
+            hitTestCallback(hitMatrix, undefined);
+        }
+        else {
+            start();
+        }
+    });
 };

package/dist/internal/headset.js

@@ -11,7 +11,9 @@ export const useUpdateHeadset = () => {
         if (space === null)
             return;
         const pose = xr.getFrame().getViewerPose(space);
-        if (pose === undefined)
+        // Although pose is only typed as possibly undefined,
+        // It can be null on android chrome when using phone AR.
+        if (pose === undefined || pose === null)
             return;
         const { position, orientation } = pose.transform;
         headset.position.set(position.x, position.y, position.z);

package/dist/types.d.ts

@@ -33,4 +33,3 @@ export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'di
     handedness: 'left' | 'right';
     target: null;
 } : never;
-export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
@@ -18,7 +18,7 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-mkcert": "^1.16.0",
-    "@threlte/core": "6.0.9"
+    "@threlte/core": "6.0.10"
   },
   "peerDependencies": {
     "svelte": ">=4",