individual tracking

1 files changed, 80 insertions, 47 deletions

diff --git a/src/index.js b/src/index.js
index 45fa7e7..dc17205 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,4 @@
 import Leap from 'leapjs';
-import LeapDataPlotter from 'leapjs-plugins/utils/data-plotter/LeapDataPlotter.js';
 import * as T from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 
@@ -11,9 +10,6 @@ const max = (...vecs) => vecs.reduce((last, next) => last.map((v, i) => Math.max
 
 const $ = x => document.getElementById(x);
 
-const posplot = new LeapDataPlotter({ el: $('graphs_a') });
-const velplot = new LeapDataPlotter({ el: $('graphs_b') });
-
 const canvas = $('main');
 
 const scene = new T.Scene();
@@ -34,7 +30,8 @@ scene.add(dirLight);
 const camera = new T.PerspectiveCamera(75, 1, 0.1, 1000);
 camera.position.set(80, 100, 200);
 const controls = new OrbitControls(camera, canvas);
-const renderer = new T.WebGLRenderer({ canvas });
+// const context = canvas.getContext('webgl2', { alpha: false });
+const renderer = new T.WebGLRenderer({ canvas }); // , context });
 
 window.onresize = () => {
   renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
@@ -44,24 +41,85 @@ window.onresize = () => {
 };
 window.onresize();
 
-const sphere = new T.SphereBufferGeometry(4, 16, 17);
-const material = new T.MeshLambertMaterial({ color: new T.Color().setHSL(.2, .8, .6) });
+class Finger extends T.Group {
+  static tipGeom = new T.SphereBufferGeometry(4, 16, 16);
+  static trackGeom = new T.SphereBufferGeometry(2, 4, 4);
+  static MAX_TRACK = 1 << 10;
+
+  constructor(hue) {
+    super();
+
+    const color = new T.Color().setHSL(hue || Math.random(), .8, .6);
+    const meshMaterial = new T.MeshLambertMaterial({ color });
+    const lineMaterial = new T.LineBasicMaterial({ color, linewidth: 2 });
+
+    this.tip = new T.Mesh(Finger.tipGeom, meshMaterial);
+    this.add(this.tip);
+
+    this.lineGeometry = new T.Geometry();
+    this.lineGeometry.vertices.push(new T.Vector3(), new T.Vector3(), new T.Vector3());
+    this.skeleton = new T.Line(this.lineGeometry, lineMaterial);
+    this.add(this.skeleton);
+
+    this.trackers = new T.InstancedMesh(Finger.trackGeom.clone(), meshMaterial.clone(), Finger.MAX_TRACK);
+    this.add(this.trackers);
+
+    this.dataPoints = [];
+    this.track = false;
+  }
+
+  update(finger) {
+    if (this.track) {
+      this.trackers.setMatrixAt(this.dataPoints.length % Finger.MAX_TRACK, new T.Matrix4().makeTranslation(...finger.tipPosition));
+      this.trackers.instanceMatrix.needsUpdate = true;
+      this.dataPoints.push({
+        tip: finger.tipPosition,
+        dip: finger.dipPosition,
+        pip: finger.pipPosition,
+      });
+      console.log(this.dataPoints.length);
+    }
+
+    this.tip.position.set(...finger.tipPosition);
+    this.lineGeometry.vertices[0].set(...finger.tipPosition);
+    this.lineGeometry.vertices[1].set(...finger.dipPosition);
+    this.lineGeometry.vertices[2].set(...finger.pipPosition);
+    this.lineGeometry.verticesNeedUpdate = true;
+  }
+}
+
+const material = new T.MeshLambertMaterial();
 const cube = new T.BoxBufferGeometry(89, 13, 30);
 scene.add(new T.Mesh(cube, material));
 
-const fingerLines = new T.Geometry();
-const fingers = new Array(5).fill(null).map(() => {
-  const mesh = new T.Mesh(sphere, material);
-  fingerLines.vertices.push(new T.Vector3(), new T.Vector3(), new T.Vector3(), new T.Vector3(), new T.Vector3(), new T.Vector3());
-  scene.add(mesh);
-  return mesh;
+const palm = new T.Mesh(new T.BoxBufferGeometry(8, 2, 8), material);
+scene.add(palm);
+
+const fingers = [0,1,2,3,4].map(i => {
+  const finger = new Finger(i / 5);
+  scene.add(finger);
+  return finger;
 });
-scene.add(new T.LineSegments(fingerLines));
+window.F = fingers;
 
-const palm = new T.Mesh(sphere, material);
-scene.add(palm);
-palm.scale.x = 4;
-palm.scale.z = 2;
+window.onkeydown = (e) => {
+  const i = +e.key;
+
+  if (i > -1 && i < 6) {
+    e.preventDefault();
+    fingers[i % 5].track = true;
+  }
+}
+
+window.onkeyup = (e) => {
+  e.preventDefault();
+  const i = +e.key;
+
+  if (i > -1 && i < 6) {
+    e.preventDefault();
+    fingers[i % 5].track = false;
+  }
+}
 
 const update = (frame) => {
   const hand = frame.hands[0];
@@ -73,44 +131,19 @@ const update = (frame) => {
 
   for (var finger of hand.fingers) {
     const i = finger.type;
-    const ii = finger.type * 4;
-    fingers[i].position.set(...finger.tipPosition);
-    fingerLines.vertices[ii+0].set(...finger.tipPosition);
-    fingerLines.vertices[ii+1].set(...finger.dipPosition);
-    fingerLines.vertices[ii+2].set(...finger.dipPosition);
-    fingerLines.vertices[ii+3].set(...finger.pipPosition);
+    fingers[i].update(finger);
   }
-
-  fingerLines.verticesNeedUpdate = true;
 }
 
 const controller = Leap.loop({
-  frameEventName: 'animationFrame', // 'deviceFrame',
+  frameEventName: 'animationFrame',
+  // frameEventName: 'deviceFrame',
   // optimizeHMD: true,
   background: true,
 }, frame => {
-  let pos = new T.Vector3(0, 400, 0);
-  let vel = new T.Vector3();
-
   update(frame);
 
-  const finger = frame.fingers.find(finger => finger.type == 2);
-  if (finger) {
-    pos = new T.Vector3(...finger.tipPosition);
-    vel = new T.Vector3(...finger.tipVelocity);
-  }
-
-
-  posplot.plot('x', pos.x);
-  posplot.plot('y', pos.y);
-  posplot.plot('z', pos.z);
-  posplot.update();
-
-  velplot.plot('x', vel.x);
-  velplot.plot('y', vel.y);
-  velplot.plot('z', vel.z);
-  velplot.update();
-
   controls.update();
   renderer.render(scene, camera);
 });
+