initial commit

2 files changed, 158 insertions, 0 deletions

diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..45fa7e7
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,116 @@
+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';
+
+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));
+const abs = vec => vec.map(Math.abs.bind(Math));
+const min = (...vecs) => vecs.reduce((last, next) => last.map((v, i) => Math.min(v, next[i])));
+const max = (...vecs) => vecs.reduce((last, next) => last.map((v, i) => Math.max(v, next[i])));
+
+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();
+scene.background = new T.Color().setHSL(0.7, .95, .93);
+
+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);
+hemiLight.position.set(0, 50, 0);
+scene.add(hemiLight);
+
+const dirLight = new T.DirectionalLight(0xffffff, 0.8);
+dirLight.color.setHSL(0.1, 1, 0.95);
+dirLight.position.set(-1, 1.75, 1);
+dirLight.position.multiplyScalar(30);
+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 });
+
+window.onresize = () => {
+  renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
+  camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
+  camera.updateProjectionMatrix();
+  controls.update();
+};
+window.onresize();
+
+const sphere = new T.SphereBufferGeometry(4, 16, 17);
+const material = new T.MeshLambertMaterial({ color: new T.Color().setHSL(.2, .8, .6) });
+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;
+});
+scene.add(new T.LineSegments(fingerLines));
+
+const palm = new T.Mesh(sphere, material);
+scene.add(palm);
+palm.scale.x = 4;
+palm.scale.z = 2;
+
+const update = (frame) => {
+  const hand = frame.hands[0];
+  if (!hand)
+    return;
+
+  palm.position.set(...hand.palmPosition);
+  palm.quaternion.setFromUnitVectors(new T.Vector3(0, -1, 0), new T.Vector3(...hand.palmNormal));
+
+  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);
+  }
+
+  fingerLines.verticesNeedUpdate = true;
+}
+
+const controller = Leap.loop({
+  frameEventName: 'animationFrame', // '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);
+});
diff --git a/src/template.html b/src/template.html
new file mode 100644
index 0000000..f071025
--- /dev/null
+++ b/src/template.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <style>
+    body {
+      display: flex;
+      margin: 0;
+      padding: 0;
+
+      width: 100vw;
+      height: 100vh;
+
+      flex-direction: column;
+    }
+
+    header {
+      display: flex;
+
+      justify-content: space-between;
+
+      height: 150px;
+      flex: 0 0 auto;
+    }
+
+    #main {
+      flex: 1 1 0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <canvas id="graphs_a"></canvas>
+    <canvas id="graphs_b"></canvas>
+    <div id="controls"></div>
+  </header>
+  <canvas id="main"></canvas>
+</body>
+</html>