Add ratchet turning, this removes the need for rig-selctor for now.

public/index.html

@@ -24,53 +24,37 @@
       <script id="hand-template" type="text/html">
         <a-box class="hand" scale="0.2 0.1 0.3"></a-box>
       </script>
-
-      <script id="vive-rig" type="text/html">
-        <a-entity id="player-rig" networked wasd-controls>
-          <a-entity id="head" camera="userHeight: 1.6" look-controls networked="template:#head-template;showLocalTemplate:false;"></a-entity>
-
-          <a-entity id="left-hand" vive-controls="hand: left" teleport-controls="cameraRig: #player-rig" networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
-          <a-entity id="right-hand" vive-controls="hand: right" teleport-controls="cameraRig: #player-rig" networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
-        </a-entity>
-      </script>
-
-      <script id="oculus-rig" type="text/html">
-        <a-entity id="player-rig" networked wasd-controls>
-          <a-entity id="head" camera="userHeight: 1.6" look-controls networked="template:#head-template;showLocalTemplate:false;"></a-entity>
-
-          <a-entity oculus-touch-controls="left" teleport-controls="cameraRig:#player-rig;button:trigger;" networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
-          <a-entity oculus-touch-controls="right" teleport-controls="cameraRig:#player-rig;button:trigger;" networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
-        </a-entity>
-      </script>
-
-      <script id="daydream-rig" type="text/html">
-        <a-entity id="player-rig" networked wasd-controls>
-          <a-entity id="head" camera="userHeight: 1.6" look-controls networked="template:#head-template;showLocalTemplate:false;"></a-entity>
-
-          <a-entity daydream-controls networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
-        </a-entity>
-      </script>
-
-      <script id="gearvr-rig" type="text/html">
-        <a-entity id="player-rig" networked wasd-controls>
-          <a-entity id="head" camera="userHeight: 1.6" look-controls networked="template:#head-template;showLocalTemplate:false;"></a-entity>
-
-          <a-entity gearvr-controls networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
-        </a-entity>
-      </script>
-
-      <script id="dolly-rig" type="text/html">
-        <a-entity id="player-rig" networked wasd-controls>
-          <a-entity id="head" camera="userHeight: 1.6" look-controls networked="template:#head-template;showLocalTemplate:false;"></a-entity>
-        </a-entity>
-      </script>
     </a-assets>
 
-    <a-entity rig-selector="vive:#vive-rig;oculus:oculus-rig;daydream:#daydream-rig;desktop:#dolly-rig;mobile:dolly-rig;"></a-entity>
+    <a-entity id="player-rig" networked wasd-controls snap-rotation="leftEventSrc: #right-hand; rightEventSrc: #right-hand">
+        <a-entity
+            id="head"
+            camera="userHeight: 1.6"
+            look-controls
+            networked="template:#head-template;showLocalTemplate:false;"></a-entity>
+
+        <a-entity
+            id="left-hand"
+            vive-controls="hand: left"
+            oculus-touch-controls="left"
+            axis-dpad="centerZone: 1"
+            teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+            networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
+
+        <a-entity
+            id="right-hand"
+            vive-controls="hand: right"
+            oculus-touch-controls="right"
+            daydream-controls
+            gearvr-controls
+            axis-dpad
+            teleport-controls="cameraRig: #player-rig; button: dpadcenter"
+            networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
+    </a-entity>
 
     <a-entity id="ground" position="0 0 0"
-        geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0"
-        material="shader: flat; src: #grid; repeat: 10000 10000;"></a-entity>
+        geometry="primitive: plane; width: 100; height: 100;" rotation="-90 0 0"
+        material="shader: flat; src: #grid; repeat: 100 100;"></a-entity>
     <a-sky src="#sky" rotation="0 -90 0"></a-sky>
   </a-scene>
 </body>

src/components/axis-dpad.js

