1 files changed, 37 insertions, 0 deletions
diff --git a/public/js/components/hand-tilt.js b/public/js/components/hand-tilt.js
new file mode 100644
index 0000000..d874fc8
--- /dev/null
+++ b/public/js/components/hand-tilt.js
@@ -0,0 +1,37 @@
+/* global AFRAME, THREE */
+// Tips a tracked hand down about its fist. The controller's grip pose points
+// noticeably upward, so hands, whatever they hold, and the hands everyone else
+// sees all angle up. Turning the pose itself, right after it's read from the
+// headset, carries the change to all of them; where the hand is stays put.
+(function () {
+  const X = new THREE.Vector3(1, 0, 0);
+
+  AFRAME.registerComponent('hand-tilt', {
+    schema: {
+      degrees: { default: -30 },  // negative tips the fingers down
+    },
+
+    init() {
+      this.tilt = new THREE.Quaternion();
+      this.update();
+    },
+
+    update() {
+      this.tilt.setFromAxisAngle(X, THREE.MathUtils.degToRad(this.data.degrees));
+    },
+
+    // tracked-controls arrives when a controller connects (and again if it's
+    // swapped), so wrap whichever one is there.
+    tick() {
+      const tracked = this.el.components['tracked-controls'];
+      if (!tracked || tracked.tiltedBy === this) return;
+      const updatePose = tracked.updatePose;
+      const tilt = this.tilt;
+      tracked.updatePose = function () {
+        updatePose.call(this);
+        if (this.pose) this.el.object3D.quaternion.multiply(tilt);
+      };
+      tracked.tiltedBy = this;
+    },
+  });
+})();