From fb34dd1f924c37b436e3ef74ca3e549c1b7fbc36 Mon Sep 17 00:00:00 2001
From: Micheal Parks <micheal.parks@outlook.com>
Date: Mon, 20 Nov 2023 15:17:04 -0500
Subject: [PATCH 1/4] update three, use color attribute, fix slam camera and
 grid bug

---
 packages/blocks/package.json                  |  6 +-
 .../components/axes-helper.svelte             | 13 ++--
 .../components/draw-tool.svelte               |  2 +-
 .../navigation-map/components/obstacle.svelte | 12 ++--
 .../blocks/src/lib/slam-map-2d/helpers.svelte |  2 +-
 .../blocks/src/lib/slam-map-2d/marker.svelte  |  6 +-
 .../blocks/src/lib/slam-map-2d/scene.svelte   | 23 +++----
 packages/blocks/src/routes/+page.svelte       |  4 +-
 pnpm-lock.yaml                                | 60 ++++++++-----------
 9 files changed, 51 insertions(+), 77 deletions(-)

diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index c5b02a4c..ea953735 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -52,9 +52,9 @@
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/svelte": "^4.0.3",
-    "@threlte/core": "^6.0.6",
+    "@threlte/core": "^6.1.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@types/three": "^0.155.0",
+    "@types/three": "^0.158.2",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "@viamrobotics/eslint-config": "^0.2.4",
@@ -80,7 +80,7 @@
     "svelte": "^4.2.0",
     "svelte-check": "^3.5.0",
     "tailwindcss": "^3.3.3",
-    "three": "^0.155.0",
+    "three": "^0.158.0",
     "tslib": "^2.6.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
diff --git a/packages/blocks/src/lib/navigation-map/components/axes-helper.svelte b/packages/blocks/src/lib/navigation-map/components/axes-helper.svelte
index 1c9f2107..f66fdd7c 100644
--- a/packages/blocks/src/lib/navigation-map/components/axes-helper.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/axes-helper.svelte
@@ -2,7 +2,6 @@
   @component An AxesHelper with thick lines.
 -->
 <script lang="ts">
-import * as THREE from 'three';
 import { T } from '@threlte/core';
 import { view } from '../stores';
 
@@ -22,8 +21,8 @@ export let length = 10;
   renderOrder={10}
 >
   <!-- Don't depth test these materials: we always want them to render on top. -->
-  <T
-    is={new THREE.MeshBasicMaterial({ color: 'red' })}
+  <T.MeshBasicMaterial
+    color="red"
     depthTest={false}
   />
   <T.CylinderGeometry args={[1, 1, 1]} />
@@ -37,8 +36,8 @@ export let length = 10;
   position.y={length / 2}
   renderOrder={10}
 >
-  <T
-    is={new THREE.MeshBasicMaterial({ color: 'blue' })}
+  <T.MeshBasicMaterial
+    color="blue"
     depthTest={false}
   />
   <T.CylinderGeometry args={[1, 1, 1]} />
@@ -52,8 +51,8 @@ export let length = 10;
   position.z={length / 2}
   renderOrder={10}
 >
-  <T
-    is={new THREE.MeshBasicMaterial({ color: 'green' })}
+  <T.MeshBasicMaterial
+    color="green"
     depthTest={false}
   />
   <T.CylinderGeometry args={[1, 1, 1]} />
