@threlte/xr 0.0.2 → 0.0.4

package/README.md

@@ -1,13 +1,64 @@
-<h1>threlte-xr</h1>
+<div align="right">
+ <a href="https://www.npmjs.com/package/@threlte/xr">
+  <img alt="npm" src="https://img.shields.io/npm/v/@threlte/xr?color=fe4100&labelColor=171d27&logo=npm&logoColor=white"/>
+ </a>
+ <a href="https://github.com/threlte/threlte/blob/main/LICENSE.md">
+  <img alt="license" src="https://img.shields.io/npm/l/@threlte/core?color=fe4100&labelColor=171d27&logo=git&logoColor=white"/>
+ </a>
+ <a href="https://discord.com/channels/985983540804091964">
+  <img alt="discord" src="https://img.shields.io/discord/985983540804091964?label=discord&color=fe4100&labelColor=171d27&logo=discord&logoColor=white"/>
+ </a>
+ <a href="https://threlte.xyz">
+  <img alt="docs" src="https://img.shields.io/website?down_color=red&down_message=offline&label=docs&color=fe4100&labelColor=171d27&up_message=online&url=https%3A%2F%2Fthrelte.xyz&logo=svelte&logoColor=white"/>
+ </a>
+</div>
 
-[![Version](https://img.shields.io/npm/v/threlte-xr?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/threlte-xr)
-[![Downloads](https://img.shields.io/npm/dt/threlte-xr.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/threlte-xr)
+<a href="https://threlte.xyz">
+ <img src="https://threlte.xyz/logo/threlte-banner.jpg"/>
+</a>
 
-Svelte components and hooks for creating VR/AR applications with [threlte (v6)](https://next.threlte.xyz/), inspired by the design of [react-xr](https://github.com/pmndrs/react-xr).
+## Rapidly Build Interactive 3D Apps for the Web
 
-> **Warning**
-> `threlte-xr` is early in development. There will likely be frequent breaking changes until it reaches 0.1.0. It will only work with Threlte v6 onward.
+Threlte is a [Svelte](https://svelte.dev/) library that simplifies creating 3D apps for the web. It provides a **declarative**, **type-safe**, **reactive** and **interactive** API out-of-the-box.
 
-```bash
-npm install threlte-xr
+Threlte's **3D rendering** is powered by [Three.js](https://threejs.org/), and it also provides a **physics engine** through [Rapier](https://rapier.rs/) and an **animation studio** via [Theatre.js](https://www.theatrejs.com/); see [packages](#packages) for details.
+
+Check out our **[documentation](https://threlte.xyz)** and our **[Discord community](https://discord.gg/EqUBCfCaGm)**.
+
+## @threlte/xr
+
+[@threlte/xr](https://threlte.xyz/docs/reference/xr/getting-started) provides a set of components and hooks that make it easy to create XR experiences.
+
+## Quickstart
+
+### Installation
+
+For a quick interactive setup of a fresh Threlte project, run:
+
+```sh
+npm create threlte my-project
 ```
+and select the `@threlte/xr` option.
+
+Alternatively you can check out the full [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
+
+### Support
+
+Have questions? Feel free to ask in our [Discord support forum](https://discord.com/channels/985983540804091964/1031843197963477002).
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- **Filing Issues** - if you have feature requestions or you think you spotted a bug, [submit an issue](https://github.com/threlte/threlte/issues/new).
+- **Contributing Code** - if you would like to drop us a PR, read the [contribution guide](https://github.com/threlte/threlte/blob/main/CONTRIBUTING.md) first.
+
+## Sponsors
+
+[![Powered by Vercel](./assets/vercel/powered-by-vercel.svg)](https://vercel.com/?utm_source=threlte&utm_campaign=oss)
+
+---
+
+### License
+
+The MIT License (MIT). Please see the [License File](LICENSE.md) for more information.

package/dist/components/Controller.svelte

@@ -1,6 +1,5 @@
 <!--
-@component
-`<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
+@component `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
 -->
 <script
  
@@ -8,7 +7,7 @@
 >import { T, createRawEventDispatcher, useThrelte } from "@threlte/core";
 import { onDestroy } from "svelte";
 import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
-import ShortRay from "../components/ShortRay.svelte";
+import ShortRay from "./ShortRay.svelte";
 import { gaze, left as leftStore, right as rightStore } from "../hooks/useController";
 import { useControllerEvent } from "../hooks/useEvent";
 import { fire } from "../internal/events";
@@ -50,9 +49,10 @@ const dispatch = createRawEventDispatcher();
 const { xr } = useThrelte().renderer;
 const handleConnected = (event) => {
   const data = event.data;
-  if (data.handedness !== handedness)
+  const targetData = eventMap.get(event.target);
+  if (data.handedness !== handedness || !targetData)
     return;
-  stores[data.handedness].set({ ...eventMap.get(event.target), inputSource: data });
+  stores[data.handedness].set({ ...targetData, inputSource: data });
   fire("connected", event, { input: "controller" });
 };
 const handleDisconnected = (event) => {
@@ -63,20 +63,20 @@ const handleDisconnected = (event) => {
 };
 const handleEvent = (event) => fire(event.type, event);
 for (const index of [0, 1]) {
-  const controller2 = xr.getController(index);
+  const controller = xr.getController(index);
   const grip2 = xr.getControllerGrip(index);
   const model2 = factory.createControllerModel(grip2);
-  eventMap.set(controller2, { controller: controller2, model: model2, grip: grip2 });
-  controller2.addEventListener("connected", handleConnected);
-  controller2.addEventListener("disconnected", handleDisconnected);
-  events.forEach((name) => controller2.addEventListener(name, handleEvent));
+  eventMap.set(controller, { targetRay: controller, model: model2, grip: grip2 });
+  controller.addEventListener("connected", handleConnected);
+  controller.addEventListener("disconnected", handleDisconnected);
+  events.forEach((name) => controller.addEventListener(name, handleEvent));
 }
 $:
   store = left ? stores.left : stores.right;
 $:
   grip = $store?.grip;
 $:
-  controller = $store?.controller;
+  targetRay = $store?.targetRay;
 $:
   model = $store?.model;
 for (const type of ["connected", "disconnected", ...events]) {
@@ -86,10 +86,10 @@ for (const type of ["connected", "disconnected", ...events]) {
 }
 onDestroy(() => {
   for (const index of [0, 1]) {
-    const controller2 = xr.getController(index);
-    controller2.removeEventListener("connected", handleConnected);
-    controller2.removeEventListener("disconnected", handleDisconnected);
-    events.forEach((name) => controller2.removeEventListener(name, handleEvent));
+    const controller = xr.getController(index);
+    controller.removeEventListener("connected", handleConnected);
+    controller.removeEventListener("disconnected", handleDisconnected);
+    events.forEach((name) => controller.removeEventListener(name, handleEvent));
   }
 });
 </script>
@@ -108,15 +108,15 @@ onDestroy(() => {
     </T>
   {/if}
 
-  {#if controller}
+  {#if targetRay}
     <T
-      is={controller}
+      is={targetRay}
       name="XR controller {handedness}"
       visible={!$isHandTracking}
     >
       <slot name="target-ray" />
       <ShortRay
-        visible={$activeTeleportController === controller &&
+        visible={$activeTeleportController === targetRay &&
           $pendingTeleportDestination === undefined}
       />
     </T>

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

@@ -2,8 +2,9 @@ import { SvelteComponent } from "svelte";
 import type { XRControllerEvent } from '../types';
 declare const __propDef: {
     props: {
-        /** Whether the controller should be matched with the left hand. */ left?: boolean;
-        /** Whether the controller should be matched with the right hand. */ right?: boolean;
+        left: true;
+    } | {
+        right: true;
     };
     slots: {
         default: {};

package/dist/components/Headset.svelte

@@ -0,0 +1,28 @@
+<script>import { T, HierarchicalObject, useFrame, useThrelte } from "@threlte/core";
+import { Group } from "three";
+import { useBaseReferenceSpace } from "../internal/useBaseReferenceSpace";
+const { renderer, scene } = useThrelte();
+const group = new Group();
+const baseReferenceSpace = useBaseReferenceSpace();
+useFrame(() => {
+  const space = baseReferenceSpace.current;
+  if (space === null)
+    return;
+  const frame = renderer.xr.getFrame();
+  const pose = frame.getViewerPose(space);
+  if (pose === void 0)
+    return;
+  const { position, orientation } = pose.transform;
+  group.position.set(position.x, position.y, position.z);
+  group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+});
+</script>
+
+<HierarchicalObject
+  onChildMount={(child) => { scene.add(child) }}
+  onChildDestroy={(child) => { scene.remove(child) }}
+>
+	<T is={group}>
+		<slot />
+	</T>
+</HierarchicalObject>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HeadsetProps = typeof __propDef.props;
+export type HeadsetEvents = typeof __propDef.events;
+export type HeadsetSlots = typeof __propDef.slots;
+export default class Headset extends SvelteComponent<HeadsetProps, HeadsetEvents, HeadsetSlots> {
+}
+export {};

package/dist/components/ShortRay.svelte

@@ -1,6 +1,6 @@
 <script>import { T } from "@threlte/core";
 const vertexShader = `
-  uniform mat4 modelViewMatrix;                                                                                                                                                                                                  
+  uniform mat4 modelViewMatrix;
   uniform mat4 projectionMatrix;
   attribute vec2 uv;
   attribute vec3 position;
@@ -24,5 +24,9 @@ const fragmentShader = `
   {@const heightSegments = 1}
   {@const openEnded = false}
   <T.CylinderGeometry args={[radius, radius, height, radialSegments, heightSegments, openEnded]} />
-  <T.RawShaderMaterial transparent {vertexShader} {fragmentShader} />
+  <T.RawShaderMaterial
+    transparent
+    {vertexShader}
+    {fragmentShader}
+  />
 </T.Mesh>

package/dist/components/TeleportControls.svelte

@@ -97,7 +97,7 @@ const handleSelectEnd = () => {
 useFrame(() => {
   const selecting = (teleportGamepad.current?.axes[3] ?? 0) < -0.9;
   if (selecting && activeController === void 0) {
-    handleSelectStart(teleportController.current.controller);
+    handleSelectStart(teleportController.current.targetRay);
   } else if (!selecting && activeController !== void 0) {
     handleSelectEnd();
   }
@@ -133,4 +133,4 @@ teleportPlugin(navMeshes);
       polygonOffsetFactor={-1}
     />
   </T.Mesh>
-</slot>
+</slot>

package/dist/components/XR.svelte

@@ -1,7 +1,6 @@
 <!--
 
-@component
-`<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
+@component `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
 
 This should be placed within a Threlte `<Canvas />`.
 
@@ -18,10 +17,16 @@ This should be placed within a Threlte `<Canvas />`.
 ```
 
 -->
-
 <script>import { onDestroy } from "svelte";
-import { useThrelte, createRawEventDispatcher } from "@threlte/core";
-import { session, referenceSpaceType, isPresenting, isHandTracking, initialized, xr as xrStore } from "../internal/stores";
+import { createRawEventDispatcher, useThrelte } from "@threlte/core";
+import {
+  initialized,
+  isHandTracking,
+  isPresenting,
+  referenceSpaceType,
+  session,
+  xr as xrStore
+} from "../internal/stores";
 export let foveation = 1;
 export let frameRate = void 0;
 export let referenceSpace = "local-floor";
@@ -111,4 +116,6 @@ $:
 
 {#if $isPresenting}
   <slot />
-{/if}
+{:else}
+  <slot name="fallback" />
+{/if}

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

@@ -22,6 +22,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        fallback: {};
     };
     events: {
         /** Called as an XRSession is requested */

package/dist/hooks/useEvent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="webxr" />
-import type { XRControllerEventType, XRHandEventType, XRControllerEvent, XRHandEvent } from '../types';
+import type { XRControllerEvent, XRControllerEventType, XRHandEvent, XRHandEventType } from '../types';
 /**
  * Adds listeners for controller events.
  */

package/dist/hooks/useEvent.js

@@ -1,6 +1,5 @@
 import { onDestroy } from 'svelte';
-import { isHandTracking } from '../internal/stores';
-import { on, off } from '../internal/events';
+import { off, on } from '../internal/events';
 /**
  * Adds listeners for controller events.
  */

package/dist/hooks/useTeleport.js

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 import { useThrelte } from '@threlte/core';
-import { session } from '../internal/stores';
-import { onDestroy } from 'svelte';
+import { useBaseReferenceSpace } from '../internal/useBaseReferenceSpace';
 const quaternion = new THREE.Quaternion();
 const offset = { x: 0, y: 0, z: 0 };
 /**
@@ -17,18 +16,13 @@ const offset = { x: 0, y: 0, z: 0 };
  */
 export const useTeleport = () => {
     const { xr } = useThrelte().renderer;
-    let baseReferenceSpace;
-    const unsub = session.subscribe((value) => {
-        if (value === undefined)
-            return;
-        baseReferenceSpace = xr.getReferenceSpace();
-    });
-    onDestroy(unsub);
+    const baseReferenceSpace = useBaseReferenceSpace();
     /**
      * Teleports a player to a position - and optionally a direction.
      */
     return (position, direction = quaternion) => {
-        if (baseReferenceSpace === null || baseReferenceSpace === undefined)
+        const space = baseReferenceSpace.current;
+        if (space === null || space === undefined)
             return;
         let x = 0, y = 0, z = 0;
         if (Array.isArray(position)) {
@@ -43,12 +37,12 @@ export const useTeleport = () => {
         offset.x = -x;
         offset.y = -y;
         offset.z = -z;
-        const pose = xr.getFrame().getViewerPose(baseReferenceSpace);
+        const pose = xr.getFrame().getViewerPose(space);
         if (pose !== undefined) {
             offset.x += pose.transform.position.x;
             offset.z += pose.transform.position.z;
         }
         const teleportOffset = new XRRigidTransform(offset, direction);
-        xr.setReferenceSpace(baseReferenceSpace.getOffsetReferenceSpace(teleportOffset));
+        xr.setReferenceSpace(space.getOffsetReferenceSpace(teleportOffset));
     };
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
+export { default as Headset } from './components/Headset.svelte';
 export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';

package/dist/index.js

@@ -3,6 +3,7 @@ export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
+export { default as Headset } from './components/Headset.svelte';
 export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';

package/dist/internal/useBaseReferenceSpace.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="webxr" />
+/**
+ * Provides a reference space of the world origin,
+ * useful for determining offsets using XRReferenceSpace
+ */
+export declare const useBaseReferenceSpace: () => import("@threlte/core").CurrentWritable<XRReferenceSpace | null>;

package/dist/internal/useBaseReferenceSpace.js

@@ -0,0 +1,19 @@
+import { onDestroy } from 'svelte';
+import { useThrelte, currentWritable } from '@threlte/core';
+import { session } from './stores';
+/**
+ * Provides a reference space of the world origin,
+ * useful for determining offsets using XRReferenceSpace
+ */
+export const useBaseReferenceSpace = () => {
+    const { xr } = useThrelte().renderer;
+    const baseReferenceSpace = currentWritable(null);
+    onDestroy(session.subscribe((value) => {
+        if (value === undefined) {
+            baseReferenceSpace.set(null);
+            return;
+        }
+        baseReferenceSpace.set(xr.getReferenceSpace());
+    }));
+    return baseReferenceSpace;
+};

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export type XRControllerEvent<Type = XRControllerEventType> = THREE.Event & {
     data?: XRInputSource;
 };
 export type XRController = {
-    controller: THREE.XRTargetRaySpace;
+    targetRay: THREE.XRTargetRaySpace;
     grip: THREE.XRGripSpace;
     model?: XRControllerModel;
     inputSource: XRInputSource;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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.7"
+    "@threlte/core": "6.0.8"
   },
   "peerDependencies": {
     "svelte": ">=4",