Three.js related dependency upgrade

packages/blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "publishConfig": {
     "access": "public"
   },
@@ -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",

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]} />

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>

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}

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}
 />
 

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>

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}

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 />