@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.
- package/dist/components/ARButton.svelte +2 -2
- package/dist/components/ARButton.svelte.d.ts +12 -2
- package/dist/components/Controller.svelte +25 -3
- package/dist/components/Controller.svelte.d.ts +9 -12
- package/dist/components/Hand.svelte +9 -2
- package/dist/components/Hand.svelte.d.ts +9 -15
- package/dist/components/VRButton.svelte +2 -2
- package/dist/components/VRButton.svelte.d.ts +12 -2
- package/dist/components/XR.svelte +18 -13
- package/dist/components/XR.svelte.d.ts +18 -25
- package/dist/components/XRButton.svelte +9 -7
- package/dist/components/XRButton.svelte.d.ts +12 -2
- package/dist/components/internal/Cursor.svelte +12 -11
- package/dist/components/internal/Cursor.svelte.d.ts +3 -3
- package/dist/components/internal/PointerCursor.svelte +5 -6
- package/dist/components/internal/PointerCursor.svelte.d.ts +1 -0
- package/dist/components/internal/ShortRay.svelte +6 -7
- package/dist/components/internal/ShortRay.svelte.d.ts +1 -0
- package/dist/components/internal/TeleportCursor.svelte +4 -4
- package/dist/components/internal/TeleportCursor.svelte.d.ts +1 -0
- package/dist/components/internal/TeleportRay.svelte +4 -5
- package/dist/components/internal/TeleportRay.svelte.d.ts +1 -0
- package/dist/internal/stores.d.ts +5 -4
- package/dist/plugins/pointerControls/context.d.ts +12 -0
- package/dist/plugins/pointerControls/hook.d.ts +1 -1
- package/dist/plugins/pointerControls/hook.js +6 -5
- package/dist/plugins/pointerControls/plugin.js +9 -11
- package/dist/plugins/pointerControls/setup.js +35 -34
- package/dist/plugins/pointerControls/types.d.ts +10 -10
- package/dist/plugins/pointerControls/types.js +9 -9
- package/dist/plugins/teleportControls/context.d.ts +11 -5
- package/dist/plugins/teleportControls/context.js +45 -2
- package/dist/plugins/teleportControls/index.js +4 -13
- package/dist/plugins/teleportControls/plugin.js +9 -9
- package/dist/plugins/teleportControls/setup.js +1 -1
- package/dist/types.d.ts +23 -7
- package/package.json +4 -4
- package/dist/plugins/pointerControls/useComponentEventHandlers.d.ts +0 -4
- package/dist/plugins/pointerControls/useComponentEventHandlers.js +0 -13
- package/dist/plugins/teleportControls/hook.d.ts +0 -7
- 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<
|
|
10
|
-
right: import("@threlte/core").CurrentWritable<
|
|
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<
|
|
14
|
-
right: import("@threlte/core").CurrentWritable<
|
|
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
|
|
7
|
-
|
|
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,
|
|
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 {
|
|
4
|
+
import { events } from './types';
|
|
5
5
|
export const injectPointerControlsPlugin = () => {
|
|
6
|
-
injectPlugin('threlte-pointer-controls', ({ ref }) => {
|
|
7
|
-
if (ref.
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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(
|
|
20
|
-
return () => removeInteractiveObject(
|
|
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('
|
|
27
|
+
handleEvent('onpointerdown', event);
|
|
28
28
|
};
|
|
29
29
|
const handlePointerUp = (event) => {
|
|
30
|
-
handleEvent('
|
|
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('
|
|
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
|
|
51
|
-
if (
|
|
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
|
-
|
|
55
|
-
|
|
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)?.(
|
|
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 === '
|
|
92
|
-
const isClickEvent = name === '
|
|
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
|
|
119
|
-
if (
|
|
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 (
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
-
|
|
134
|
-
|
|
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
|
-
|
|
143
|
+
events.onpointermove?.(intersectionEvent);
|
|
144
144
|
}
|
|
145
145
|
else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
|
|
146
|
-
|
|
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
|
-
|
|
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('
|
|
165
|
+
handleEvent('onpointermove');
|
|
166
166
|
}
|
|
167
167
|
lastPosition.copy(targetRay.position);
|
|
168
168
|
}, {
|
|
169
169
|
fixedStep,
|
|
170
|
-
|
|
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
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
-
'
|
|
3
|
-
'
|
|
4
|
-
'
|
|
5
|
-
'
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
'
|
|
9
|
-
'
|
|
10
|
-
'
|
|
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
|
|
2
|
-
import type { CurrentWritable
|
|
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,
|
|
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
|
|
21
|
-
export declare const
|
|
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
|
|
15
|
+
export const useTeleportControls = () => {
|
|
14
16
|
return getContext(contextKey);
|
|
15
17
|
};
|
|
16
|
-
export const
|
|
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 {
|
|
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 (
|
|
9
|
+
if (useTeleportControls() === undefined) {
|
|
12
10
|
injectTeleportControlsPlugin();
|
|
13
|
-
|
|
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 =
|
|
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 './
|
|
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], ([
|
|
20
|
+
watch([refStore, propsStore], ([$refStore, $propsStore]) => {
|
|
21
21
|
if (isSurface) {
|
|
22
|
-
if (
|
|
23
|
-
removeSurface(
|
|
22
|
+
if ($propsStore.teleportSurface === false) {
|
|
23
|
+
removeSurface($refStore);
|
|
24
24
|
return noop;
|
|
25
25
|
}
|
|
26
26
|
else {
|
|
27
|
-
addSurface(
|
|
28
|
-
return () => removeSurface(
|
|
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(
|
|
33
|
+
removeBlocker($refStore);
|
|
34
34
|
return noop;
|
|
35
35
|
}
|
|
36
36
|
else {
|
|
37
|
-
addBlocker(
|
|
38
|
-
return () => removeBlocker(
|
|
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
|
-
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
26
|
+
"@threlte/core": "8.0.0-next.6"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"svelte": ">=5",
|
|
30
|
-
"three": ">=0.
|
|
30
|
+
"three": ">=0.155"
|
|
31
31
|
},
|
|
32
32
|
"type": "module",
|
|
33
33
|
"exports": {
|
|
@@ -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,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
|
-
};
|