feat: save camera location to localStorage

app/src/lib/result-viewer/Scene.svelte

@@ -1,13 +1,34 @@
 <script lang="ts">
   import { T } from "@threlte/core";
   import { MeshLineGeometry, MeshLineMaterial, Text } from "@threlte/extras";
-  import type { BufferGeometry, Vector3 } from "three";
+  import type { BufferGeometry, PerspectiveCamera, Vector3 } from "three";
+  import type { OrbitControls as OrbitControlsType } from "three/addons/controls/OrbitControls.js";
   import { OrbitControls } from "@threlte/extras";
   import { AppSettings } from "../settings/app-settings";
+  import localStore from "$lib/helpers/localStore";
+  import { onMount } from "svelte";
 
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];
-  $: console.log({ geometries, lines });
+
+  let camera: PerspectiveCamera;
+  let controls: OrbitControlsType;
+
+  const cameraTransform = localStore<{ camera: number[]; target: number[] }>(
+    "nodes.camera.transform",
+    {
+      camera: [0, 0, 10],
+      target: [0, 0, 0],
+    },
+  );
+
+  function saveCameraState() {
+    if (!camera) return;
+    $cameraTransform = {
+      camera: camera.position.toArray(),
+      target: controls.target.toArray(),
+    };
+  }
 
   function getPosition(geo: BufferGeometry, i: number) {
     const pos = [
@@ -23,8 +44,17 @@
   <T.GridHelper args={[20, 20]} />
 {/if}
 
-<T.PerspectiveCamera position={[-10, 10, 10]} makeDefault fov={50}>
+<T.PerspectiveCamera
-  <OrbitControls />
+  bind:ref={camera}
+  position={$cameraTransform.camera}
+  makeDefault
+  fov={50}
+>
+  <OrbitControls
+    bind:ref={controls}
+    on:change={saveCameraState}
+    target={$cameraTransform.target}
+  />
 </T.PerspectiveCamera>
 
 <T.DirectionalLight position={[0, 10, 10]} />
@@ -37,7 +67,9 @@
         <Text text={i / 3} fontSize={0.25} position={getPosition(geo, i)} />
       {/if}
     {/each}
+  {/if}
 
+  {#if $AppSettings.showVertices}
     <T.Points visible={true}>
       <T is={geo} />
       <T.PointsMaterial size={0.25} />
@@ -54,7 +86,7 @@
 
 {#if $AppSettings.showStemLines && lines}
   {#each lines as line}
-    <T.Mesh scale={2}>
+    <T.Mesh>
       <MeshLineGeometry points={line} />
       <MeshLineMaterial width={0.1} color="red" depthTest={false} />
     </T.Mesh>

app/src/lib/settings/app-settings.ts

@@ -58,6 +58,11 @@ export const AppSettingTypes = {
       label: "Show Indices",
       value: false,
     },
+    showVertices: {
+      type: "boolean",
+      label: "Show Vertices",
+      value: false,
+    },
     showStemLines: {
       type: "boolean",
       label: "Show Stem Lines",