@threlte/xr 1.0.0-next.1 → 1.0.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/ARButton.svelte +2 -2
  2. package/dist/components/ARButton.svelte.d.ts +12 -2
  3. package/dist/components/Controller.svelte +25 -3
  4. package/dist/components/Controller.svelte.d.ts +9 -12
  5. package/dist/components/Hand.svelte +9 -2
  6. package/dist/components/Hand.svelte.d.ts +9 -15
  7. package/dist/components/VRButton.svelte +2 -2
  8. package/dist/components/VRButton.svelte.d.ts +12 -2
  9. package/dist/components/XR.svelte +18 -13
  10. package/dist/components/XR.svelte.d.ts +18 -25
  11. package/dist/components/XRButton.svelte +9 -7
  12. package/dist/components/XRButton.svelte.d.ts +12 -2
  13. package/dist/components/internal/Cursor.svelte +12 -11
  14. package/dist/components/internal/Cursor.svelte.d.ts +3 -3
  15. package/dist/components/internal/PointerCursor.svelte +5 -6
  16. package/dist/components/internal/PointerCursor.svelte.d.ts +1 -0
  17. package/dist/components/internal/ShortRay.svelte +6 -7
  18. package/dist/components/internal/ShortRay.svelte.d.ts +1 -0
  19. package/dist/components/internal/TeleportCursor.svelte +4 -4
  20. package/dist/components/internal/TeleportCursor.svelte.d.ts +1 -0
  21. package/dist/components/internal/TeleportRay.svelte +4 -5
  22. package/dist/components/internal/TeleportRay.svelte.d.ts +1 -0
  23. package/dist/internal/stores.d.ts +5 -4
  24. package/dist/plugins/pointerControls/context.d.ts +12 -0
  25. package/dist/plugins/pointerControls/hook.d.ts +1 -1
  26. package/dist/plugins/pointerControls/hook.js +6 -5
  27. package/dist/plugins/pointerControls/plugin.js +9 -11
  28. package/dist/plugins/pointerControls/setup.js +35 -34
  29. package/dist/plugins/pointerControls/types.d.ts +10 -10
  30. package/dist/plugins/pointerControls/types.js +9 -9
  31. package/dist/plugins/teleportControls/context.d.ts +11 -5
  32. package/dist/plugins/teleportControls/context.js +45 -2
  33. package/dist/plugins/teleportControls/index.js +4 -13
  34. package/dist/plugins/teleportControls/plugin.js +9 -9
  35. package/dist/plugins/teleportControls/setup.js +1 -1
  36. package/dist/types.d.ts +23 -7
  37. package/package.json +4 -4
  38. package/dist/plugins/pointerControls/useComponentEventHandlers.d.ts +0 -4
  39. package/dist/plugins/pointerControls/useComponentEventHandlers.js +0 -13
  40. package/dist/plugins/teleportControls/hook.d.ts +0 -7
  41. package/dist/plugins/teleportControls/hook.js +0 -40
@@ -1,17 +1,18 @@
1
1
  /// <reference types="webxr" />
2
2
  import type { WebXRManager, Intersection } from 'three';
3
+ import type { XRControllerEvents, XRHandEvents } from '../types';
3
4
  export declare const isPresenting: import("@threlte/core").CurrentWritable<boolean>;
4
5
  export declare const isHandTracking: import("@threlte/core").CurrentWritable<boolean>;
5
6
  export declare const session: import("@threlte/core").CurrentWritable<XRSession | undefined>;
6
7
  export declare const referenceSpaceType: import("@threlte/core").CurrentWritable<XRReferenceSpaceType | undefined>;
7
8
  export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
8
9
  export declare const controllerEvents: {
9
- left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
10
- right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
10
+ left: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
11
+ right: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
11
12
  };
12
13
  export declare const handEvents: {
13
- left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
14
- right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
14
+ left: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
15
+ right: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
15
16
  };