diff --git a/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte b/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
index 7cfda488..5af13b19 100644
--- a/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
@@ -128,6 +128,6 @@ $: if (drawing) {
         on:create={handleGeometryCreate}
       />
     {/if}
-    <T is={new THREE.MeshPhongMaterial({ color: 'red' })} />
+    <T.MeshPhongMaterial color="red" />
   </T.Mesh>
 </T.Group>
diff --git a/packages/blocks/src/lib/navigation-map/components/obstacle.svelte b/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
index 84315dc8..0eae7748 100644
--- a/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
@@ -22,8 +22,6 @@ interface $$Events extends Record<string, unknown> {
 const dispatch = createRawEventDispatcher<$$Events>();
 const { map } = useMapLibre();
 
-let material: THREE.MeshPhongMaterial;
-
 let pointerdownTheta = 0;
 let pointerdownRadius = 0;
 let pointerdownLength = 0;
@@ -147,11 +145,6 @@ const handlePointerUp = () => {
 };
 
 $: active = $hovered === name || $selected === name;
-$: (material as THREE.MeshPhongMaterial | undefined)?.color.set(
-  active
-    ? theme.extend.colors['solar-power']
-    : theme.extend.colors['power-wire']
-);
 
 $: if (draggingObstacle) {
   map.on('mousemove', handlePointerMove);
@@ -236,6 +229,9 @@ useMapLibreEvent('mousedown', handleMapPointerDown);
       />
     {/if}
 
-    <T.MeshPhongMaterial bind:ref={material} />
+    <T.MeshPhongMaterial color={active
+      ? theme.extend.colors['solar-power']
+      : theme.extend.colors['power-wire']}
+    />
   </T.Mesh>
 {/each}
diff --git a/packages/blocks/src/lib/slam-map-2d/helpers.svelte b/packages/blocks/src/lib/slam-map-2d/helpers.svelte
index 55a8a2ca..dbd2874a 100644
--- a/packages/blocks/src/lib/slam-map-2d/helpers.svelte
+++ b/packages/blocks/src/lib/slam-map-2d/helpers.svelte
@@ -14,10 +14,10 @@ import AxesHelper from './axes-helper.svelte';
   infiniteGrid
   fadeDistance={150}
   renderOrder={renderOrder.grid}
-  plane="xy"
   rotation.x={Math.PI / 2}
   cellColor="#ddd"
   sectionColor="#ccc"
+  sectionThickness={1.5}
   position.z={-0.1}
 />
 
diff --git a/packages/blocks/src/lib/slam-map-2d/marker.svelte b/packages/blocks/src/lib/slam-map-2d/marker.svelte
index 34ef5bab..1199c103 100644
--- a/packages/blocks/src/lib/slam-map-2d/marker.svelte
+++ b/packages/blocks/src/lib/slam-map-2d/marker.svelte
@@ -19,10 +19,6 @@ import { renderOrder } from './render-order';
 export let name: string;
 export let url: string;
 export let rotation = 0;
-
-const handleSpriteCreate = ({ ref }: { ref: THREE.SpriteMaterial }) => {
-  ref.color.set('#ff0047');
-};
 </script>
 
 <T.Sprite
@@ -33,7 +29,7 @@ const handleSpriteCreate = ({ ref }: { ref: THREE.SpriteMaterial }) => {
   <T.SpriteMaterial
     map={textureLoader.load(url)}
     sizeAttenuation={false}
+    color="#ff0047"
     {rotation}
-    on:create={handleSpriteCreate}
   />
 </T.Sprite>
diff --git a/packages/blocks/src/lib/slam-map-2d/scene.svelte b/packages/blocks/src/lib/slam-map-2d/scene.svelte
index dd0b0ba9..bd1f5cde 100644
--- a/packages/blocks/src/lib/slam-map-2d/scene.svelte
+++ b/packages/blocks/src/lib/slam-map-2d/scene.svelte
@@ -23,11 +23,11 @@ useRaycastClick();
 
 const { renderer, camera, invalidate } = useThrelte();
 
+let controls: MapControls
+
 const baseSpriteSize = 15.5;
 const defaultPointSize = 0.03;
 
-let cameraX = 0;
-let cameraY = 0;
 let userControlling = false;
 let markerScale = 0;
 let pointSize = 0;
@@ -51,9 +51,10 @@ interface UpdateEvent {
 
 const handlePointsUpdate = ({ center, radius }: UpdateEvent) => {
   if (!userControlling) {
-    cameraX = center.x;
-    cameraY = center.y;
-
+    camera.current.position.set(center.x, center.y, 1)
+    camera.current.lookAt(center.x, center.y, 0)
+    controls.target.set(center.x, center.y, 0)
+  
     const viewHeight = 1;
     const viewWidth = viewHeight * 2;
     const aspect =
@@ -65,14 +66,12 @@ const handlePointsUpdate = ({ center, radius }: UpdateEvent) => {
       aspect > 1
         ? viewHeight / (radius * aspectInverse)
         : viewWidth / (radius * aspectInverse);
+    cam.updateProjectionMatrix()
 
     updateZoom();
   }
 };
 
-const handleCameraCreate = ({ ref }: { ref: THREE.OrthographicCamera }) =>
-  ref.lookAt(0, 0, 0);
-
 $: markerScale = baseSpriteSize / zoom;
 $: pointSize = zoom * defaultPointSize * window.devicePixelRatio;
 $: updateZoom($camera as THREE.OrthographicCamera);
@@ -82,18 +81,12 @@ $: updateZoom($camera as THREE.OrthographicCamera);
   makeDefault
   near={0.1}
   far={2}
-  position.x={cameraX}
-  position.y={cameraY}
-  position.z={1}
   zoom={10}
-  on:create={handleCameraCreate}
   let:ref
 >
   <T.MapControls
+    bind:ref={controls}
     args={[ref, renderer.domElement]}
-    target.x={cameraX}
-    target.y={cameraY}
-    target.z={0}
     enableRotate={false}
     screenSpacePanning={true}
     on:change={handleControlsChange}
diff --git a/packages/blocks/src/routes/+page.svelte b/packages/blocks/src/routes/+page.svelte
index 99f99be4..dc34c216 100644
--- a/packages/blocks/src/routes/+page.svelte
+++ b/packages/blocks/src/routes/+page.svelte
@@ -12,8 +12,6 @@ const fetchPointcloud = async () => {
 </script>
 
 <div class="m-auto flex max-w-6xl flex-col gap-6 py-6">
-  <NavigationMap />
-
   <div class="px-12">
     <div class="relative aspect-video w-full border border-gray-200">
       {#await fetchPointcloud() then pointcloud}
@@ -26,6 +24,8 @@ const fetchPointcloud = async () => {
     </div>
   </div>
 
+  <NavigationMap />
+
   <div class="px-12">
     <div class="relative aspect-video w-full border border-gray-200 pt-0">
       <MapLibre />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3214c467..83cf07df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ importers:
     dependencies:
       '@threlte/extras':
         specifier: '>=7'
-        version: 7.3.0(svelte@4.2.0)(three@0.155.0)
+        version: 7.3.0(svelte@4.2.0)(three@0.158.0)
       maplibre-gl:
         specifier: ^3.3.0
         version: 3.3.0
@@ -39,14 +39,14 @@ importers:
         specifier: ^4.0.3
         version: 4.0.3(svelte@4.2.0)
       '@threlte/core':
-        specifier: ^6.0.6
-        version: 6.0.6(svelte@4.2.0)(three@0.155.0)
+        specifier: ^6.1.1
+        version: 6.1.1(svelte@4.2.0)(three@0.158.0)
       '@types/testing-library__jest-dom':
         specifier: ^5.14.9
         version: 5.14.9
       '@types/three':
-        specifier: ^0.155.0
-        version: 0.155.0
+        specifier: ^0.158.2
+        version: 0.158.2
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.7.0
         version: 6.7.0(@typescript-eslint/parser@6.7.0)(eslint@8.49.0)(typescript@5.2.2)
@@ -64,7 +64,7 @@ importers:
         version: link:../core
       '@viamrobotics/three':
         specifier: ^0.0.2
-        version: 0.0.2(three@0.155.0)
+        version: 0.0.2(three@0.158.0)
       '@viamrobotics/typescript-config':
         specifier: ^0.1.0
         version: 0.1.0(typescript@5.2.2)
@@ -123,8 +123,8 @@ importers:
         specifier: ^3.3.3
         version: 3.3.3
       three:
-        specifier: ^0.155.0
-        version: 0.155.0
+        specifier: ^0.158.0
+        version: 0.158.0
       tslib:
         specifier: ^2.6.1
         version: 2.6.1
@@ -4664,17 +4664,17 @@ packages:
       '@testing-library/dom': 9.3.1
     dev: true
 
-  /@threlte/core@6.0.6(svelte@4.2.0)(three@0.155.0):
-    resolution: {integrity: sha512-nB1MgGc/3vXmsbrgPVK9m9lTrFx5EdPB368oagzZZxzmqLD60aEmbRzF9JfyWtU59HP7KBLWC3Z8pXb883a4Sg==}
+  /@threlte/core@6.1.1(svelte@4.2.0)(three@0.158.0):
+    resolution: {integrity: sha512-bEsZIZzmP6vOg4bWbUg5EKxEid3KhO6YZ69bQM1NrtSC467KxXMxNorPGiAr2e5Z0L3w5++aRoSKmYjeUMLZ0g==}
     peerDependencies:
       svelte: '>=4'
       three: '>=0.133'
     dependencies:
       svelte: 4.2.0
-      three: 0.155.0
+      three: 0.158.0
     dev: true
 
-  /@threlte/extras@7.3.0(svelte@4.2.0)(three@0.155.0):
+  /@threlte/extras@7.3.0(svelte@4.2.0)(three@0.158.0):
     resolution: {integrity: sha512-Q7y+a6e45PtbE+MNK4ercSTYxcXto9MZKvBkgmbJiv3kDZxSYJuhys4pKJlhKZ5Nq17ZC0txDKCg0aLKBkrF1g==}
     peerDependencies:
       svelte: '>=4'
@@ -4682,8 +4682,8 @@ packages:
     dependencies:
       lodash-es: 4.17.21
       svelte: 4.2.0
-      three: 0.155.0
-      troika-three-text: 0.47.2(three@0.155.0)
+      three: 0.158.0
+      troika-three-text: 0.47.2(three@0.158.0)
     dev: false
 
   /@tootallnate/once@2.0.0:
@@ -4691,10 +4691,6 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /@tweenjs/tween.js@18.6.4:
-    resolution: {integrity: sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==}
-    dev: true
-
   /@types/aria-query@5.0.1:
     resolution: {integrity: sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==}
     dev: true
@@ -4994,14 +4990,12 @@ packages:
       '@types/jest': 29.5.3
     dev: true
 
-  /@types/three@0.155.0:
-    resolution: {integrity: sha512-IzdbqXsGsbG0flvq9D5L9pZRwySQQps2bGcizLYEsfvK3dM+B0sqKR6S+xAOXbouXemfDmHttrcQjVOM46YnAw==}
+  /@types/three@0.158.2:
+    resolution: {integrity: sha512-KPYbdLI8VPhu7qnHqsayfkuk58Qk+20l1U5HBK7uG50EjtrqeCreurNNpnatMZje29XRuTM1A+pGHGdDBHPyUQ==}
     dependencies:
-      '@tweenjs/tween.js': 18.6.4
       '@types/stats.js': 0.17.0
       '@types/webxr': 0.5.3
       fflate: 0.6.10
-      lil-gui: 0.17.0
       meshoptimizer: 0.18.1
     dev: true
 
@@ -5266,12 +5260,12 @@ packages:
       prettier-plugin-tailwindcss: 0.5.4(prettier-plugin-svelte@3.0.3)(prettier@3.0.3)
     dev: true
 
-  /@viamrobotics/three@0.0.2(three@0.155.0):
+  /@viamrobotics/three@0.0.2(three@0.158.0):
     resolution: {integrity: sha512-pRRwtVfY1kcaymwSs+o3Lpc9RBvWOGwhb5RPlbYgYK994N3oHSWwWG1PpBeuBGkwqM6hLCcTRVp8+SLQOHy+Ag==}
     peerDependencies:
       three: '*'
     dependencies:
-      three: 0.155.0
+      three: 0.158.0
     dev: true
 
   /@viamrobotics/typescript-config@0.1.0(typescript@5.2.2):
@@ -9116,10 +9110,6 @@ packages:
       type-check: 0.4.0
     dev: true
 
-  /lil-gui@0.17.0:
-    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
-    dev: true
-
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -12336,8 +12326,8 @@ packages:
       any-promise: 1.3.0
     dev: true
 
-  /three@0.155.0:
-    resolution: {integrity: sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==}
+  /three@0.158.0:
+    resolution: {integrity: sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==}
 
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@@ -12424,24 +12414,24 @@ packages:
     hasBin: true
     dev: true
 
-  /troika-three-text@0.47.2(three@0.155.0):
+  /troika-three-text@0.47.2(three@0.158.0):
     resolution: {integrity: sha512-qylT0F+U7xGs+/PEf3ujBdJMYWbn0Qci0kLqI5BJG2kW1wdg4T1XSxneypnF05DxFqJhEzuaOR9S2SjiyknMng==}
     peerDependencies:
       three: '>=0.125.0'
     dependencies:
       bidi-js: 1.0.3
-      three: 0.155.0
-      troika-three-utils: 0.47.2(three@0.155.0)
+      three: 0.158.0
+      troika-three-utils: 0.47.2(three@0.158.0)
       troika-worker-utils: 0.47.2
       webgl-sdf-generator: 1.1.1
     dev: false
 
-  /troika-three-utils@0.47.2(three@0.155.0):
+  /troika-three-utils@0.47.2(three@0.158.0):
     resolution: {integrity: sha512-/28plhCxfKtH7MSxEGx8e3b/OXU5A0xlwl+Sbdp0H8FXUHKZDoksduEKmjQayXYtxAyuUiCRunYIv/8Vi7aiyg==}
     peerDependencies:
       three: '>=0.125.0'
     dependencies:
-      three: 0.155.0
+      three: 0.158.0
     dev: false
 
   /troika-worker-utils@0.47.2:

From 92bfc7b7ad297f65e639be612c5c993398c5e85d Mon Sep 17 00:00:00 2001
From: Micheal Parks <micheal.parks@outlook.com>
Date: Mon, 20 Nov 2023 15:20:34 -0500
Subject: [PATCH 2/4] bump blocks version

---
 packages/blocks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index ea953735..3971cd12 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "publishConfig": {
     "access": "public"
   },

From a55a1276b24d92ffb305c75c1f55c5a8c0b308f2 Mon Sep 17 00:00:00 2001
From: Micheal Parks <micheal.parks@outlook.com>
Date: Mon, 20 Nov 2023 15:26:49 -0500
Subject: [PATCH 3/4] format

---
 .../lib/navigation-map/components/obstacle.svelte    |  7 ++++---
 packages/blocks/src/lib/slam-map-2d/scene.svelte     | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/blocks/src/lib/navigation-map/components/obstacle.svelte b/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
index 0eae7748..e5505c4b 100644
--- a/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/obstacle.svelte
@@ -229,9 +229,10 @@ useMapLibreEvent('mousedown', handleMapPointerDown);
       />
     {/if}
 
-    <T.MeshPhongMaterial color={active
-      ? theme.extend.colors['solar-power']
-      : theme.extend.colors['power-wire']}
+    <T.MeshPhongMaterial
+      color={active
+        ? theme.extend.colors['solar-power']
+        : theme.extend.colors['power-wire']}
     />
   </T.Mesh>
 {/each}
diff --git a/packages/blocks/src/lib/slam-map-2d/scene.svelte b/packages/blocks/src/lib/slam-map-2d/scene.svelte
index bd1f5cde..00b84b13 100644
--- a/packages/blocks/src/lib/slam-map-2d/scene.svelte
+++ b/packages/blocks/src/lib/slam-map-2d/scene.svelte
@@ -23,7 +23,7 @@ useRaycastClick();
 
 const { renderer, camera, invalidate } = useThrelte();
 
-let controls: MapControls
+let controls: MapControls;
 
 const baseSpriteSize = 15.5;
 const defaultPointSize = 0.03;
@@ -51,10 +51,10 @@ interface UpdateEvent {
 
 const handlePointsUpdate = ({ center, radius }: UpdateEvent) => {
   if (!userControlling) {
-    camera.current.position.set(center.x, center.y, 1)
-    camera.current.lookAt(center.x, center.y, 0)
-    controls.target.set(center.x, center.y, 0)
-  
+    camera.current.position.set(center.x, center.y, 1);
+    camera.current.lookAt(center.x, center.y, 0);
+    controls.target.set(center.x, center.y, 0);
+
     const viewHeight = 1;
     const viewWidth = viewHeight * 2;
     const aspect =
@@ -66,7 +66,7 @@ const handlePointsUpdate = ({ center, radius }: UpdateEvent) => {
       aspect > 1
         ? viewHeight / (radius * aspectInverse)
         : viewWidth / (radius * aspectInverse);
-    cam.updateProjectionMatrix()
+    cam.updateProjectionMatrix();
 
     updateZoom();
   }

From 947db48d407a1cf2931b14aef8b22b28828ee117 Mon Sep 17 00:00:00 2001
From: Micheal Parks <micheal.parks@outlook.com>
Date: Mon, 20 Nov 2023 15:37:14 -0500
Subject: [PATCH 4/4] add base pose to playground

---
 .../blocks/src/lib/navigation-map/components/draw-tool.svelte   | 2 +-
 packages/blocks/src/routes/+page.svelte                         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte b/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
index 5af13b19..4d38c4d5 100644
--- a/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
+++ b/packages/blocks/src/lib/navigation-map/components/draw-tool.svelte
@@ -3,7 +3,7 @@
   Renders an in-progress rectangle that represents a drawn area by the user.
 -->
 <script lang="ts">
-import * as THREE from 'three';
+import type * as THREE from 'three';
 import { T, createRawEventDispatcher } from '@threlte/core';
 import { useMapLibreEvent, useMapLibre } from '$lib';
 import {
diff --git a/packages/blocks/src/routes/+page.svelte b/packages/blocks/src/routes/+page.svelte
index dc34c216..e4f90e2a 100644
--- a/packages/blocks/src/routes/+page.svelte
+++ b/packages/blocks/src/routes/+page.svelte
@@ -16,6 +16,7 @@ const fetchPointcloud = async () => {
     <div class="relative aspect-video w-full border border-gray-200">
       {#await fetchPointcloud() then pointcloud}
         <SlamMap2D
+          basePose={{ x: 1, y: 2, theta: 45 }}
           {pointcloud}
           {motionPath}
           on:click={(event) => console.log(event.detail)}