feat: implement performance view

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { T } from "@threlte/core";
+  import { T, useTask } from "@threlte/core";
   import {
     MeshLineGeometry,
     MeshLineMaterial,
@@ -7,9 +7,12 @@
     useTexture,
   } from "@threlte/extras";
   import {
+    type Group,
     type BufferGeometry,
     type PerspectiveCamera,
-    type Vector3,
+    Vector3,
+    type Vector3Tuple,
+    Box3,
   } from "three";
   import type { OrbitControls as OrbitControlsType } from "three/addons/controls/OrbitControls.js";
   import { OrbitControls } from "@threlte/extras";
@@ -18,19 +21,21 @@
 
   export let geometries: BufferGeometry[];
   export let lines: Vector3[][];
+  let geos: Group;
 
-  export let camera: PerspectiveCamera;
-  export let controls: OrbitControlsType;
+  let camera: PerspectiveCamera;
+  let controls: OrbitControlsType;
+  export let centerCamera: boolean = true;
 
   const matcap = useTexture("/matcap_green.jpg");
 
-  const cameraTransform = localStore<{ camera: number[]; target: number[] }>(
-    "nodes.camera.transform",
-    {
-      camera: [0, 0, 10],
-      target: [0, 0, 0],
-    },
-  );
+  const cameraTransform = localStore<{
+    camera: Vector3Tuple;
+    target: Vector3Tuple;
+  }>("nodes.camera.transform", {
+    camera: [0, 0, 10],
+    target: [0, 0, 0],
+  });
 
   function saveCameraState() {
     if (!camera) return;
@@ -41,12 +46,49 @@
   }
 
   function getPosition(geo: BufferGeometry, i: number) {
-    const pos = [
+    return [
       geo.attributes.position.array[i],
       geo.attributes.position.array[i + 1],
       geo.attributes.position.array[i + 2],
-    ];
-    return pos;
+    ] as Vector3Tuple;
+  }
+
+  let cameraTarget: Vector3;
+  let duration = 0;
+  let totalDuration = 5;
+  const { start, stop, started } = useTask((delta) => {
+    duration += delta;
+    if (!cameraTarget) {
+      stop();
+      return;
+    }
+    // This function will be executed on every frame
+    if (duration >= totalDuration) {
+      controls.target.copy(cameraTarget);
+      stop();
+      controls.update();
+    } else {
+      const t = duration / totalDuration;
+      controls.target.lerp(cameraTarget, t);
+      controls.update();
+    }
+  });
+  stop();
+
+  $: if (geometries && geos && centerCamera) {
+    const aabb = new Box3();
+    aabb.setFromObject(geos);
+    const newCenter = aabb.getCenter(new Vector3());
+    if (
+      newCenter &&
+      newCenter.x !== 0 &&
+      newCenter.y !== 0 &&
+      newCenter.z !== 0
+    ) {
+      cameraTarget = newCenter;
+      duration = 0;
+      start();
+    }
   }
 </script>
 
@@ -70,30 +112,32 @@
 <T.DirectionalLight position={[0, 10, 10]} />
 <T.AmbientLight intensity={2} />
 
-{#each geometries as geo}
-  {#if $AppSettings.showIndices}
-    {#each geo.attributes.position.array as _, i}
-      {#if i % 3 === 0}
-        <Text text={i / 3} fontSize={0.25} position={getPosition(geo, i)} />
-      {/if}
-    {/each}
-  {/if}
+<T.Group bind:ref={geos}>
+  {#each geometries as geo}
+    {#if $AppSettings.showIndices}
+      {#each geo.attributes.position.array as _, i}
+        {#if i % 3 === 0}
+          <Text 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} />
-    </T.Points>
-  {/if}
-  {#await matcap then value}
-    <T.Mesh geometry={geo}>
-      <T.MeshMatcapMaterial matcap={value} wireframe={$AppSettings.wireframe} />
-      {#if false}
-        <T.MeshStandardMaterial color="green" depthTest={true} />
-      {/if}
-    </T.Mesh>
-  {/await}
-{/each}
+    {#if $AppSettings.showVertices}
+      <T.Points visible={true}>
+        <T is={geo} />
+        <T.PointsMaterial size={0.25} />
+      </T.Points>
+    {/if}
+    {#await matcap then value}
+      <T.Mesh geometry={geo}>
+        <T.MeshMatcapMaterial
+          matcap={value}
+          wireframe={$AppSettings.wireframe}
+        />
+      </T.Mesh>
+    {/await}
+  {/each}
+</T.Group>
 
 {#if $AppSettings.showStemLines && lines}
   {#each lines as line}