@viamrobotics/motion-tools 1.26.0 → 1.26.2

package/dist/components/overlay/Details.svelte

@@ -3,22 +3,22 @@
 	lang="ts"
 >
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
-	import { BufferAttribute, Euler, MathUtils, Quaternion, Vector3 } from 'three'
+	import { BufferAttribute, Euler, MathUtils, Quaternion } from 'three'
 
 	import { OrientationVector } from '../../three/OrientationVector'
 
-	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
 	const ov = new OrientationVector()
 	const euler = new Euler()
 </script>
 
 <script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
 	import { draggable } from '@neodrag/svelte'
-	import { isInstanceOf, useTask, useThrelte } from '@threlte/core'
+	import { isInstanceOf, useThrelte } from '@threlte/core'
 	import { Button, Icon, Tooltip } from '@viamrobotics/prime-core'
 	import { Check, Copy } from 'lucide-svelte'
 	import {
@@ -53,7 +53,7 @@
 		useSelectedEntity,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
-	import { createPose } from '../../transform'
+	import { createPose, matrixToPose } from '../../transform'
 
 	interface Props {
 		details?: Snippet<[{ entity: Entity }]>
@@ -73,14 +73,17 @@
 	const environment = useEnvironment()
 	const focusedEntity = useFocusedEntity()
 	const focusedObject3d = useFocusedObject3d()
+	const linkedEntities = useLinkedEntities()
+
 	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
-	const worldPosition = $state({ x: 0, y: 0, z: 0 })
-	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
-	const linkedEntities = useLinkedEntities()
+
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useParentName(() => entity)
-	const localPose = useTrait(() => entity, traits.EditedPose)
+	const matrix = useTrait(() => entity, traits.Matrix)
+	const editedMatrix = useTrait(() => entity, traits.EditedMatrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
+	const center = useTrait(() => entity, traits.Center)
 	const box = useTrait(() => entity, traits.Box)
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
@@ -88,14 +91,27 @@
 	const points = useTrait(() => entity, traits.Points)
 	const arrows = useTrait(() => entity, traits.Arrows)
 	const opacity = useTrait(() => entity, traits.Opacity)
-
 	const framesAPI = useTrait(() => entity, traits.FramesAPI)
-	const isFrameNode = $derived(!!framesAPI.current)
+	const geometriesAPI = useTrait(() => entity, traits.GeometriesAPI)
+
+	const localPose = $derived.by<Pose | undefined>(() => {
+		const source = editedMatrix.current ?? matrix.current
+		if (source) return matrixToPose(source, createPose())
+		if (center.current) return createPose(center.current)
+		return undefined
+	})
+	const worldPose = $derived.by<Pose | undefined>(() => {
+		if (!worldMatrix.current) return
+
+		return matrixToPose(worldMatrix.current, createPose())
+	})
 
+	const isFrameNode = $derived(!!framesAPI.current)
+	const isGeometry = $derived(!!geometriesAPI.current)
 	const showEditFrameOptions = $derived(isFrameNode && partConfig.hasEditPermissions)
 	const showRelationshipOptions = $derived(points.current || arrows.current)
-
 	const resourceName = $derived(name.current ? resourceByName.current[name.current] : undefined)
+	const displayType = $derived(isFrameNode ? resourceName?.subtype : isGeometry ? 'geometry' : '')
 
 	let geometryType = $derived.by<'box' | 'sphere' | 'capsule' | 'none'>(() => {
 		if (box.current) return 'box'
@@ -120,13 +136,8 @@
 	let dragElement = $state.raw<HTMLElement>()
 
 	const eulerValue = $derived.by<RotationEulerValueObject>(() => {
-		if (!localPose.current) return { x: 0, y: 0, z: 0 }
-		ov.set(
-			localPose.current.oX,
-			localPose.current.oY,
-			localPose.current.oZ,
-			MathUtils.degToRad(localPose.current.theta)
-		)
+		if (!localPose) return { x: 0, y: 0, z: 0 }
+		ov.set(localPose.oX, localPose.oY, localPose.oZ, MathUtils.degToRad(localPose.theta))
 		ov.toEuler(euler)
 		return {
 			x: MathUtils.radToDeg(euler.x),
@@ -236,65 +247,28 @@
 		}
 	}
 
-	useTask(
-		() => {
-			object3d?.getWorldPosition(vec3)
-			if (!vec3.equals(worldPosition)) {
-				worldPosition.x = vec3.x
-				worldPosition.y = vec3.y
-				worldPosition.z = vec3.z
-			}
-
-			object3d?.getWorldQuaternion(quaternion)
-			ov.setFromQuaternion(quaternion)
-
-			if (!ov.equals(worldOrientation)) {
-				worldOrientation.x = ov.x
-				worldOrientation.y = ov.y
-				worldOrientation.z = ov.z
-				worldOrientation.th = ov.th
-			}
-		},
-		{
-			autoInvalidate: false,
-			running: () => object3d !== undefined,
-		}
-	)
-
-	$effect(() => {
-		if (entity) {
-			const worldPose = createPose({
-				x: worldPosition.x,
-				y: worldPosition.y,
-				z: worldPosition.z,
-				oX: worldOrientation.x,
-				oY: worldOrientation.y,
-				oZ: worldOrientation.z,
-				theta: MathUtils.radToDeg(worldOrientation.th),
-			})
-			if (entity.has(traits.WorldPose)) {
-				entity.set(traits.WorldPose, worldPose)
-			} else {
-				entity.add(traits.WorldPose(worldPose))
-			}
-		}
-	})
-
 	const getCopyClipboardText = () => {
 		return JSON.stringify(
 			{
-				worldPosition: worldPosition,
-				worldOrientation: worldOrientation,
+				worldPosition: worldPose ? { x: worldPose.x, y: worldPose.y, z: worldPose.z } : null,
+				worldOrientation: worldPose
+					? {
+							x: worldPose.oX,
+							y: worldPose.oY,
+							z: worldPose.oZ,
+							th: MathUtils.degToRad(worldPose.theta),
+						}
+					: null,
 				localPosition: {
-					x: localPose.current?.x,
-					y: localPose.current?.y,
-					z: localPose.current?.z,
+					x: localPose?.x,
+					y: localPose?.y,
+					z: localPose?.z,
 				},
 				localOrientation: {
-					x: localPose.current?.oX,
-					y: localPose.current?.oY,
-					z: localPose.current?.oZ,
-					th: localPose.current?.theta,
+					x: localPose?.oX,
+					y: localPose?.oY,
+					z: localPose?.oZ,
+					th: localPose?.theta,
 				},
 				geometry: {
 					type: geometryType,
@@ -350,7 +324,7 @@
 		>
 			<div class="flex w-[90%] items-center gap-1">
 				<strong class="overflow-hidden text-nowrap text-ellipsis">{name.current}</strong>
-				<span class="text-subtle-2">{resourceName?.subtype}</span>
+				<span class="text-subtle-2">{displayType}</span>
 			</div>
 
 			{#if object3d}
@@ -438,15 +412,15 @@
 				<div class="flex gap-3">
 					<div>
 						<span class="text-subtle-2">x</span>
-						{(worldPosition.x * 1000).toFixed(2)}
+						{(worldPose?.x ?? 0).toFixed(2)}
 					</div>
 					<div>
 						<span class="text-subtle-2">y</span>
-						{(worldPosition.y * 1000).toFixed(2)}
+						{(worldPose?.y ?? 0).toFixed(2)}
 					</div>
 					<div>
 						<span class="text-subtle-2">z</span>
-						{(worldPosition.z * 1000).toFixed(2)}
+						{(worldPose?.z ?? 0).toFixed(2)}
 					</div>
 				</div>
 			</div>
@@ -457,19 +431,19 @@
 				<div class="flex gap-3">
 					<div>
 						<span class="text-subtle-2">x</span>
-						{worldOrientation.x.toFixed(2)}
+						{(worldPose?.oX ?? 0).toFixed(2)}
 					</div>
 					<div>
 						<span class="text-subtle-2">y</span>
-						{worldOrientation.y.toFixed(2)}
+						{(worldPose?.oY ?? 0).toFixed(2)}
 					</div>
 					<div>
 						<span class="text-subtle-2">z</span>
-						{worldOrientation.z.toFixed(2)}
+						{(worldPose?.oZ ?? 0).toFixed(2)}
 					</div>
 					<div>
 						<span class="text-subtle-2">th</span>
-						{MathUtils.radToDeg(worldOrientation.th).toFixed(2)}
+						{(worldPose?.theta ?? 0).toFixed(2)}
 					</div>
 				</div>
 			</div>
@@ -505,7 +479,7 @@
 				{/if}
 			</div>
 
-			{#if localPose.current}
+			{#if localPose}
 				<div>
 					<strong class="font-semibold">local position</strong>
 					<span class="text-subtle-2">(mm)</span>
@@ -514,9 +488,9 @@
 						<div aria-label="mutable local position">
 							<Point
 								value={{
-									x: localPose.current.x,
-									y: localPose.current.y,
-									z: localPose.current.z,
+									x: localPose.x,
+									y: localPose.y,
+									z: localPose.z,
 								}}
 								on:change={handlePositionChange}
 							/>
@@ -526,17 +500,17 @@
 							{@render ImmutableField({
 								label: 'x',
 								ariaLabel: 'local position x coordinate',
-								value: localPose.current.x,
+								value: localPose.x,
 							})}
 							{@render ImmutableField({
 								label: 'y',
 								ariaLabel: 'local position y coordinate',
-								value: localPose.current.y,
+								value: localPose.y,
 							})}
 							{@render ImmutableField({
 								label: 'z',
 								ariaLabel: 'local position z coordinate',
-								value: localPose.current.z,
+								value: localPose.z,
 							})}
 						</div>
 					{/if}
@@ -551,10 +525,10 @@
 								<TabPage title="OV (deg)">
 									<Point
 										value={{
-											x: localPose.current.oX,
-											y: localPose.current.oY,
-											z: localPose.current.oZ,
-											w: localPose.current.theta,
+											x: localPose.oX,
+											y: localPose.oY,
+											z: localPose.oZ,
+											w: localPose.theta,
 										}}
 										on:change={handleOrientationOVChange}
 									/>
@@ -573,22 +547,22 @@
 							{@render ImmutableField({
 								label: 'x',
 								ariaLabel: 'local orientation x coordinate',
-								value: localPose.current.oX,
+								value: localPose.oX,
 							})}
 							{@render ImmutableField({
 								label: 'y',
 								ariaLabel: 'local orientation y coordinate',
-								value: localPose.current.oY,
+								value: localPose.oY,
 							})}
 							{@render ImmutableField({
 								label: 'z',
 								ariaLabel: 'local orientation z coordinate',
-								value: localPose.current.oZ,
+								value: localPose.oZ,
 							})}
 							{@render ImmutableField({
 								label: 'th',
 								ariaLabel: 'local orientation theta degrees',
-								value: localPose.current.theta,
+								value: localPose.theta,
 							})}
 						</div>
 					{/if}
@@ -611,6 +585,7 @@
 												y: box.current.y,
 												z: box.current.z,
 											}}
+											min={0}
 											on:change={handleBoxChange}
 										/>
 									</div>
@@ -622,6 +597,7 @@
 										<Slider
 											label="r"
 											value={sphere.current.r}
+											min={0}
 											on:change={handleSphereRChange}
 										/>
 									</div>
@@ -633,11 +609,13 @@
 										<Slider
 											label="r"
 											value={capsule.current.r}
+											min={0}
 											on:change={handleCapsuleRChange}
 										/>
 										<Slider
 											label="l"
 											value={capsule.current.l}
+											min={0}
 											on:change={handleCapsuleLChange}
 										/>
 									</div>

package/dist/components/overlay/__tests__/__fixtures__/entity.js

@@ -1,20 +1,17 @@
+import { Matrix4 } from 'three';
 import { hierarchy, traits } from '../../../../ecs';
+import { createPose, poseToMatrix } from '../../../../transform';
+// OV must be a unit vector — (0.6, 0.8, 0) magnitude 1 — so the matrix
+// round-trip in Details.svelte returns the same components.
+const buildMatrix = () => poseToMatrix(createPose({
+    x: 10,
+    y: 20,
+    z: 30,
+    oX: 0.6,
+    oY: 0.8,
+    oZ: 0,
+    theta: 0.4,
+}), new Matrix4());
 export const createEntityFixture = (world) => {
-    return world.spawn(...hierarchy.parentTraits('parent_frame'), traits.Name('Test Object'), traits.Pose({
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    }), traits.EditedPose({
-        x: 10,
-        y: 20,
-        z: 30,
-        oX: 0.1,
-        oY: 0.2,
-        oZ: 0.3,
-        theta: 0.4,
-    }), traits.Box({ x: 0.01, y: 0.02, z: 0.03 }));
+    return world.spawn(...hierarchy.parentTraits('parent_frame'), traits.Name('Test Object'), traits.Matrix(buildMatrix()), traits.EditedMatrix(buildMatrix()), traits.Box({ x: 0.01, y: 0.02, z: 0.03 }));
 };

package/dist/components/overlay/left-pane/Tree.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
 	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tree from '@zag-js/tree-view'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { SvelteSet } from 'svelte/reactivity'
 
-	import { traits } from '../../../ecs'
+	import { relations, traits } from '../../../ecs'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 
-	import type { TreeNode as TreeNodeType } from './buildTree'
+	import type { TreeNode as TreeNodeType } from './useTree.svelte'
 
 	import TreeNode from './TreeNode.svelte'
 
@@ -15,12 +17,11 @@
 
 	interface Props {
 		rootNode: TreeNodeType
-		nodeMap: Record<string, TreeNodeType | undefined>
 		dragElement?: HTMLElement
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
 	}
 
-	let { rootNode, nodeMap, onSelectionChange, dragElement = $bindable() }: Props = $props()
+	let { rootNode, onSelectionChange, dragElement = $bindable() }: Props = $props()
 
 	const collection = $derived(
 		tree.collection<TreeNodeType>({
@@ -34,11 +35,10 @@
 	const expandedValues = new SvelteSet<string>()
 
 	$effect(() => {
-		let name = selected.current?.get(traits.Name)
-		let node = nodeMap[name ?? '']
-		while (node) {
-			expandedValues.add(`${node.entity}`)
-			node = node.parent
+		let entity: Entity | undefined = selected.current
+		while (entity) {
+			expandedValues.add(`${entity}`)
+			entity = entity.targetFor(relations.ChildOf)
 		}
 	})
 

package/dist/components/overlay/left-pane/Tree.svelte.d.ts

@@ -1,8 +1,7 @@
 import * as tree from '@zag-js/tree-view';
-import type { TreeNode as TreeNodeType } from './buildTree';
+import type { TreeNode as TreeNodeType } from './useTree.svelte';
 interface Props {
     rootNode: TreeNodeType;
-    nodeMap: Record<string, TreeNodeType | undefined>;
     dragElement?: HTMLElement;
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
 }

package/dist/components/overlay/left-pane/TreeContainer.svelte

@@ -1,36 +1,26 @@
 <script lang="ts">
 	import { type Entity, IsExcluded } from 'koota'
 
-	import { traits, useQuery, useWorld } from '../../../ecs'
-	import { useFrames } from '../../../hooks/useFrames.svelte'
+	import { traits, useWorld } from '../../../ecs'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 
 	import FloatingPanel from '../FloatingPanel.svelte'
-	import { buildTreeNodes, type TreeNode } from './buildTree'
 	import Tree from './Tree.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
+	import { type TreeNode, useTree } from './useTree.svelte'
 
 	provideTreeExpandedContext()
 
 	const selectedEntity = useSelectedEntity()
-
-	const frames = useFrames()
 	const world = useWorld()
 
 	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
 
-	const allEntities = useQuery(traits.Name)
-
-	const { rootNodes, nodeMap } = $derived.by(() => {
-		// This ensures the tree rebuilds when frame parent relationships change
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		frames.current
-		return buildTreeNodes(allEntities.current)
-	})
+	const tree = useTree()
 
 	const rootNode = $derived<TreeNode>({
 		entity: worldEntity,
-		children: rootNodes,
+		children: tree.current,
 	})
 </script>
 
@@ -44,7 +34,6 @@
 >
 	<Tree
 		{rootNode}
-		{nodeMap}
 		onSelectionChange={(event) => {
 			const value = event.selectedValue[0]
 

package/dist/components/overlay/left-pane/TreeNode.svelte

@@ -6,7 +6,7 @@
 
 	import { traits, useTrait } from '../../../ecs'
 
-	import type { TreeNode } from './buildTree'
+	import type { TreeNode } from './useTree.svelte'
 
 	import Self from './TreeNode.svelte'
 

package/dist/components/overlay/left-pane/TreeNode.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Api } from '@zag-js/tree-view';
-import type { TreeNode } from './buildTree';
+import type { TreeNode } from './useTree.svelte';
 interface Props {
     node: TreeNode;
     indexPath: number[];

package/dist/components/overlay/left-pane/useTree.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Entity } from 'koota';
+export interface TreeNode {
+    entity: Entity;
+    children?: TreeNode[];
+}
+/**
+ * Reactive top-down tree built from `ChildOf` relations. Rebuilds when any
+ * named entity is added, removed, renamed, or gains/loses a `ChildOf` or
+ * `Orphan` edge. Orphans are hidden from the tree — they reappear once
+ * `provideHierarchy` resolves them to a real `ChildOf` parent.
+ */
+export declare const useTree: () => {
+    readonly current: TreeNode[];
+};

package/dist/components/overlay/left-pane/useTree.svelte.js

@@ -0,0 +1,63 @@
+import { Not } from 'koota';
+import { createSubscriber } from 'svelte/reactivity';
+import { relations, traits, useWorld } from '../../../ecs';
+const compareByName = (a, b) => (a.get(traits.Name) ?? '').localeCompare(b.get(traits.Name) ?? '');
+const buildTree = (world) => {
+    const walk = (entity) => {
+        const node = { entity };
+        const children = world.query(relations.ChildOf(entity)).toSorted(compareByName);
+        if (children.length > 0) {
+            node.children = children.map((child) => walk(child));
+        }
+        return node;
+    };
+    const rootEntities = [];
+    for (const entity of world.query(traits.Name, Not(traits.Orphan))) {
+        if (entity.targetFor(relations.ChildOf))
+            continue;
+        rootEntities.push(entity);
+    }
+    rootEntities.sort(compareByName);
+    return rootEntities.map((entity) => walk(entity));
+};
+/**
+ * Reactive top-down tree built from `ChildOf` relations. Rebuilds when any
+ * named entity is added, removed, renamed, or gains/loses a `ChildOf` or
+ * `Orphan` edge. Orphans are hidden from the tree — they reappear once
+ * `provideHierarchy` resolves them to a real `ChildOf` parent.
+ */
+export const useTree = () => {
+    const world = useWorld();
+    let cached;
+    let dirty = true;
+    const subscribe = createSubscriber((update) => {
+        const invalidate = () => {
+            dirty = true;
+            update();
+        };
+        const unsubs = [
+            world.onAdd(traits.Name, invalidate),
+            world.onRemove(traits.Name, invalidate),
+            world.onChange(traits.Name, invalidate),
+            world.onAdd(relations.ChildOf, invalidate),
+            world.onChange(relations.ChildOf, invalidate),
+            world.onRemove(relations.ChildOf, invalidate),
+            world.onAdd(traits.Orphan, invalidate),
+            world.onRemove(traits.Orphan, invalidate),
+        ];
+        return () => {
+            for (const unsub of unsubs)
+                unsub();
+        };
+    });
+    return {
+        get current() {
+            subscribe();
+            if (dirty || !cached) {
+                cached = buildTree(world);
+                dirty = false;
+            }
+            return cached;
+        },
+    };
+};

package/dist/draw.js

@@ -1,4 +1,4 @@
-import { Vector3, Vector4 } from 'three';
+import { Matrix4, Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { UuidTool } from 'uuid-tool';
 import { createBufferGeometry, preAllocateBufferGeometry, updateBufferGeometry, writeBufferGeometryRange, } from './attribute';
@@ -6,7 +6,7 @@ import { asFloat32Array, asOpacity, asRGB, inMeters, isSingleColor, isVertexColo
 import { hierarchy, relations, traits } from './ecs';
 import { parsePcdInWorker } from './loaders/pcd';
 import { metadataFromStruct } from './metadata';
-import { createPose } from './transform';
+import { createPose, poseToMatrix } from './transform';
 import { ColorFormat } from './buf/draw/v1/metadata_pb';
 import { isPointCloud } from './geometry';
 const vec3 = new Vector3();
@@ -38,7 +38,7 @@ const isModel = (drawing) => {
 export const drawTransform = (world, { referenceFrame, poseInObserverFrame, physicalObject, metadata, uuid }, api, { removable = true } = {}) => {
     const entityTraits = [
         traits.Name(referenceFrame),
-        traits.Pose(createPose(poseInObserverFrame?.pose)),
+        traits.Matrix(poseToMatrix(createPose(poseInObserverFrame?.pose), new Matrix4())),
         api,
     ];
     const uuidStr = uuidBytesToString(uuid);
@@ -88,7 +88,7 @@ export const drawDrawing = (world, drawing, api, { removable = true } = {}) => {
     const uuidStr = uuidBytesToString(uuid);
     if (uuidStr)
         uuidTraits.push(traits.UUID(uuidStr));
-    const entity = world.spawn(traits.Name(referenceFrame), traits.Pose(createPose(poseInObserverFrame?.pose)), api, ...hierarchy.parentTraits(poseInObserverFrame?.referenceFrame), ...uuidTraits);
+    const entity = world.spawn(traits.Name(referenceFrame), traits.Matrix(poseToMatrix(createPose(poseInObserverFrame?.pose), new Matrix4())), api, ...hierarchy.parentTraits(poseInObserverFrame?.referenceFrame), ...uuidTraits);
     if (removable)
         entity.add(traits.Removable);
     if (metadata?.showAxesHelper)
@@ -99,7 +99,14 @@ export const drawDrawing = (world, drawing, api, { removable = true } = {}) => {
     return { entity, relationships: metadata?.relationships };
 };
 export const updateTransform = (entity, { poseInObserverFrame, physicalObject, metadata }, { removable = true } = {}) => {
-    entity.set(traits.Pose, createPose(poseInObserverFrame?.pose));
+    const matrix = entity.get(traits.Matrix);
+    if (matrix) {
+        poseToMatrix(createPose(poseInObserverFrame?.pose), matrix);
+        entity.changed(traits.Matrix);
+    }
+    else {
+        entity.add(traits.Matrix(poseToMatrix(createPose(poseInObserverFrame?.pose), new Matrix4())));
+    }
     hierarchy.setParent(entity, poseInObserverFrame?.referenceFrame);
     if (physicalObject) {
         traits.updateGeometryTrait(entity, physicalObject);
@@ -144,7 +151,14 @@ export const updateDrawing = (world, entity, drawing, { removable = true } = {})
     const { poseInObserverFrame, metadata } = drawing;
     if (!world.has(entity))
         return { entity, relationships: metadata?.relationships };
-    entity.set(traits.Pose, createPose(poseInObserverFrame?.pose));
+    const matrix = entity.get(traits.Matrix);
+    if (matrix) {
+        poseToMatrix(createPose(poseInObserverFrame?.pose), matrix);
+        entity.changed(traits.Matrix);
+    }
+    else {
+        entity.add(traits.Matrix(poseToMatrix(createPose(poseInObserverFrame?.pose), new Matrix4())));
+    }
     hierarchy.setParent(entity, poseInObserverFrame?.referenceFrame);
     if (metadata?.showAxesHelper)
         entity.add(traits.ShowAxesHelper);
@@ -270,7 +284,7 @@ const drawModel = (world, model, api, { removable = true }) => {
     const { animationName, assets, scale } = physicalObject.geometryType.value;
     const baseTraits = [
         traits.Name(referenceFrame),
-        traits.Pose(createPose(poseInObserverFrame?.pose)),
+        traits.Matrix(poseToMatrix(createPose(poseInObserverFrame?.pose), new Matrix4())),
         api,
         ...hierarchy.parentTraits(poseInObserverFrame?.referenceFrame),
     ];

package/dist/ecs/index.d.ts

@@ -4,6 +4,7 @@ export { useTrait } from './useTrait.svelte';
 export { useTarget } from './useTarget.svelte';
 export { useParentName } from './useParentName.svelte';
 export { provideHierarchy } from './provideHierarchy.svelte';
+export { provideWorldMatrix } from './provideWorldMatrix.svelte';
 export * as traits from './traits';
 export * as relations from './relations';
 export * as hierarchy from './hierarchy';

package/dist/ecs/index.js

@@ -4,6 +4,7 @@ export { useTrait } from './useTrait.svelte';
 export { useTarget } from './useTarget.svelte';
 export { useParentName } from './useParentName.svelte';
 export { provideHierarchy } from './provideHierarchy.svelte';
+export { provideWorldMatrix } from './provideWorldMatrix.svelte';
 export * as traits from './traits';
 export * as relations from './relations';
 export * as hierarchy from './hierarchy';