fix peer deps, improve xrFrame hook

README.md

@@ -148,11 +148,10 @@ This hook gives you access to the current state configured by `<XR />`.
 import { useXR } from 'threlte-xr'
 
 const {
-  controllers, // Writable<XRController[]>
   isPresenting, // CurrentWritable<boolean> - Whether the XR device is presenting in an XR session
   isHandTracking, // CurrentWritable<boolean> - Whether hand tracking inputs are active
   session, // CurrentWritable<XRSession | undefined> - The active `XRSession`
-  xrFrame, // CurrentWritable<XRFrame> - The current XRFrame
+  xrFrame, // { current: XRFrame } - The current XRFrame
 } = useXR()
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "threlte-xr",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"license": "MIT",
 	"scripts": {
 		"start": "vite dev --host",
@@ -27,17 +27,17 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^3.54.0",
-		"three": "^0.153.0"
+		"svelte": ">=4",
+		"three": ">=0.135"
 	},
 	"devDependencies": {
 		"@dimforge/rapier3d-compat": "^0.11.2",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.22.4",
 		"@sveltejs/package": "^2.2.0",
-		"@threlte/core": "^6.0.2",
-		"@threlte/extras": "^5.0.4",
-		"@threlte/rapier": "^1.0.3",
+		"@threlte/core": "^6.0.3",
+		"@threlte/extras": "^5.0.5",
+		"@threlte/rapier": "^1.0.4",
 		"@types/three": "^0.155.0",
 		"autoprefixer": "^10.4.14",
 		"nice-color-palettes": "^3.0.0",
@@ -46,7 +46,7 @@
 		"svelte": "^4.1.2",
 		"svelte-check": "^3.4.6",
 		"tailwindcss": "^3.3.3",
-		"three": "^0.153.0",
+		"three": "^0.155.0",
 		"three-inspect": "^0.3.4",
 		"tslib": "^2.6.1",
 		"typescript": "^5.1.6",
@@ -61,8 +61,11 @@
 		"three.js",
 		"3d",
 		"threlte",
+		"vr",
+		"ar",
 		"xr",
 		"virtual reality",
-		"augmented reality"
+		"augmented reality",
+		"mixed reality"
 	]
 }

src/lib/components/xr.svelte

@@ -19,9 +19,9 @@ and interaction. This should be placed within a Threlte `<Canvas />`.
 <script lang='ts'>
 
 import { onDestroy } from 'svelte';
-import { useThrelte, createRawEventDispatcher, useFrame } from '@threlte/core'
+import { useThrelte, createRawEventDispatcher } from '@threlte/core'
 import type { XRSessionEvent } from '$lib/types'
-import { session, referenceSpaceType, isPresenting, isHandTracking, xrFrame, initialized, xr as xrStore } from '$lib/internal/stores'
+import { session, referenceSpaceType, isPresenting, isHandTracking, initialized, xr as xrStore } from '$lib/internal/stores'
 
 /**
  * Enables foveated rendering. `Default is `0`
@@ -57,18 +57,12 @@ type $$Events = {
 const dispatch = createRawEventDispatcher<$$Events>()
 const { xr } = useThrelte().renderer
 
-const { start, stop } = useFrame(() => {
-  xrFrame.set(xr.getFrame())
-}, { autostart: false })
-
 const handleSessionStart = (event: XRSessionEvent<'sessionstart'>) => {
-  start()
   $isPresenting = true
   dispatch('sessionstart', { ...event, target: $session! })
 }
 
 const handleSessionEnd = (event: XRSessionEvent<'sessionend'>) => {
-  stop()
   dispatch('sessionend', { ...event, target: $session! })
   $isPresenting = false
   $session = undefined

src/lib/hooks/use-xr.ts

@@ -3,14 +3,18 @@ import {
   isPresenting,
   isHandTracking,
   session,
-  xrFrame,
+  xr
 } from '$lib/internal/stores'
 
 const stores = {
   isPresenting,
   isHandTracking,
   session,
-  xrFrame,
+  xrFrame: {
+    get current() {
+      return xr.current!.getFrame()
+    },
+  },
 }
 
 /**
@@ -20,5 +24,5 @@ export const useXR = (): {
   isPresenting: CurrentWritable<boolean>
   isHandTracking: CurrentWritable<boolean>
   session: CurrentWritable<XRSession | undefined>
-  xrFrame: CurrentWritable<XRFrame | undefined>
+  xrFrame: { current: XRFrame }
 } => stores

src/lib/internal/stores.ts

@@ -5,7 +5,6 @@ export const initialized = writable(false)
 export const isPresenting = currentWritable(false)
 export const isHandTracking = currentWritable(false)
 
-export const xrFrame = currentWritable<XRFrame>(null!)
 export const session = currentWritable<XRSession | undefined>(undefined)
 export const referenceSpaceType = currentWritable<XRReferenceSpaceType | undefined>(undefined)
 export const activeTeleportController = currentWritable<THREE.XRTargetRaySpace | undefined>(undefined)

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
 
+import { onMount } from 'svelte'
 import { base } from '$app/paths'
+import * as THREE from 'three'
 
 const demos = [
   ['Events', 'events'],
@@ -12,6 +14,10 @@ const demos = [
   ['Hand Physics', 'hand-physics'],
 ] as const
 
+onMount(() => {
+  window.THREE = THREE
+})
+
 </script>
 
 <main class='p-4'>