@threlte/xr 1.0.7 → 1.0.8

package/dist/components/Controller.svelte

@@ -5,14 +5,12 @@
   lang="ts"
   module
 >
-  import { writable } from 'svelte/store'
   import { T } from '@threlte/core'
   import { left as leftStore, right as rightStore } from '../hooks/useController'
   import { isHandTracking, pointerState, teleportState, controllerEvents } from '../internal/stores'
   import type { XRControllerEvents } from '../types'
   import PointerCursor from './internal/PointerCursor.svelte'
   import ShortRay from './internal/ShortRay.svelte'
-  import ScenePortal from './internal/ScenePortal.svelte'
   import TeleportCursor from './internal/TeleportCursor.svelte'
   import TeleportRay from './internal/TeleportRay.svelte'
   import type { Snippet } from 'svelte'
@@ -77,11 +75,10 @@
     teleportCursor: teleportCursorSnippet
   }: Props = $props()
 
-  const handedness = writable<'left' | 'right'>(left ? 'left' : right ? 'right' : hand)
-  $effect.pre(() => handedness.set(left ? 'left' : right ? 'right' : (hand as 'left' | 'right')))
+  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
 
   $effect.pre(() =>
-    controllerEvents[$handedness].set({
+    controllerEvents[handedness].set({
       onconnected,
       ondisconnected,
       onselect,
@@ -93,12 +90,12 @@
     })
   )
 
-  let store = $derived(stores[$handedness])
-  let grip = $derived($store?.grip)
-  let targetRay = $derived($store?.targetRay)
-  let model = $derived($store?.model)
-  let hasPointerControls = $derived($pointerState[$handedness].enabled)
-  let hasTeleportControls = $derived($teleportState[$handedness].enabled)
+  const store = $derived(stores[handedness])
+  const grip = $derived($store?.grip)
+  const targetRay = $derived($store?.targetRay)
+  const model = $derived($store?.model)
+  const hasPointerControls = $derived($pointerState[handedness].enabled)
+  const hasTeleportControls = $derived($teleportState[handedness].enabled)
 </script>
 
 {#if !$isHandTracking}
@@ -120,7 +117,7 @@
 
       {#if hasPointerControls || hasTeleportControls}
         <ShortRay
-          handedness={$handedness}
+          {handedness}
           children={pointerRaySnippet}
         />
       {/if}
@@ -128,24 +125,22 @@
   {/if}
 {/if}
 
-<ScenePortal>
-  {#if hasPointerControls}
-    <PointerCursor
-      handedness={$handedness}
-      children={pointerCursorSnippet}
-    />
-  {/if}
+{#if hasPointerControls}
+  <PointerCursor
+    {handedness}
+    children={pointerCursorSnippet}
+  />
+{/if}
 
-  {#if hasTeleportControls && targetRay !== undefined}
-    <TeleportRay
-      {targetRay}
-      handedness={$handedness}
-      children={teleportRaySnippet}
-    />
+{#if hasTeleportControls && targetRay !== undefined}
+  <TeleportRay
+    {targetRay}
+    {handedness}
+    children={teleportRaySnippet}
+  />
 
-    <TeleportCursor
-      handedness={$handedness}
-      children={teleportCursorSnippet}
-    />
-  {/if}
-</ScenePortal>
+  <TeleportCursor
+    {handedness}
+    children={teleportCursorSnippet}
+  />
+{/if}

package/dist/components/Hand.svelte

@@ -7,8 +7,6 @@
   import type { XRHandEvents } from '../types'
   import { isHandTracking, handEvents } from '../internal/stores'
   import { left as leftStore, right as rightStore } from '../hooks/useHand'
-  import ScenePortal from './internal/ScenePortal.svelte'
-  import { writable } from 'svelte/store'
   import type { Snippet } from 'svelte'
 
   const stores = {
@@ -44,7 +42,7 @@
         }
     )
 
-  let {
+  const {
     left,
     right,
     hand,
@@ -57,15 +55,14 @@
     wrist
   }: Props = $props()
 
-  const { renderer, scheduler, renderStage } = useThrelte()
+  const { scene, renderer, scheduler, renderStage } = useThrelte()
   const { xr } = renderer
   const space = xr.getReferenceSpace()
 
-  const handedness = writable<'left' | 'right'>(left ? 'left' : right ? 'right' : hand)
-  $effect.pre(() => handedness.set(left ? 'left' : right ? 'right' : (hand as 'left' | 'right')))
+  const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
 
   $effect.pre(() =>
-    handEvents[$handedness].set({
+    handEvents[handedness].set({
       onconnected,
       ondisconnected,
       onpinchend,
@@ -73,7 +70,7 @@
     })
   )
 
-  let group = new Group()
+  const group = new Group()
 
   /**
    * Currently children of a hand XRSpace or model will not
@@ -113,9 +110,9 @@
     }
   })
 
-  let store = $derived(stores[$handedness])
-  let inputSource = $derived($store?.inputSource)
-  let model = $derived($store?.model)
+  const store = $derived(stores[handedness])
+  const inputSource = $derived($store?.inputSource)
+  const model = $derived($store?.model)
 </script>
 
 {#if $store?.hand && $isHandTracking}
@@ -133,10 +130,11 @@
 {/if}
 
 {#if $isHandTracking}
-  <ScenePortal>
-    <T is={group}>
-      {@render wrist?.()}
-      {@render children?.()}
-    </T>
-  </ScenePortal>
+  <T
+    is={group}
+    attach={scene}
+  >
+    {@render wrist?.()}
+    {@render children?.()}
+  </T>
 {/if}

package/dist/components/Headset.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
-  import { T } from '@threlte/core'
+  import type { Snippet } from 'svelte'
+  import type { Group } from 'three'
+  import { T, useThrelte } from '@threlte/core'
   import { useHeadset } from '../hooks/useHeadset'
-  import ScenePortal from './internal/ScenePortal.svelte'
 
+  interface Props {
+    children?: Snippet<[{ ref: Group }]>
+  }
+
+  const { children }: Props = $props()
+
+  const { scene } = useThrelte()
   const headset = useHeadset()
 </script>
 
-<ScenePortal>
-  <T is={headset}>
-    <slot />
-  </T>
-</ScenePortal>
+<T
+  is={headset}
+  attach={scene}
+>
+  {@render children?.({ ref: headset })}
+</T>

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

@@ -1,20 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Headset: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Headset = InstanceType<typeof Headset>;
+import type { Snippet } from 'svelte';
+import type { Group } from 'three';
+declare const Headset: import("svelte").Component<{
+    children?: Snippet<[{
+        ref: Group;
+    }]>;
+}, {}, "">;
 export default Headset;

package/dist/components/XR.svelte

@@ -18,7 +18,7 @@ This should be placed within a Threlte `<Canvas />`.
 
 -->
 <script lang="ts">
-  import { onDestroy, onMount, type Snippet } from 'svelte'
+  import { onMount, type Snippet } from 'svelte'
   import { useThrelte, watch } from '@threlte/core'
   import type { XRSessionEvent } from '../types'
   import {
@@ -135,10 +135,6 @@ This should be placed within a Threlte `<Canvas />`.
     currentSession.addEventListener('inputsourceschange', handleInputSourcesChange)
     currentSession.addEventListener('frameratechange', handleFramerateChange)
 
-    xr.setFoveation(foveation)
-
-    updateTargetFrameRate(frameRate)
-
     return () => {
       currentSession.removeEventListener('visibilitychange', handleVisibilityChange)
       currentSession.removeEventListener('inputsourceschange', handleInputSourcesChange)
@@ -166,17 +162,20 @@ This should be placed within a Threlte `<Canvas />`.
       xr.enabled = false
       xr.removeEventListener('sessionstart', handleSessionStart)
       xr.removeEventListener('sessionend', handleSessionEnd)
+
+      // if unmounted while presenting (e.g. due to sveltekit navigation), end the session
+      session.current?.end()
     }
   })
-  onDestroy(() => {
-    // if unmounted while presenting (e.g. due to sveltekit navigation), end the session
-    if (session.current) {
-      session.current.end()
-    }
+
+  $effect.pre(() => {
+    updateTargetFrameRate(frameRate)
+  })
+
+  $effect.pre(() => {
+    xr.setFoveation(foveation)
   })
 
-  $effect.pre(() => updateTargetFrameRate(frameRate))
-  $effect.pre(() => xr.setFoveation(foveation))
   $effect.pre(() => {
     xr.setReferenceSpaceType(referenceSpace)
     $referenceSpaceType = referenceSpace

package/dist/components/XRButton.svelte

@@ -75,7 +75,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     }
   }
 
-  let modeText = $derived(
+  const modeText = $derived(
     {
       'immersive-vr': 'VR',
       'immersive-ar': 'AR',
@@ -83,7 +83,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     }[mode]
   )
 
-  let style = $derived(
+  const style = $derived(
     styled
       ? `
       position: absolute;
@@ -111,7 +111,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     {style}
   >
     {#if children}
-      {@render children?.({ state })}
+      {@render children({ state })}
     {:else if state === 'unsupported'}
       {modeText} unsupported
     {:else if state === 'insecure'}

package/dist/components/internal/Cursor.svelte

@@ -8,7 +8,7 @@
     thickness?: number
   }
 
-  let { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
+  const { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
 
   const vertexShader = `
     uniform mat4 projectionMatrix;
@@ -52,6 +52,7 @@
   $effect.pre(() => {
     uniforms.thickness.value = thickness
   })
+
   $effect.pre(() => {
     uniforms.color.value = color
   })

package/dist/components/internal/PointerCursor.svelte

@@ -1,6 +1,16 @@
-<script lang="ts">
+<script
+  module
+  lang="ts"
+>
   import { Group, Vector3, Matrix3 } from 'three'
-  import { T, useTask } from '@threlte/core'
+
+  const vec3 = new Vector3()
+  const normalMatrix = new Matrix3()
+  const worldNormal = new Vector3()
+</script>
+
+<script lang="ts">
+  import { T, useTask, useThrelte } from '@threlte/core'
   import { pointerIntersection, pointerState } from '../../internal/stores'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
@@ -10,27 +20,29 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
+  const { scene } = useThrelte()
   const ref = new Group()
-  const vec3 = new Vector3()
-  const normalMatrix = new Matrix3()
-  const worldNormal = new Vector3()
-
-  let hovering = $derived($pointerState[handedness].hovering)
-  let intersection = $derived(pointerIntersection[handedness])
+  const hovering = $derived($pointerState[handedness].hovering)
+  const intersection = $derived(pointerIntersection[handedness])
 
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) return
+      if (intersection.current === undefined) {
+        return
+      }
+
       const { point, face, object } = intersection.current
       ref.position.lerp(point, 0.4)
 
-      if (face) {
-        normalMatrix.getNormalMatrix(object.matrixWorld)
-        worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-        ref.lookAt(vec3.addVectors(point, worldNormal))
+      if (face === null || face === undefined) {
+        return
       }
+
+      normalMatrix.getNormalMatrix(object.matrixWorld)
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
+      ref.lookAt(vec3.addVectors(point, worldNormal))
     },
     {
       autoStart: false
@@ -38,8 +50,8 @@
   )
 
   $effect.pre(() => {
-    if (hovering) {
-      ref.position.copy(intersection.current!.point)
+    if (hovering && intersection.current) {
+      ref.position.copy(intersection.current?.point)
       start()
     } else {
       stop()
@@ -49,6 +61,7 @@
 
 <T
   is={ref}
+  attach={scene}
   visible={hovering}
 >
   {#if children}

package/dist/components/internal/ShortRay.svelte

@@ -8,11 +8,11 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
-  let hovering = $derived($teleportState[handedness].hovering)
-  let intersection = $derived(teleportIntersection[handedness])
-  let visible = $derived(
+  const hovering = $derived($teleportState[handedness].hovering)
+  const intersection = $derived(teleportIntersection[handedness])
+  const visible = $derived(
     $pointerState[handedness].enabled || (hovering && $intersection === undefined)
   )
 

package/dist/components/internal/TeleportCursor.svelte

@@ -1,7 +1,17 @@
-<script lang="ts">
-  import { spring } from 'svelte/motion'
+<script
+  module
+  lang="ts"
+>
   import { Group, Matrix3, Vector3 } from 'three'
-  import { T, useTask } from '@threlte/core'
+
+  const vec3 = new Vector3()
+  const normalMatrix = new Matrix3()
+  const worldNormal = new Vector3()
+</script>
+
+<script lang="ts">
+  import { Spring } from 'svelte/motion'
+  import { T, useTask, useThrelte } from '@threlte/core'
   import { teleportIntersection } from '../../internal/stores'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
@@ -11,18 +21,17 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
+  const { scene } = useThrelte()
   const ref = new Group()
-  const vec3 = new Vector3()
-  const normalMatrix = new Matrix3()
-  const worldNormal = new Vector3()
-
-  let intersection = $derived(teleportIntersection[handedness])
+  const intersection = $derived(teleportIntersection[handedness])
 
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) return
+      if (intersection.current === undefined) {
+        return
+      }
 
       const { point, face, object } = intersection.current
       ref.position.lerp(point, 0.4)
@@ -38,7 +47,7 @@
     }
   )
 
-  const size = spring(0.1, { stiffness: 0.2 })
+  const size = new Spring(0.1, { stiffness: 0.2 })
 
   $effect.pre(() => {
     if ($intersection === undefined) {
@@ -54,13 +63,14 @@
 
 <T
   is={ref}
+  attach={scene}
   visible={$intersection !== undefined}
 >
   {#if children}
     {@render children()}
   {:else}
     <Cursor
-      size={$size}
+      size={size.current}
       thickness={0.015}
     />
   {/if}

package/dist/components/internal/TeleportRay.svelte

@@ -1,11 +1,24 @@
-<script lang="ts">
+<script
+  module
+  lang="ts"
+>
   import { Vector3, QuadraticBezierCurve3, type XRTargetRaySpace, Vector2 } from 'three'
+
+  const rayStart = new Vector3()
+  const rayMidpoint = new Vector3()
+  const curve = new QuadraticBezierCurve3()
+  const vec3 = new Vector3()
+  const v2_1 = new Vector2()
+  const v2_2 = new Vector2()
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte'
   import { Line2 } from 'three/examples/jsm/lines/Line2.js'
   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 { T, useTask, useThrelte } from '@threlte/core'
   import { teleportIntersection } from '../../internal/stores'
-  import type { Snippet } from 'svelte'
 
   interface Props {
     handedness: 'left' | 'right'
@@ -13,21 +26,13 @@
     children?: Snippet
   }
 
-  let { handedness, targetRay, children }: Props = $props()
-
-  let lineGeometry = new LineGeometry()
+  const { handedness, targetRay, children }: Props = $props()
 
-  const rayStart = new Vector3()
-  const rayMidpoint = new Vector3()
-  const curve = new QuadraticBezierCurve3()
+  const { scene } = useThrelte()
   const rayDivisions = 40
   const positions = new Float32Array(rayDivisions * 3)
-  const vec3 = new Vector3()
-
-  const v2_1 = new Vector2()
-  const v2_2 = new Vector2()
-
-  let intersection = $derived(teleportIntersection[handedness])
+  const lineGeometry = new LineGeometry()
+  const intersection = $derived(teleportIntersection[handedness])
 
   const setCurvePoints = (alpha = 0.3) => {
     if (intersection.current === undefined) return
@@ -83,6 +88,7 @@
 {:else}
   <T
     is={Line2}
+    attach={scene}
     visible={$intersection !== undefined}
     position.z={-0.01}
   >

package/dist/plugins/pointerControls/setup.js

@@ -96,6 +96,9 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         let stopped = false;
         // loop through all hits and dispatch events
         dispatchEvents: for (const hit of hits) {
+            const events = dispatchers.get(hit.eventObject);
+            if (events === undefined)
+                continue;
             const intersectionEvent = {
                 stopped,
                 ...hit,
@@ -115,9 +118,6 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 pointer: handContext.pointer.current,
                 ray: context.raycaster.ray
             };
-            const events = dispatchers.get(hit.eventObject);
-            if (events === undefined)
-                return;
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",

package/dist/components/internal/ScenePortal.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { T, useThrelte } from '@threlte/core'
-  import { Object3D } from 'three'
-
-  const { scene } = useThrelte()
-
-  const proxy = new Object3D()
-  proxy.add = (child) => {
-    scene.add(child)
-    return child
-  }
-  proxy.remove = (child) => {
-    scene.remove(child)
-    return child
-  }
-</script>
-
-<T
-  is={proxy}
-  attach={false}
->
-  <slot />
-</T>

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

@@ -1,20 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ScenePortal: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ScenePortal = InstanceType<typeof ScenePortal>;
-export default ScenePortal;