WebXR frame editing

.changeset/old-elephants-do.md

@@ -0,0 +1,5 @@
+---
+"@viamrobotics/motion-tools": minor
+---
+
+Add WebXR frame editing

package.json

@@ -62,7 +62,7 @@
 		"@threlte/core": "8.5.11",
 		"@threlte/extras": "9.15.0",
 		"@threlte/rapier": "3.4.1",
-		"@threlte/xr": "1.5.2",
+		"@threlte/xr": "1.6.0",
 		"@types/bun": "1.2.21",
 		"@types/earcut": "^3.0.0",
 		"@types/lodash-es": "4.17.12",

src/lib/components/Scene.svelte

@@ -4,7 +4,7 @@
 	import { T } from '@threlte/core'
 	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
-	import { ShaderMaterial, Vector3 } from 'three'
+	import { ShaderMaterial } from 'three'
 
 	import Camera from '$lib/components/Camera.svelte'
 	import Entities from '$lib/components/Entities/Entities.svelte'
@@ -21,7 +21,7 @@
 	import CameraControls from './CameraControls.svelte'
 	import MeasureTool from './MeasureTool/MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
-	import { useOrigin } from './xr/useOrigin.svelte'
+	import XRPlugins from './xr/XRPlugins.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -31,7 +31,6 @@
 
 	const settings = useSettings()
 	const focusedObject3d = useFocusedObject3d()
-	const origin = useOrigin()
 
 	const { raycaster, enabled } = interactivity({
 		filter: (intersections) => {
@@ -60,55 +59,54 @@
 
 <Environment url={hdrImage} />
 
-<T.Group
-	position={origin.position}
-	rotation.z={origin.rotation}
->
-	<PointerMissBox />
-	<MeasureTool />
-
-	{#if focusedObject}
-		<Focus object3d={focusedObject} />
-	{:else}
-		{#if !$isPresenting}
-			<Camera position={[3, 3, 3]}>
-				<CameraControls />
-			</Camera>
-		{/if}
-
-		<StaticGeometries />
-		<Selected />
-		<SelectedTransformControls />
-
-		{#if !$isPresenting && settings.current.grid}
-			<Grid
-				oncreate={(ref) => {
-					const material = ref.material as ShaderMaterial
-					material.depthWrite = false
-				}}
-				raycast={() => null}
-				bvh={{ enabled: false }}
-				plane="xy"
-				sectionColor="#333"
-				infiniteGrid
-				renderOrder={999}
-				cellSize={settings.current.gridCellSize}
-				sectionSize={settings.current.gridSectionSize}
-				fadeOrigin={new Vector3()}
-				fadeDistance={settings.current.gridFadeDistance}
-			/>
-		{/if}
-	{/if}
+<PointerMissBox />
+<MeasureTool />
+
+{#if $isPresenting}
+	<XRPlugins />
+{/if}
 
-	<T.Group attach={focusedObject ? false : undefined}>
-		<PortalTarget />
+{#if focusedObject}
+	<Focus object3d={focusedObject} />
+{:else}
+	{#if !$isPresenting}
+		<Camera position={[3, 3, 3]}>
+			<CameraControls />
+		</Camera>
+	{/if}
 
-		<Entities />
-		<BatchedArrows />
-	</T.Group>
+	<StaticGeometries />
+	<Selected />
+	<SelectedTransformControls />
+
+	{#if !$isPresenting && settings.current.grid}
+		<Grid
+			oncreate={(ref) => {
+				const material = ref.material as ShaderMaterial
+				material.depthWrite = false
+			}}
+			raycast={() => null}
+			bvh={{ enabled: false }}
+			plane="xy"
+			sectionColor="#333"
+			infiniteGrid
+			renderOrder={999}
+			cellSize={settings.current.gridCellSize}
+			sectionSize={settings.current.gridSectionSize}
+			fadeOrigin={[0, 0, 0]}
+			fadeDistance={settings.current.gridFadeDistance}
+		/>
+	{/if}
+{/if}
 
-	{@render children?.()}
+<T.Group attach={focusedObject ? false : undefined}>
+	<PortalTarget />
 
-	<T.DirectionalLight position={[3, 3, 3]} />
-	<T.AmbientLight />
+	<Entities />
+	<BatchedArrows />
 </T.Group>
+
+{@render children?.()}
+
+<T.DirectionalLight position={[3, 3, 3]} />
+<T.AmbientLight />

src/lib/components/xr/DebugPanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Text } from 'threlte-uikit'
+	import { Panel } from 'threlte-uikit/horizon'
+
+	import { xrDebug } from './debug.svelte'
+	import WristDisplay from './WristDisplay.svelte'
+
+	const messages = $derived(xrDebug.messages)
+</script>
+
+<WristDisplay position={[0, 0.005, 0.2]}>
+	<Panel
+		flexDirection="column"
+		padding={12}
+		gap={4}
+		backgroundColor="#0a0a0a"
+		borderRadius={8}
+		minWidth={400}
+		minHeight={40}
+	>
+		{#each messages as message, i (i)}
+			<Text
+				text={message}
+				fontSize={14}
+				color="#ffffff"
+			/>
+		{/each}
+	</Panel>
+</WristDisplay>