+/**
+ * @fileOverview
+ * Treats a pair of axes and a button as a dpad
+ * This is useful for Vive trackpad and Oculus Touch thumbstick
+ *
+ * @name axis-dpad.js
+ * @TODO allow use of thumbstick without press
+ * @TODO make axes configurable
+ */
+
+const angleToDirection = function(angle) {
+  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  if (angle > 0 && angle < 90) {
+    return "down";
+  } else if (angle >= 90 && angle < 180) {
+    return "left";
+  } else if (angle >= 180 && angle < 270) {
+    return "up";
+  } else {
+    return "right";
+  }
+};
+
+AFRAME.registerComponent("axis-dpad", {
+  schema: {
+    centerZone: { default: 0.5 },
+    moveEvents: { default: ["axismove"] },
+    downEvents: { default: ["trackpaddown", "thumbstickdown"] },
+    upEvents: { default: ["trackpadup", "thumbstickup"] }
+  },
+
+  init: function() {
+    this.onAxisMove = this.onAxisMove.bind(this);
+    this.onButtonPressed = this.onButtonPressed.bind(this);
+    this.lastPos = [0, 0];
+  },
+
+  play: function() {
+    const { moveEvents, downEvents, upEvents } = this.data;
+    moveEvents.forEach(moveEvent => {
+      this.el.addEventListener(moveEvent, this.onAxisMove);
+    });
+    downEvents.concat(upEvents).forEach(eventName => {
+      this.el.addEventListener(eventName, this.onButtonPressed);
+    });
+  },
+
+  pause: function() {
+    const { moveEvents, downEvents, upEvents } = this.data;
+    moveEvents.forEach(moveEvent => {
+      this.el.removeEventListener(moveEvent, this.onAxisMove);
+    });
+    downEvents.concat(upEvents).forEach(eventName => {
+      this.el.removeEventListener(eventName, this.onButtonPressed);
+    });
+  },
+
+  onAxisMove: function(e) {
+    this.lastPos = e.detail.axis;
+  },
+
+  onButtonPressed: function(e) {
+    const [x, y] = this.lastPos;
+    const { upEvents, centerZone } = this.data;
+    const state = upEvents.includes(e.type) ? "up" : "down";
+    const direction =
+      state === "up" && this.lastDirection // Always trigger the up event for the last down event
+        ? this.lastDirection
+        : x * x + y * y < centerZone * centerZone // If within center zone angle does not matter
+          ? "center"
+          : angleToDirection(Math.atan2(x, y));
+
+    this.el.emit(`dpad${direction}${state}`);
+
+    if (state === "down") {
+      this.lastDirection = direction;
+    } else {
+      delete this.lastDirection;
+    }
+  }
+});

src/components/snap-rotation.js

+/**
+ * @fileOverview
+ * Rotate an entity in fixed increments based on events or keyboard input
+ * @name snap-rotation.js
+ * @TODO pull keyboard input out into a component that just emits events
+ * @TODO allow specifying multiple events and sources
+ */
+
+AFRAME.registerComponent("snap-rotation", {
+  schema: {
+    rotationAxis: { type: "vec3", default: { x: 0, y: 1, z: 0 } },
+    rotationDegres: { default: 45 },
+
+    leftKey: { default: "q" },
+    leftEvent: { default: "dpadleftdown" },
+    leftEventSrc: { type: "selector" },
+
+    rightKey: { default: "e" },
+    rightEvent: { default: "dpadrightdown" },
+    rightEventSrc: { type: "selector" }
+  },
+
+  init: function() {
+    this.onButtonPressed = this.onButtonPressed.bind(this);
+  },
+
+  play: function() {
+    const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
+    window.addEventListener("keypress", this.onButtonPressed);
+    rightEventSrc &&
+      rightEventSrc.addEventListener(rightEvent, this.onButtonPressed);
+    leftEventSrc &&
+      leftEventSrc.addEventListener(leftEvent, this.onButtonPressed);
+  },
+
+  pause: function() {
+    const { leftEventSrc, leftEvent, rightEventSrc, rightEvent } = this.data;
+    window.removeEventListener("keypress", this.onButtonPRessed);
+    rightEventSrc &&
+      rightEventSrc.removeEventListener(rightEvent, this.onButtonPressed);
+    leftEventSrc &&
+      leftEventSrc.removeEventListener(leftEvent, this.onButtonPressed);
+  },
+
+  onButtonPressed: function(e) {
+    const {
+      rotationAxis,
+      rotationDegres,
+      leftKey,
+      leftEvent,
+      rightKey,
+      rightEvent
+    } = this.data;
+    const obj = this.el.object3D;
+
+    if (e.type === leftEvent || (leftKey && e.key === leftKey)) {
+      obj.rotateOnAxis(rotationAxis, rotationDegres * THREE.Math.DEG2RAD);
+    } else if (e.type === rightEvent || (rightKey && e.key === rightKey)) {
+      obj.rotateOnAxis(rotationAxis, -rotationDegres * THREE.Math.DEG2RAD);
+    }
+  }
+});

src/index.js

 require("networked-aframe");
-require("./components/rig-selector");
-require('aframe-teleport-controls');
+require("aframe-teleport-controls");
+
+// require("./components/rig-selector");
+require("./components/axis-dpad");
+require("./components/snap-rotation");