@viamrobotics/motion-tools 0.16.0 → 0.16.2

package/dist/components/Details.svelte

@@ -3,7 +3,7 @@
 	lang="ts"
 >
 	import { OrientationVector } from '../three/OrientationVector'
-	import { Quaternion, Vector3 } from 'three'
+	import { Quaternion, Vector3, MathUtils } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -29,6 +29,7 @@
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
+
 	const { ...rest } = $props()
 
 	const focused = useFocused()
@@ -265,19 +266,20 @@
 			{#if worldPosition}
 				<div>
 					<strong class="font-semibold">world position</strong>
+					<span class="text-subtle-2">(m)</span>
 
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{(worldPosition.x * 1000).toFixed(2)}
+							{worldPosition.x.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{(worldPosition.y * 1000).toFixed(2)}
+							{worldPosition.y.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{(worldPosition.z * 1000).toFixed(2)}
+							{worldPosition.z.toFixed(2)}
 						</div>
 					</div>
 				</div>
@@ -286,6 +288,7 @@
 			{#if worldOrientation}
 				<div>
 					<strong class="font-semibold">world orientation</strong>
+					<span class="text-subtle-2">(deg)</span>
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
@@ -301,7 +304,7 @@
 						</div>
 						<div>
 							<span class="text-subtle-2">th</span>
-							{worldOrientation.th.toFixed(2)}
+							{MathUtils.radToDeg(worldOrientation.th).toFixed(2)}
 						</div>
 					</div>
 				</div>
@@ -326,6 +329,7 @@
 					{@const PoseAttribute = showEditFrameOptions ? MutableField : ImmutableField}
 					<div>
 						<strong class="font-semibold">local position</strong>
+						<span class="text-subtle-2">(m)</span>
 
 						<div class="flex gap-3">
 							{@render PoseAttribute({
@@ -354,6 +358,7 @@
 
 					<div>
 						<strong class="font-semibold">local orientation</strong>
+						<span class="text-subtle-2">(deg)</span>
 						<div class="flex {showEditFrameOptions ? 'gap-2' : 'gap-3'}">
 							{@render PoseAttribute({
 								label: 'x',

package/dist/hooks/useDrawAPI.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { Color, Vector3, Vector4 } from 'three';
+import { Color, MathUtils, Quaternion, Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -8,6 +8,11 @@ import { useArrows } from './useArrows.svelte';
 import { createGeometry } from '../geometry';
 import { createPose, createPoseFromFrame } from '../transform';
 import { useCameraControls } from './useControls.svelte';
+import { useThrelte } from '@threlte/core';
+import { OrientationVector } from '../three/OrientationVector';
+const axis = new Vector3();
+const quaternion = new Quaternion();
+const ov = new OrientationVector();
 const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
@@ -51,6 +56,7 @@ class Float32Reader {
 }
 export const provideDrawAPI = () => {
     const cameraControls = useCameraControls();
+    const { invalidate } = useThrelte();
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -167,7 +173,27 @@ export const provideDrawAPI = () => {
             direction.set(nextPoses[i + 3], nextPoses[i + 4], nextPoses[i + 5]);
             color.set(colors[j], colors[j + 1], colors[j + 2]);
             const arrowId = batchedArrow.addArrow(direction, origin, length, color, arrowHeadAtPose === 1);
-            poses.push(new WorldObject(`pose ${++poseIndex}`, undefined, undefined, undefined, {
+            const pose = createPose();
+            pose.x = origin.x;
+            pose.y = origin.y;
+            pose.z = origin.z;
+            if (direction.y > 0.99999) {
+                quaternion.set(0, 0, 0, 1);
+            }
+            else if (direction.y < -0.99999) {
+                quaternion.set(1, 0, 0, 0);
+            }
+            else {
+                axis.set(direction.z, 0, -direction.x).normalize();
+                const radians = Math.acos(direction.y);
+                quaternion.setFromAxisAngle(axis, radians);
+            }
+            ov.setFromQuaternion(quaternion);
+            pose.oX = ov.x;
+            pose.oY = ov.y;
+            pose.oZ = ov.z;
+            pose.theta = MathUtils.radToDeg(ov.th);
+            poses.push(new WorldObject(`pose ${++poseIndex}`, pose, 'world', undefined, {
                 getBoundingBoxAt(box3) {
                     return batchedArrow.getBoundingBoxAt(arrowId, box3);
                 },
@@ -177,6 +203,7 @@ export const provideDrawAPI = () => {
                 },
             }));
         }
+        invalidate();
     };
     const drawPoints = async (reader) => {
         // Read label length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",