store/load

1 files changed, 51 insertions, 3 deletions

diff --git a/src/index.js b/src/index.js
index dc17205..d86d8ea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import Leap from 'leapjs';
 import * as T from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { saveAs } from 'file-saver';
 
 const clamp = (val, min=0, max=1) => Math.min(max, Math.max(min, val));
 const lerp = (a, b, t) => a.plus(b.minus(a).times(t));
@@ -15,6 +16,9 @@ const canvas = $('main');
 const scene = new T.Scene();
 scene.background = new T.Color().setHSL(0.7, .95, .93);
 
+const grid = new T.GridHelper(250, 10);
+scene.add(grid);
+
 const hemiLight = new T.HemisphereLight(0xffffff, 0xffffff, 0.6);
 hemiLight.color.setHSL(0.6, 1, 0.6);
 hemiLight.groundColor.setHSL(0.095, 1, 0.75);
@@ -28,7 +32,7 @@ dirLight.position.multiplyScalar(30);
 scene.add(dirLight);
 
 const camera = new T.PerspectiveCamera(75, 1, 0.1, 1000);
-camera.position.set(80, 100, 200);
+camera.position.set(-30, 400, 80);
 const controls = new OrbitControls(camera, canvas);
 // const context = canvas.getContext('webgl2', { alpha: false });
 const renderer = new T.WebGLRenderer({ canvas }); // , context });
@@ -77,7 +81,6 @@ class Finger extends T.Group {
         dip: finger.dipPosition,
         pip: finger.pipPosition,
       });
-      console.log(this.dataPoints.length);
     }
 
     this.tip.position.set(...finger.tipPosition);
@@ -86,6 +89,28 @@ class Finger extends T.Group {
     this.lineGeometry.vertices[2].set(...finger.pipPosition);
     this.lineGeometry.verticesNeedUpdate = true;
   }
+
+  clear() {
+    this.dataPoints = [];
+    for (let i = 0; i < Finger.MAX_TRACK; i++) {
+      this.trackers.setMatrixAt(i, new T.Matrix4());
+    }
+
+    this.trackers.instanceMatrix.needsUpdate = true;
+  }
+
+  store() {
+    return this.dataPoints;
+  }
+
+  load(dataPoints) {
+    for (const dp of dataPoints) {
+      this.trackers.setMatrixAt(this.dataPoints.length % Finger.MAX_TRACK, new T.Matrix4().makeTranslation(...dp.tip));
+      this.dataPoints.push(dp);
+    }
+
+    this.trackers.instanceMatrix.needsUpdate = true;
+  }
 }
 
 const material = new T.MeshLambertMaterial();
@@ -103,6 +128,30 @@ const fingers = [0,1,2,3,4].map(i => {
 window.F = fingers;
 
 window.onkeydown = (e) => {
+  if (e.key === 'r') {
+    e.preventDefault();
+    fingers.forEach(finger => finger.clear());
+    return;
+  } else if (e.key === 's') {
+    e.preventDefault();
+    const data = fingers.map(finger => finger.store());
+    saveAs(new Blob([JSON.stringify(data)]), 'text/json');
+  } else if (e.key === 'l') {
+    e.preventDefault();
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.click();
+
+    input.onchange = e => {
+      const reader = new FileReader();
+      reader.onload = e => {
+        const data = JSON.parse(e.target.result);
+        data.forEach((data, i) => fingers[i].load(data));
+      }
+      reader.readAsText(e.target.files[0]);
+    }
+  }
+
   const i = +e.key;
 
   if (i > -1 && i < 6) {
@@ -112,7 +161,6 @@ window.onkeydown = (e) => {
 }
 
 window.onkeyup = (e) => {
-  e.preventDefault();
   const i = +e.key;
 
   if (i > -1 && i < 6) {