@threlte/xr 1.0.0-next.2 → 1.0.0-next.4

package/dist/components/internal/PointerCursor.svelte

@@ -2,7 +2,7 @@
 import { T, useTask } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-let { handedness } = $props();
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
@@ -39,7 +39,9 @@ $effect.pre(() => {
   is={ref}
   visible={hovering}
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <Cursor />
-  </slot>
+  {/if}
 </T>

package/dist/components/internal/PointerCursor.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
@@ -10,9 +9,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type PointerCursorProps = typeof __propDef.props;
 export type PointerCursorEvents = typeof __propDef.events;

package/dist/components/internal/ShortRay.svelte

@@ -1,15 +1,33 @@
 <script lang="ts">import { T } from "@threlte/core";
 import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
-let { handedness } = $props();
+let { handedness, children } = $props();
 let hovering = $derived($teleportState[handedness].hovering);
 let intersection = $derived(teleportIntersection[handedness]);
 let visible = $derived(
   $pointerState[handedness].enabled || hovering && $intersection === void 0
 );
+const vertexShader = `
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    attribute vec2 uv;
+    attribute vec3 position;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }`;
+const fragmentShader = `
+    precision mediump float;
+    varying vec2 vUv;
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
+    }`;
 </script>
 
 <T.Group {visible}>
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <T.Mesh
       rotation.x={-Math.PI / 2}
       position.z={-0.1}
@@ -17,25 +35,9 @@ let visible = $derived(
       <T.CylinderGeometry args={[0.002, 0.002, 0.2, 16, 1, false]} />
       <T.RawShaderMaterial
         transparent
-        vertexShader={`
-          uniform mat4 modelViewMatrix;
-          uniform mat4 projectionMatrix;
-          attribute vec2 uv;
-          attribute vec3 position;
-          varying vec2 vUv;
-          void main() {
-            vUv = uv;
-            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }
-        `}
-        fragmentShader={`
-          precision mediump float;
-          varying vec2 vUv;
-          void main() {
-            gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
-          }
-        `}
+        {vertexShader}
+        {fragmentShader}
       />
     </T.Mesh>
-  </slot>
+  {/if}
 </T.Group>

package/dist/components/internal/ShortRay.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
@@ -10,9 +9,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type ShortRayProps = typeof __propDef.props;
 export type ShortRayEvents = typeof __propDef.events;

package/dist/components/internal/TeleportCursor.svelte

@@ -3,7 +3,7 @@ import { Group, Matrix3, Vector3 } from "three";
 import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-let { handedness } = $props();
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
@@ -42,10 +42,12 @@ $effect.pre(() => {
   is={ref}
   visible={$intersection !== undefined}
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <Cursor
       size={$size}
       thickness={0.015}
     />
-  </slot>
+  {/if}
 </T>

package/dist/components/internal/TeleportCursor.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
@@ -10,9 +9,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TeleportCursorProps = typeof __propDef.props;
 export type TeleportCursorEvents = typeof __propDef.events;

package/dist/components/internal/TeleportRay.svelte

@@ -4,7 +4,7 @@ import { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
-let { handedness, targetRay } = $props();
+let { handedness, targetRay, children } = $props();
 let lineGeometry = new LineGeometry();
 const rayStart = new Vector3();
 const rayMidpoint = new Vector3();
@@ -55,7 +55,9 @@ $effect.pre(() => {
 });
 </script>
 
-<slot>
+{#if children}
+  {@render children()}
+{:else}
   <T
     is={Line2}
     visible={$intersection !== undefined}
@@ -67,4 +69,4 @@ $effect.pre(() => {
       linewidth={0.004}
     />
   </T>
-</slot>
+{/if}

package/dist/components/internal/TeleportRay.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
         targetRay: XRTargetRaySpace;
-    } & {
         children?: ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
@@ -12,9 +11,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TeleportRayProps = typeof __propDef.props;
 export type TeleportRayEvents = typeof __propDef.events;

package/dist/internal/defaultFeatures.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultFeatures: {
+    requiredFeatures: never[];
+    optionalFeatures: string[];
+};

package/dist/internal/defaultFeatures.js

@@ -0,0 +1,14 @@
+export const defaultFeatures = {
+    requiredFeatures: [],
+    optionalFeatures: [
+        'local-floor',
+        'bounded-floor',
+        'anchors',
+        'hand-tracking',
+        'plane-detection',
+        'layers',
+        'depth-sorted-layers',
+        'hit-test',
+        'mesh-detection'
+    ]
+};

package/dist/internal/setupControllers.js

@@ -23,7 +23,7 @@ export const setupControllers = () => {
             if (hasHands())
                 return;
             const { data } = event;
-            controllerEvents[data.handedness]?.[event.type]?.(event);
+            controllerEvents[data.handedness]?.current?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay, grip } = indexMap.get(this);

package/dist/internal/setupHands.js

@@ -24,7 +24,7 @@ export const setupHands = () => {
                 return;
             const handEvent = event;
             const handedness = 'handedness' in handEvent ? handEvent.handedness : handEvent.data.handedness;
-            handEvents[handedness]?.[event.type]?.(event);
+            handEvents[handedness]?.current?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const hand = this;

package/dist/internal/setupHeadset.js

@@ -3,8 +3,9 @@ import { useThrelte, useTask, watch } from '@threlte/core';
 import { useXR } from '../hooks/useXR';
 export const headset = new Group();
 export const setupHeadset = () => {
-    const { renderer, camera } = useThrelte();
+    const { renderer, camera, scheduler, renderStage } = useThrelte();
     const { xr } = renderer;
+    const stage = scheduler.createStage(Symbol('xr-headset-stage'), { before: renderStage });
     const immersiveFrame = useTask(() => {
         const space = xr.getReferenceSpace();
         if (space === null)
@@ -17,13 +18,21 @@ export const setupHeadset = () => {
         const { position, orientation } = pose.transform;
         headset.position.set(position.x, position.y, position.z);
         headset.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
-    }, { autoStart: false, autoInvalidate: false });
+    }, {
+        autoStart: false,
+        autoInvalidate: false,
+        stage
+    });
     const nonImmersiveFrame = useTask(() => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
-    }, { autoStart: false, autoInvalidate: false });
-    watch(useXR().isPresenting, (isPresenting) => {
-        if (isPresenting) {
+    }, {
+        autoStart: false,
+        autoInvalidate: false,
+        stage
+    });
+    watch(useXR().isPresenting, ($isPresenting) => {
+        if ($isPresenting) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();
         }

package/dist/internal/setupRaf.js

@@ -1,21 +1,17 @@
-// @ts-expect-error svelte/internal is untyped.
-// import { set_raf } from 'svelte/internal'
 import { onDestroy } from 'svelte';
+// @ts-expect-error untyped internal import, when have you ever done me wrong?
+import { raf } from 'svelte/internal/client';
 import { watch } from '@threlte/core';
 import { session } from './stores';
 export const setupRaf = () => {
     if (typeof window === 'undefined')
         return;
-    const browserRaf = (fn) => requestAnimationFrame(fn);
-    const currentRaf = { fn: browserRaf };
-    // set_raf((fn: FrameRequestCallback) => currentRaf.fn(fn))
+    const originalTick = raf.tick;
     watch(session, (session) => {
-        if (session) {
-            currentRaf.fn = (fn) => session.requestAnimationFrame(fn);
-        }
-        else {
-            currentRaf.fn = browserRaf;
-        }
+        raf.tick =
+            session === undefined
+                ? originalTick
+                : (fn) => session.requestAnimationFrame(fn);
     });
-    onDestroy(() => (currentRaf.fn = browserRaf));
+    onDestroy(() => (raf.tick = originalTick));
 };

package/dist/internal/stores.d.ts

@@ -1,17 +1,18 @@
 /// <reference types="webxr" />
 import type { WebXRManager, Intersection } from 'three';
+import type { XRControllerEvents, XRHandEvents } from '../types';
 export declare const isPresenting: import("@threlte/core").CurrentWritable<boolean>;
 export declare const isHandTracking: import("@threlte/core").CurrentWritable<boolean>;
 export declare const session: import("@threlte/core").CurrentWritable<XRSession | undefined>;
 export declare const referenceSpaceType: import("@threlte/core").CurrentWritable<XRReferenceSpaceType | undefined>;
 export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
 export declare const controllerEvents: {
-    left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
+    left: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
+    right: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
 };
 export declare const handEvents: {
-    left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
+    left: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
+    right: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
 };
 export declare const teleportState: import("@threlte/core").CurrentWritable<{
     left: {

package/dist/plugins/pointerControls/plugin.js

@@ -1,6 +1,7 @@
 import { injectPlugin, watch } from '@threlte/core';
 import { writable } from 'svelte/store';
 import { usePointerControls } from './hook';
+import { events } from './types';
 export const injectPointerControlsPlugin = () => {
     injectPlugin('threlte-pointer-controls', ({ ref, props }) => {
         if (!ref.isObject3D)
@@ -8,9 +9,12 @@ export const injectPointerControlsPlugin = () => {
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
         const refStore = writable(ref);
         watch(refStore, ($refStore) => {
-            if (props.$$events === undefined)
+            const hasEventHandlers = Object.entries(props).some(([key, value]) => {
+                return value !== undefined && events.includes(key);
+            });
+            if (!hasEventHandlers)
                 return;
-            addInteractiveObject($refStore, props.$$events);
+            addInteractiveObject($refStore, props);
             return () => removeInteractiveObject($refStore);
         });
         return {

package/dist/plugins/pointerControls/setup.js

@@ -24,10 +24,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         handContext.initialClick = [hit.point.x, hit.point.y, hit.point.z];
         handContext.initialHits = hits.map((hit) => hit.eventObject);
-        handleEvent('pointerdown', event);
+        handleEvent('onpointerdown', event);
     };
     const handlePointerUp = (event) => {
-        handleEvent('pointerup', event);
+        handleEvent('onpointerup', event);
     };
     const handleClick = (event) => {
         // If a click yields no results, pass it back to the user as a miss
@@ -35,7 +35,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (hits.length === 0) {
             pointerMissed(context.interactiveObjects, event);
         }
-        handleEvent('click', event);
+        handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
         for (const [, hoveredObj] of handContext.hovered) {
@@ -51,8 +51,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 if (events !== undefined) {
                     // Clear out intersects, they are outdated by now
                     const data = { ...hoveredObj, intersections };
-                    events.pointerout?.(data);
-                    events.pointerleave?.(data);
+                    events.onpointerout?.(data);
+                    events.onpointerleave?.(data);
                     // Deal with cancelation
                     handContext.pointerOverTarget.set(false);
                     cancelPointer([]);
@@ -88,8 +88,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         return getHits();
     }
     const handleEvent = (name, event) => {
-        const isPointerMove = name === 'pointermove';
-        const isClickEvent = name === 'click' || name === 'contextmenu';
+        const isPointerMove = name === 'onpointermove';
+        const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
         // Take care of unhover
         if (isPointerMove)
             cancelPointer(hits);
@@ -121,17 +121,17 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));
-                if (events.pointerover ||
-                    events.pointerenter ||
-                    events.pointerout ||
-                    events.pointerleave) {
+                if (events.onpointerover ||
+                    events.onpointerenter ||
+                    events.onpointerout ||
+                    events.onpointerleave) {
                     const id = getIntersectionId(intersectionEvent);
                     const hoveredItem = handContext.hovered.get(id);
                     if (hoveredItem === undefined) {
                         // If the object wasn't previously hovered, book it and call its handler
                         handContext.hovered.set(id, intersectionEvent);
-                        events.pointerover?.(intersectionEvent);
-                        events.pointerenter?.(intersectionEvent);
+                        events.onpointerover?.(intersectionEvent);
+                        events.onpointerenter?.(intersectionEvent);
                         handContext.pointerOverTarget.set(true);
                     }
                     else if (hoveredItem.stopped) {
@@ -140,10 +140,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     }
                 }
                 // Call pointer move
-                events.pointermove?.(intersectionEvent);
+                events.onpointermove?.(intersectionEvent);
             }
             else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                events[name]) {
+                events[name] !== undefined) {
                 // Missed events have to come first
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
                 // Call the event
@@ -162,7 +162,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (targetRay === undefined)
             return;
         if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
-            handleEvent('pointermove');
+            handleEvent('onpointermove');
         }
         lastPosition.copy(targetRay.position);
     }, {
@@ -181,17 +181,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             input.targetRay.removeEventListener('select', handleClick);
         };
     });
-    // watch(hand, (input) => {
-    //   if (input === undefined) return
-    //   input.hand.addEventListener('pinchstart', handlePointerDown)
-    //   input.hand.addEventListener('pinchend', handlePointerUp)
-    //   input.hand.addEventListener('pinchend', handleClick)
-    //   return () => {
-    //     input.hand.removeEventListener('pinchstart', handlePointerDown)
-    //     input.hand.removeEventListener('pinchend', handlePointerUp)
-    //     input.hand.removeEventListener('pinchend', handleClick)
-    //   }
-    // })
+    watch(hand, (input) => {
+        if (input === undefined)
+            return;
+        input.hand.addEventListener('pinchstart', handlePointerDown);
+        input.hand.addEventListener('pinchend', handlePointerUp);
+        input.hand.addEventListener('pinchend', handleClick);
+        return () => {
+            input.hand.removeEventListener('pinchstart', handlePointerDown);
+            input.hand.removeEventListener('pinchend', handlePointerUp);
+            input.hand.removeEventListener('pinchend', handleClick);
+        };
+    });
     watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
         if (isPresenting && enabled) {
             start();

package/dist/plugins/pointerControls/types.d.ts

@@ -48,15 +48,15 @@ export interface PointerCaptureTarget {
     target: Element;
 }
 export type ThrelteXREvents = {
-    click: IntersectionEvent;
-    contextmenu: IntersectionEvent;
-    pointerup: IntersectionEvent;
-    pointerdown: IntersectionEvent;
-    pointerover: IntersectionEvent;
-    pointerout: IntersectionEvent;
-    pointerenter: IntersectionEvent;
-    pointerleave: IntersectionEvent;
-    pointermove: IntersectionEvent;
-    pointermissed: IntersectionEvent;
+    onclick: IntersectionEvent;
+    oncontextmenu: IntersectionEvent;
+    onpointerup: IntersectionEvent;
+    onpointerdown: IntersectionEvent;
+    onpointerover: IntersectionEvent;
+    onpointerout: IntersectionEvent;
+    onpointerenter: IntersectionEvent;
+    onpointerleave: IntersectionEvent;
+    onpointermove: IntersectionEvent;
+    onpointermissed: IntersectionEvent;
 };
 export declare const events: (keyof ThrelteXREvents)[];

package/dist/plugins/pointerControls/types.js

@@ -1,11 +1,11 @@
 export const events = [
-    'click',
-    'contextmenu',
-    'pointerup',
-    'pointerdown',
-    'pointerover',
-    'pointerout',
-    'pointerenter',
-    'pointerleave',
-    'pointermove'
+    'onclick',
+    'oncontextmenu',
+    'onpointerup',
+    'onpointerdown',
+    'onpointerover',
+    'onpointerout',
+    'onpointerenter',
+    'onpointerleave',
+    'onpointermove'
 ];

package/dist/plugins/teleportControls/context.d.ts

@@ -1,6 +1,8 @@
-import type { Mesh, Raycaster, Intersection } from 'three';
+import { type Mesh, Raycaster, type Intersection } from 'three';
 import type { CurrentWritable } from '@threlte/core';
+import type { TeleportControlsOptions } from '.';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
+export type TeleportEvents = {};
 export interface Context {
     interactiveObjects: Mesh[];
     surfaces: Map<string, Mesh>;
@@ -8,6 +10,10 @@ export interface Context {
     dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
     raycaster: Raycaster;
     compute: ComputeFunction;
+    addBlocker: (mesh: Mesh) => void;
+    removeBlocker: (mesh: Mesh) => void;
+    addSurface: (mesh: Mesh, events: TeleportEvents) => void;
+    removeSurface: (mesh: Mesh) => void;
 }
 export interface HandContext {
     hand: 'left' | 'right';
@@ -17,5 +23,5 @@ export interface HandContext {
 }
 export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
 export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
-export declare const getTeleportContext: () => Context;
-export declare const setTeleportContext: (context: Context) => void;
+export declare const useTeleportControls: () => Context;
+export declare const createTeleportContext: (compute: TeleportControlsOptions['compute']) => Context;

package/dist/plugins/teleportControls/context.js

@@ -1,4 +1,6 @@
+import { Raycaster } from 'three';
 import { getContext, setContext } from 'svelte';
+import { defaultComputeFunction } from './compute';
 const handContextKeys = {
     left: Symbol('teleport-controls-context-left-hand'),
     right: Symbol('teleport-controls-context-right-hand')
@@ -10,9 +12,50 @@ export const getHandContext = (hand) => {
 export const setHandContext = (hand, context) => {
     setContext(handContextKeys[hand], context);
 };
-export const getTeleportContext = () => {
+export const useTeleportControls = () => {
     return getContext(contextKey);
 };
-export const setTeleportContext = (context) => {
+export const createTeleportContext = (compute) => {
+    const addSurface = (mesh, events) => {
+        // check if the object is already in the list
+        if (context.interactiveObjects.indexOf(mesh) > -1) {
+            return;
+        }
+        context.interactiveObjects.push(mesh);
+        context.surfaces.set(mesh.uuid, mesh);
+        context.dispatchers.set(mesh, events);
+    };
+    const removeSurface = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.surfaces.delete(mesh.uuid);
+        context.dispatchers.delete(mesh);
+    };
+    const addBlocker = (mesh) => {
+        // check if the object is already in the list
+        if (context.interactiveObjects.indexOf(mesh) > -1) {
+            return;
+        }
+        context.interactiveObjects.push(mesh);
+        context.blockers.set(mesh.uuid, mesh);
+    };
+    const removeBlocker = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.blockers.delete(mesh.uuid);
+    };
+    const context = {
+        interactiveObjects: [],
+        surfaces: new Map(),
+        blockers: new Map(),
+        dispatchers: new WeakMap(),
+        raycaster: new Raycaster(),
+        compute: compute ?? defaultComputeFunction,
+        addBlocker,
+        removeBlocker,
+        addSurface,
+        removeSurface
+    };
     setContext(contextKey, context);
+    return context;
 };