feat: add box node

app/src/lib/viewer/Scene.svelte

@@ -1,18 +1,38 @@
 <script lang="ts">
   import { T } from "@threlte/core";
+  import { Text } from "@threlte/extras";
   import type { BufferGeometry } from "three";
   import { OrbitControls } from "@threlte/extras";
 
   export let geometry: BufferGeometry[];
+
+  function getPosition(geo: BufferGeometry, i: number) {
+    const pos = [
+      geo.attributes.position.array[i],
+      geo.attributes.position.array[i + 1],
+      geo.attributes.position.array[i + 2],
+    ];
+    return pos;
+  }
 </script>
 
-<T.PerspectiveCamera position={[10, 10, 10]} makeDefault fov={50}>
+<T.PerspectiveCamera position={[-10, 10, 10]} makeDefault fov={50}>
   <OrbitControls />
 </T.PerspectiveCamera>
 
 <T.DirectionalLight position={[0, 10, 10]} />
 
 {#each geometry as geo}
+  {#each geo.attributes.position.array as attr, i}
+    {#if i % 3 === 0}
+      <Text text={i / 3} fontSize={1} position={getPosition(geo, i)} />
+    {/if}
+  {/each}
+
+  <T.Points visible={true}>
+    <T is={geo} />
+    <T.PointsMaterial size={0.25} />
+  </T.Points>
   <T.Mesh geometry={geo}>
     <T.MeshBasicMaterial color="red" />
   </T.Mesh>

app/src/lib/viewer/Viewer.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import { Canvas } from "@threlte/core";
   import Scene from "./Scene.svelte";
-  import { BufferGeometry, Float32BufferAttribute } from "three";
+  import {
+    BufferAttribute,
+    BufferGeometry,
+    Float32BufferAttribute,
+  } from "three";
   import { decodeFloat } from "$lib/helpers/encode";
 
   export let result: Int32Array;
@@ -20,33 +24,28 @@
     const faceCount = encodedData[index++];
 
     // Indices
-    const indices: number[] = [];
-    for (let i = 0; i < faceCount * 3; i++) {
-      indices.push(encodedData[index++]);
-    }
+    const indices = encodedData.subarray(index, index + faceCount * 3);
+    index = index + faceCount * 3;
 
-    // Face normals (although typically there would be one normal per vertex)
-    const normals: number[] = [];
-    for (let i = 0; i < faceCount; i++) {
-      const x = decodeFloat(encodedData[index++]);
-      const y = decodeFloat(encodedData[index++]);
-      const z = decodeFloat(encodedData[index++]);
-      normals.push(x, y, z);
-    }
+    const normals = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      faceCount * 3,
+    );
+    index = index + faceCount * 3;
 
     // Vertices
-    const vertices: number[] = [];
-    for (let i = 0; i < vertexCount; i++) {
-      const x = decodeFloat(encodedData[index++]);
-      const y = decodeFloat(encodedData[index++]);
-      const z = decodeFloat(encodedData[index++]);
-      vertices.push(x, y, z);
-    }
+    const vertices = new Float32Array(
+      encodedData.buffer,
+      index * 4,
+      vertexCount * 3,
+    );
 
     // Add data to geometry
-    geometry.setIndex(indices);
+    geometry.setIndex([...indices]);
     geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
-    geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    // geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+    geometry.computeVertexNormals();
 
     return geometry;
   }
@@ -97,8 +96,6 @@
   $: if (result) {
     const inputs = parse_args(result);
 
-    console.log({ inputs });
-
     for (let input of inputs) {
       if (input[0] === 1) {
         const geo = createGeometryFromEncodedData(input);