16
17
  export declare const teleportState: import("@threlte/core").CurrentWritable<{
17
18
  left: {
@@ -0,0 +1,12 @@
1
+ import type { Object3D } from 'three';
2
+ import type { ControlsContext, HandContext } from './types';
3
+ export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
4
+ export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
5
+ export declare const getControlsContext: () => ControlsContext;
6
+ export declare const setControlsContext: (context: ControlsContext) => void;
7
+ interface InternalContext {
8
+ dispatchers: WeakMap<Object3D, Record<string, (arg: unknown) => void>>;
9
+ }
10
+ export declare const getInternalContext: () => InternalContext;
11
+ export declare const setInternalContext: () => void;
12
+ export {};
@@ -1,5 +1,5 @@
1
1
  import type { Object3D } from 'three';
2
2
  export declare const usePointerControls: () => {
3
- addInteractiveObject: (object: Object3D) => void;
3
+ addInteractiveObject: (object: Object3D, events: Record<string, (arg: unknown) => void>) => void;
4
4
  removeInteractiveObject: (object: Object3D) => void;
5
5
  };
@@ -1,15 +1,16 @@
1
- import { createRawEventDispatcher } from '@threlte/core';
2
1
  import { getControlsContext, getInternalContext } from './context';
3
2
  export const usePointerControls = () => {
4
- const { dispatchers } = getInternalContext();
5
3
  const context = getControlsContext();
6
- const eventDispatcher = createRawEventDispatcher();
7
- const addInteractiveObject = (object) => {
4
+ const { dispatchers } = getInternalContext();
5
+ if (!context) {
6
+ throw new Error('No pointer controls context found. Did you forget to implement pointerControls()?');
7
+ }
8
+ const addInteractiveObject = (object, events) => {
8
9
  // check if the object is already in the list
9
10
  if (context.interactiveObjects.indexOf(object) > -1) {
10
11
  return;
11
12
  }
12
- dispatchers.set(object, eventDispatcher);
13
+ dispatchers.set(object, events);
13
14
  context.interactiveObjects.push(object);
14
15
  };
15
16
  const removeInteractiveObject = (object) => {
@@ -1,23 +1,21 @@
1
1
  import { injectPlugin, watch } from '@threlte/core';
2
2
  import { writable } from 'svelte/store';
3
3
  import { usePointerControls } from './hook';
4
- import { useComponentHasEventHandlers } from './useComponentEventHandlers';
4
+ import { events } from './types';
5
5
  export const injectPointerControlsPlugin = () => {
6
- injectPlugin('threlte-pointer-controls', ({ ref }) => {
7
- if (ref.isMesh !== true)
6
+ injectPlugin('threlte-pointer-controls', ({ ref, props }) => {
7
+ if (!ref.isObject3D)
8
8
  return;
9
9
  const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
10
10
  const refStore = writable(ref);
11
- const { hasEventHandlers } = useComponentHasEventHandlers();
12
- watch([hasEventHandlers, refStore], ([hasEventHandlers, ref]) => {
13
- // Because hasEventHandlers will only be set from false to true in the
14
- // lifecycle of the component, we can safely assume that we do not need to
15
- // remove the object from the list of interactive objects when
16
- // hasEventHandlers is false.
11
+ watch(refStore, ($refStore) => {
12
+ const hasEventHandlers = Object.entries(props).some(([key, value]) => {
13
+ return value !== undefined && events.includes(key);
14
+ });
17
15
  if (!hasEventHandlers)
18
16
  return;
19
- addInteractiveObject(ref);
20
- return () => removeInteractiveObject(ref);
17
+ addInteractiveObject($refStore, props);
18
+ return () => removeInteractiveObject($refStore);
21
19
  });
22
20
  return {
23
21
  onRefChange(ref) {
@@ -24,10 +24,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
24
24
  return;
25
25
  handContext.initialClick = [hit.point.x, hit.point.y, hit.point.z];
26
26
  handContext.initialHits = hits.map((hit) => hit.eventObject);
27
- handleEvent('pointerdown', event);
27
+ handleEvent('onpointerdown', event);
28
28
  };
29
29
  const handlePointerUp = (event) => {
30
- handleEvent('pointerup', event);
30
+ handleEvent('onpointerup', event);
31
31
  };
32
32
  const handleClick = (event) => {
33
33
  // 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) =
35
35
  if (hits.length === 0) {
36
36
  pointerMissed(context.interactiveObjects, event);
37
37
  }
38
- handleEvent('click', event);
38
+ handleEvent('onclick', event);
39
39
  };
40
40
  function cancelPointer(intersections) {
41
41
  for (const [, hoveredObj] of handContext.hovered) {
@@ -47,12 +47,12 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
47
47
  hit.instanceId === hoveredObj.instanceId)) {
48
48
  const { eventObject } = hoveredObj;
49
49
  handContext.hovered.delete(getIntersectionId(hoveredObj));
50
- const eventDispatcher = dispatchers.get(eventObject);
51
- if (eventDispatcher) {
50
+ const events = dispatchers.get(eventObject);
51
+ if (events !== undefined) {
52
52
  // Clear out intersects, they are outdated by now
53
53
  const data = { ...hoveredObj, intersections };
54
- eventDispatcher('pointerout', data);
55
- eventDispatcher('pointerleave', data);
54
+ events.onpointerout?.(data);
55
+ events.onpointerleave?.(data);
56
56
  // Deal with cancelation
57
57
  handContext.pointerOverTarget.set(false);
58
58
  cancelPointer([]);
@@ -80,7 +80,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
80
80
  };
81
81
  function pointerMissed(objects, event) {
82
82
  for (const object of objects) {
83
- dispatchers.get(object)?.('pointermissed', event);
83
+ dispatchers.get(object)?.pointermissed?.(event);
84
84
  }
85
85
  }
86
86
  function processHits() {
@@ -88,8 +88,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
88
88
  return getHits();
89
89
  }
90
90
  const handleEvent = (name, event) => {
91
- const isPointerMove = name === 'pointermove';
92
- const isClickEvent = name === 'click' || name === 'contextmenu';
91
+ const isPointerMove = name === 'onpointermove';
92
+ const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
93
93
  // Take care of unhover
94
94
  if (isPointerMove)
95
95
  cancelPointer(hits);
@@ -115,23 +115,23 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
115
115
  pointer: handContext.pointer.current,
116
116
  ray: context.raycaster.ray
117
117
  };
118
- const eventDispatcher = dispatchers.get(hit.eventObject);
119
- if (eventDispatcher === undefined)
118
+ const events = dispatchers.get(hit.eventObject);
119
+ if (events === undefined)
120
120
  return;
121
121
  if (isPointerMove) {
122
122
  // Move event ...
123
123
  handContext.pointer.update((value) => value.copy(intersectionEvent.point));
124
- if (eventDispatcher.hasEventListener('pointerover') ||
125
- eventDispatcher.hasEventListener('pointerenter') ||
126
- eventDispatcher.hasEventListener('pointerout') ||
127
- eventDispatcher.hasEventListener('pointerleave')) {
124
+ if (events.onpointerover ||
125
+ events.onpointerenter ||
126
+ events.onpointerout ||
127
+ events.onpointerleave) {
128
128
  const id = getIntersectionId(intersectionEvent);
129
129
  const hoveredItem = handContext.hovered.get(id);
130
130
  if (hoveredItem === undefined) {
131
131
  // If the object wasn't previously hovered, book it and call its handler
132
132
  handContext.hovered.set(id, intersectionEvent);
133
- eventDispatcher('pointerover', intersectionEvent);
134
- eventDispatcher('pointerenter', intersectionEvent);
133
+ events.onpointerover?.(intersectionEvent);
134
+ events.onpointerenter?.(intersectionEvent);
135
135
  handContext.pointerOverTarget.set(true);
136
136
  }
137
137
  else if (hoveredItem.stopped) {
@@ -140,14 +140,14 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
140
140
  }
141
141
  }
142
142
  // Call pointer move
143
- eventDispatcher('pointermove', intersectionEvent);
143
+ events.onpointermove?.(intersectionEvent);
144
144
  }
145
145
  else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
146
- eventDispatcher.hasEventListener(name)) {
146
+ events[name] !== undefined) {
147
147
  // Missed events have to come first
148
148
  pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
149
149
  // Call the event
150
- eventDispatcher(name, intersectionEvent);
150
+ events[name]?.(intersectionEvent);
151
151
  }
152
152
  else if (isClickEvent && handContext.initialHits.includes(hit.eventObject)) {
153
153
  pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
@@ -162,12 +162,12 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
162
162
  if (targetRay === undefined)
163
163
  return;
164
164
  if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
165
- handleEvent('pointermove');
165
+ handleEvent('onpointermove');
166
166
  }
167
167
  lastPosition.copy(targetRay.position);
168
168
  }, {
169
169
  fixedStep,
170
- autostart: false
170
+ autoStart: false
171
171
  });
172
172
  watch(controller, (input) => {
173
173
  if (input === undefined)
@@ -181,17 +181,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
181
181
  input.targetRay.removeEventListener('select', handleClick);
182
182
  };
183
183
  });
184
- // watch(hand, (input) => {
185
- // if (input === undefined) return
186
- // input.hand.addEventListener('pinchstart', handlePointerDown)
187
- // input.hand.addEventListener('pinchend', handlePointerUp)
188
- // input.hand.addEventListener('pinchend', handleClick)
189
- // return () => {
190
- // input.hand.removeEventListener('pinchstart', handlePointerDown)
191
- // input.hand.removeEventListener('pinchend', handlePointerUp)
192
- // input.hand.removeEventListener('pinchend', handleClick)
193
- // }
194
- // })
184
+ watch(hand, (input) => {
185
+ if (input === undefined)
186
+ return;
187
+ input.hand.addEventListener('pinchstart', handlePointerDown);
188
+ input.hand.addEventListener('pinchend', handlePointerUp);
189
+ input.hand.addEventListener('pinchend', handleClick);
190
+ return () => {
191
+ input.hand.removeEventListener('pinchstart', handlePointerDown);
192
+ input.hand.removeEventListener('pinchend', handlePointerUp);
193
+ input.hand.removeEventListener('pinchend', handleClick);
194
+ };
195
+ });
195
196
  watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
196
197
  if (isPresenting && enabled) {
197
198
  start();
@@ -48,15 +48,15 @@ export interface PointerCaptureTarget {
48
48
  target: Element;
49
49
  }
50
50
  export type ThrelteXREvents = {
51
- click: IntersectionEvent;
52
- contextmenu: IntersectionEvent;
53
- pointerup: IntersectionEvent;
54
- pointerdown: IntersectionEvent;
55
- pointerover: IntersectionEvent;
56
- pointerout: IntersectionEvent;
57
- pointerenter: IntersectionEvent;
58
- pointerleave: IntersectionEvent;
59
- pointermove: IntersectionEvent;
60
- pointermissed: IntersectionEvent;
51
+ onclick: IntersectionEvent;
52
+ oncontextmenu: IntersectionEvent;
53
+ onpointerup: IntersectionEvent;
54
+ onpointerdown: IntersectionEvent;
55
+ onpointerover: IntersectionEvent;
56
+ onpointerout: IntersectionEvent;
57
+ onpointerenter: IntersectionEvent;
58
+ onpointerleave: IntersectionEvent;
59
+ onpointermove: IntersectionEvent;
60
+ onpointermissed: IntersectionEvent;
61
61
  };
62
62
  export declare const events: (keyof ThrelteXREvents)[];
@@ -1,11 +1,11 @@
1
1
  export const events = [
2
- 'click',
3
- 'contextmenu',
4
- 'pointerup',
5
- 'pointerdown',
6
- 'pointerover',
7
- 'pointerout',
8
- 'pointerenter',
9
- 'pointerleave',
10
- 'pointermove'
2
+ 'onclick',
3
+ 'oncontextmenu',
4
+ 'onpointerup',
5
+ 'onpointerdown',
6
+ 'onpointerover',
7
+ 'onpointerout',
8
+ 'onpointerenter',
9
+ 'onpointerleave',
10
+ 'onpointermove'
11
11
  ];
@@ -1,13 +1,19 @@
1
- import type { Mesh, Raycaster, Intersection } from 'three';
2
- import type { CurrentWritable, createRawEventDispatcher } from '@threlte/core';
1
+ import { type Mesh, Raycaster, type Intersection } from 'three';
2
+ import type { CurrentWritable } from '@threlte/core';
3
+ import type { TeleportControlsOptions } from '.';
3
4
  export type ComputeFunction = (context: Context, handContext: HandContext) => void;
5
+ export type TeleportEvents = {};
4
6
  export interface Context {
5
7
  interactiveObjects: Mesh[];
6
8
  surfaces: Map<string, Mesh>;
7
9
  blockers: Map<string, Mesh>;
8
- dispatchers: WeakMap<Mesh, ReturnType<typeof createRawEventDispatcher>>;
10
+ dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
9
11
  raycaster: Raycaster;
10
12
  compute: ComputeFunction;
13
+ addBlocker: (mesh: Mesh) => void;
14
+ removeBlocker: (mesh: Mesh) => void;
15
+ addSurface: (mesh: Mesh, events: TeleportEvents) => void;
16
+ removeSurface: (mesh: Mesh) => void;
11
17
  }
12
18
  export interface HandContext {
13
19
  hand: 'left' | 'right';
@@ -17,5 +23,5 @@ export interface HandContext {
17
23
  }
18
24
  export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
19
25
  export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
20
- export declare const getTeleportContext: () => Context;
21
- export declare const setTeleportContext: (context: Context) => void;
26
+ export declare const useTeleportControls: () => Context;
27
+ export declare const createTeleportContext: (compute: TeleportControlsOptions['compute']) => Context;
@@ -1,4 +1,6 @@
1
+ import { Raycaster } from 'three';
1
2
  import { getContext, setContext } from 'svelte';
3
+ import { defaultComputeFunction } from './compute';
2
4
  const handContextKeys = {
3
5
  left: Symbol('teleport-controls-context-left-hand'),
4
6
  right: Symbol('teleport-controls-context-right-hand')
@@ -10,9 +12,50 @@ export const getHandContext = (hand) => {
10
12
  export const setHandContext = (hand, context) => {
11
13
  setContext(handContextKeys[hand], context);
12
14
  };
13
- export const getTeleportContext = () => {
15
+ export const useTeleportControls = () => {
14
16
  return getContext(contextKey);
15
17
  };
16
- export const setTeleportContext = (context) => {
18
+ export const createTeleportContext = (compute) => {
19
+ const addSurface = (mesh, events) => {
20
+ // check if the object is already in the list
21
+ if (context.interactiveObjects.indexOf(mesh) > -1) {
22
+ return;
23
+ }
24
+ context.interactiveObjects.push(mesh);
25
+ context.surfaces.set(mesh.uuid, mesh);
26
+ context.dispatchers.set(mesh, events);
27
+ };
28
+ const removeSurface = (mesh) => {
29
+ const index = context.interactiveObjects.indexOf(mesh);
30
+ context.interactiveObjects.splice(index, 1);
31
+ context.surfaces.delete(mesh.uuid);
32
+ context.dispatchers.delete(mesh);
33
+ };
34
+ const addBlocker = (mesh) => {
35
+ // check if the object is already in the list
36
+ if (context.interactiveObjects.indexOf(mesh) > -1) {
37
+ return;
38
+ }
39
+ context.interactiveObjects.push(mesh);
40
+ context.blockers.set(mesh.uuid, mesh);
41
+ };
42
+ const removeBlocker = (mesh) => {
43
+ const index = context.interactiveObjects.indexOf(mesh);
44
+ context.interactiveObjects.splice(index, 1);
45
+ context.blockers.delete(mesh.uuid);
46
+ };
47
+ const context = {
48
+ interactiveObjects: [],
49
+ surfaces: new Map(),
50
+ blockers: new Map(),
51
+ dispatchers: new WeakMap(),
52
+ raycaster: new Raycaster(),
53
+ compute: compute ?? defaultComputeFunction,
54
+ addBlocker,
55
+ removeBlocker,
56
+ addSurface,
57
+ removeSurface
58
+ };
17
59
  setContext(contextKey, context);
60
+ return context;
18
61
  };
@@ -1,25 +1,16 @@
1
- import { Raycaster } from 'three';
2
1
  import { currentWritable, watch } from '@threlte/core';
3
- import { setTeleportContext, getTeleportContext, getHandContext } from './context';
2
+ import { createTeleportContext, useTeleportControls, getHandContext } from './context';
4
3
  import { injectTeleportControlsPlugin } from './plugin';
5
- import { defaultComputeFunction } from './compute';
6
4
  import { setHandContext } from './context';
7
5
  import { setupTeleportControls } from './setup';
8
6
  import { teleportState } from '../../internal/stores';
9
7
  let controlsCounter = 0;
10
8
  export const teleportControls = (handedness, options) => {
11
- if (getTeleportContext() === undefined) {
9
+ if (useTeleportControls() === undefined) {
12
10
  injectTeleportControlsPlugin();
13
- setTeleportContext({
14
- interactiveObjects: [],
15
- surfaces: new Map(),
16
- blockers: new Map(),
17
- dispatchers: new WeakMap(),
18
- raycaster: new Raycaster(),
19
- compute: options?.compute ?? defaultComputeFunction
20
- });
11
+ createTeleportContext(options?.compute);
21
12
  }
22
- const context = getTeleportContext();
13
+ const context = useTeleportControls();
23
14
  if (getHandContext(handedness) === undefined) {
24
15
  const enabled = options?.enabled ?? true;
25
16
  controlsCounter += enabled ? 1 : -1;
@@ -1,7 +1,7 @@
1
1
  import { writable } from 'svelte/store';
2
2
  import { watch } from '@threlte/core';
3
3
  import { injectPlugin } from '@threlte/core';
4
- import { useTeleportControls } from './hook';
4
+ import { useTeleportControls } from './context';
5
5
  /**
6
6
  * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
7
7
  */
@@ -17,25 +17,25 @@ export const injectTeleportControlsPlugin = () => {
17
17
  const { addBlocker, addSurface, removeBlocker, removeSurface } = useTeleportControls();
18
18
  const refStore = writable(ref);
19
19
  const propsStore = writable(props);
20
- watch([refStore, propsStore], ([nextRef, nextProps]) => {
20
+ watch([refStore, propsStore], ([$refStore, $propsStore]) => {
21
21
  if (isSurface) {
22
- if (nextProps.teleportSurface === false) {
23
- removeSurface(nextRef);
22
+ if ($propsStore.teleportSurface === false) {
23
+ removeSurface($refStore);
24
24
  return noop;
25
25
  }
26
26
  else {
27
- addSurface(nextRef);
28
- return () => removeSurface(nextRef);
27
+ addSurface($refStore, props);
28
+ return () => removeSurface($refStore);
29
29
  }
30
30
  }
31
31
  else if (isBlocker) {
32
32
  if (props.teleportBlocker === false) {
33
- removeBlocker(nextRef);
33
+ removeBlocker($refStore);
34
34
  return noop;
35
35
  }
36
36
  else {
37
- addBlocker(nextRef);
38
- return () => removeBlocker(nextRef);
37
+ addBlocker($refStore);
38
+ return () => removeBlocker($refStore);
39
39
  }
40
40
  }
41
41
  else {
@@ -49,7 +49,7 @@ export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40)
49
49
  handContext.hovered.set(intersect);
50
50
  }, {
51
51
  fixedStep,
52
- autostart: false
52
+ autoStart: false
53
53
  });
54
54
  watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
55
55
  if (isPresenting && enabled) {
package/dist/types.d.ts CHANGED
@@ -4,16 +4,26 @@ import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerMod
4
4
  import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
5
5
  export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
6
6
  export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
7
+ export type XRControllerEvents = {
8
+ onconnected?: XRControllerEvent<'connected'>;
9
+ ondisconnected?: XRControllerEvent<'disconnected'>;
10
+ onselect?: XRControllerEvent<'select'>;
11
+ onselectstart?: XRControllerEvent<'selectstart'>;
12
+ onselectend?: XRControllerEvent<'selectend'>;
13
+ onsqueeze?: XRControllerEvent<'squeeze'>;
14
+ onsqueezeend?: XRControllerEvent<'squeezeend'>;
15
+ onsqueezestart?: XRControllerEvent<'squeezestart'>;
16
+ };
7
17
  export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
8
- export type XRSessionEvent<Type = XRSessionEventType> = Event & {
18
+ export type XRSessionEvent<Type = XRSessionEventType> = (event: Event & {
9
19
  type: Type;
10
20
  target: XRSession;
11
- };
12
- export type XRControllerEvent<Type = XRControllerEventType> = Event & {
21
+ }) => void;
22
+ export type XRControllerEvent<Type = XRControllerEventType> = (event: Event & {
13
23
  type: Type;
14
24
  target: Group;
15
25
  data: XRInputSource;
16
- };
26
+ }) => void;
17
27
  export type XRController = {
18
28
  targetRay: XRTargetRaySpace;
19
29
  grip: XRGripSpace;
@@ -26,12 +36,18 @@ export type XRHand = {
26
36
  model?: XRHandModel;
27
37
  inputSource: globalThis.XRHand;
28
38
  };
29
- export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
39
+ export type XRHandEvents = {
40
+ onconnected?: XRHandEvent<'connected'>;
41
+ ondisconnected?: XRHandEvent<'disconnected'>;
42
+ onpinchstart?: XRHandEvent<'pinchstart'>;
43
+ onpinchend?: XRHandEvent<'pinchend'>;
44
+ };
45
+ export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? (event: {
30
46
  type: Type;
31
47
  target: XRHandSpace;
32
48
  data: XRInputSource;
33
- } : Type extends 'pinchstart' | 'pinchend' ? {
49
+ }) => void : Type extends 'pinchstart' | 'pinchend' ? (event: {
34
50
  type: Type;
35
51
  handedness: 'left' | 'right';
36
52
  target: null;
37
- } : never;
53
+ }) => void : never;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threlte/xr",
3
- "version": "1.0.0-next.1",
3
+ "version": "1.0.0-next.3",
4
4
  "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
@@ -18,16 +18,16 @@
18
18
  "autoprefixer": "^10.4.19",
19
19
  "postcss": "^8.4.38",
20
20
  "publint": "^0.2.7",
21
- "svelte": "^5.0.0-next.95",
21
+ "svelte": "^5.0.0-next.107",
22
22
  "three": "^0.163.0",
23
23
  "tslib": "^2.6.2",
24
24
  "vite": "^5.2.8",
25
25
  "vite-plugin-mkcert": "^1.17.5",
26
- "@threlte/core": "8.0.0-next.2"
26
+ "@threlte/core": "8.0.0-next.6"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "svelte": ">=5",
30
- "three": ">=0.152"
30
+ "three": ">=0.155"
31
31
  },
32
32
  "type": "module",
33
33
  "exports": {
@@ -1,4 +0,0 @@
1
- /// <reference types="svelte" />
2
- export declare const useComponentHasEventHandlers: () => {
3
- hasEventHandlers: import("svelte/store").Writable<boolean>;
4
- };
@@ -1,13 +0,0 @@
1
- import { onMount } from 'svelte';
2
- import { writable } from 'svelte/store';
3
- // import { events } from './types'
4
- export const useComponentHasEventHandlers = () => {
5
- const hasEventHandlers = writable(false);
6
- onMount(() => {
7
- // const match = Object.keys(component.$$.callbacks).some((callback) => events.includes(callback))
8
- hasEventHandlers.set(true);
9
- });
10
- return {
11
- hasEventHandlers
12
- };
13
- };
@@ -1,7 +0,0 @@
1
- import type { Mesh } from 'three';
2
- export declare const useTeleportControls: () => {
3
- addSurface: (mesh: Mesh) => void;
4
- removeSurface: (mesh: Mesh) => void;
5
- addBlocker: (mesh: Mesh) => void;
6
- removeBlocker: (mesh: Mesh) => void;
7
- };
@@ -1,40 +0,0 @@
1
- import { createRawEventDispatcher } from '@threlte/core';
2
- import { getTeleportContext } from './context';
3
- export const useTeleportControls = () => {
4
- const context = getTeleportContext();
5
- const eventDispatcher = createRawEventDispatcher();
6
- const addSurface = (mesh) => {
7
- // check if the object is already in the list
8
- if (context.interactiveObjects.indexOf(mesh) > -1) {
9
- return;
10
- }
11
- context.interactiveObjects.push(mesh);
12
- context.surfaces.set(mesh.uuid, mesh);
13
- context.dispatchers.set(mesh, eventDispatcher);
14
- };
15
- const removeSurface = (mesh) => {
16
- const index = context.interactiveObjects.indexOf(mesh);
17
- context.interactiveObjects.splice(index, 1);
18
- context.surfaces.delete(mesh.uuid);
19
- context.dispatchers.delete(mesh);
20
- };
21
- const addBlocker = (mesh) => {
22
- // check if the object is already in the list
23
- if (context.interactiveObjects.indexOf(mesh) > -1) {
24
- return;
25
- }
26
- context.interactiveObjects.push(mesh);
27
- context.blockers.set(mesh.uuid, mesh);
28
- };
29
- const removeBlocker = (mesh) => {
30
- const index = context.interactiveObjects.indexOf(mesh);
31
- context.interactiveObjects.splice(index, 1);
32
- context.blockers.delete(mesh.uuid);
33
- };
34
- return {
35
- addSurface,
36
- removeSurface,
37
- addBlocker,
38
- removeBlocker
39
- };
40
- };