WIP

app/src/lib/sidebar/panels/ExportSettings.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Group } from "three";
+  import type { OBJExporter } from "three/addons/exporters/OBJExporter.js";
+  import type { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
+  import FileSaver from "file-saver";
+
+  // Download
+  const download = (
+    data: ArrayBuffer | string,
+    name: string,
+    mimetype: string,
+    extension: string,
+  ) => {
+    const blob = new Blob([data], { type: mimetype + ";charset=utf-8" });
+    FileSaver.saveAs(blob, name + "." + extension);
+  };
+
+  export let scene: Group;
+
+  let gltfExporter: GLTFExporter;
+  async function exportGltf() {
+    const exporter =
+      gltfExporter ||
+      (await import("three/addons/exporters/GLTFExporter.js").then((m) => {
+        gltfExporter = new m.GLTFExporter();
+        return gltfExporter;
+      }));
+
+    exporter.parse(
+      scene,
+      (gltf) => {
+        // download .gltf file
+        download(gltf as ArrayBuffer, "plant", "text/plain", "gltf");
+      },
+      (err) => {
+        console.log(err);
+      },
+    );
+  }
+
+  let objExporter: OBJExporter;
+
+  async function exportObj() {
+    const exporter =
+      objExporter ||
+      (await import("three/addons/exporters/OBJExporter.js").then((m) => {
+        objExporter = new m.OBJExporter();
+        return objExporter;
+      }));
+    const result = exporter.parse(scene);
+    // download .obj file
+    download(result, "plant", "text/plain", "obj");
+  }
+</script>
+
+<div class="p-2">
+  <button on:click={exportObj}> export obj </button>
+  <button on:click={exportGltf}> export gltf </button>
+</div>