fix / simplify event handling such that oculus quest thumb stick forw…

…ard triggers teleport
fernandojsg · Jan 12, 2020 · 671fc34 · 671fc34
1 parent d5ed392
commit 671fc34
Show file tree

Hide file tree

Showing 8 changed files with 1,688 additions and 1,695 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ examples/build.js
 gh-pages
 node_modules/
 npm-debug.log
+cert.crt
+key.key
diff --git a/dist/aframe-teleport-controls.js b/dist/aframe-teleport-controls.js
@@ -89,7 +89,7 @@
 	    curveMissColor: {type: 'color', default: '#ff0000'},
 	    curveShootingSpeed: {default: 5, min: 0, if: {type: ['parabolic']}},
 	    defaultPlaneSize: { default: 100 },
-	    landingNormal: {type: 'vec3', default: '0 1 0'},
+	    landingNormal: {type: 'vec3', default: { x: 0, y: 1, z: 0 }},
 	    landingMaxAngle: {default: '45', min: 0, max: 360},
 	    drawIncrementally: {default: false},
 	    incrementalDrawMs: {default: 700},
@@ -132,19 +132,7 @@
 
 	    this.onButtonDown = this.onButtonDown.bind(this);
 	    this.onButtonUp = this.onButtonUp.bind(this);
-	    if (this.data.startEvents.length && this.data.endEvents.length) {
-
-	      for (i = 0; i < this.data.startEvents.length; i++) {
-	        el.addEventListener(this.data.startEvents[i], this.onButtonDown);
-	      }
-	      for (i = 0; i < this.data.endEvents.length; i++) {
-	        el.addEventListener(this.data.endEvents[i], this.onButtonUp);
-	      }
-	    } else {
-	      el.addEventListener(data.button + 'down', this.onButtonDown);
-	      el.addEventListener(data.button + 'up', this.onButtonUp);
-	    }
-
+	    el.addEventListener('axismove', this.handleAxis.bind(this))
 	    this.queryCollisionEntities();
 	  },
 
@@ -287,6 +275,16 @@
 	    };
 	  })(),
 
+	  handleAxis: function (evt) {
+	    const axisX = parseInt(evt.detail.axis[2] * 10)
+	    const axisY = parseInt(evt.detail.axis[3] * 10)
+	    if (axisX === 0 && axisY === 0) {
+	      this.onButtonUp(evt)
+	    } else if (Math.abs(axisX) <= 1 && axisY === -9) {
+	      this.onButtonDown(evt)
+	    }
+	  },
+
 	  /**
 	   * Run `querySelectorAll` for `collisionEntities` and maintain it with `child-attached`
 	   * and `child-detached` events.
@@ -502,7 +500,7 @@
 	  var geometry;
 	  var material;
 
-	  geometry = new THREE.PlaneBufferGeometry(100, 100);
+	  geometry = new THREE.PlaneBufferGeometry(size, size);
 	  geometry.rotateX(-Math.PI / 2);
 	  material = new THREE.MeshBasicMaterial({color: 0xffff00});
 	  return new THREE.Mesh(geometry, material);
@@ -556,7 +554,6 @@
 	  });
 
 	  this.mesh = new THREE.Mesh(this.geometry, this.material);
-	  this.mesh.drawMode = THREE.TriangleStripDrawMode;
 
 	  this.mesh.frustumCulled = false;
 	  this.mesh.vertices = this.vertices;

diff --git a/dist/aframe-teleport-controls.min.js b/dist/aframe-teleport-controls.min.js
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -1,36 +1,31 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
+    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
     <script src="../../dist/aframe-teleport-controls.min.js"></script>
     <script src="../common/shaders/skyGradient.js"></script>
-    <script src="https://unpkg.com/aframe-input-mapping-component/dist/aframe-input-mapping-component.min.js"></script>
-    <script src="../common/mappings.js"></script>
   </head>
   <body style="background-color: #000">
     <a-scene>
       <!-- scene geometry -->
       <a-entity id="sky"
                 geometry="primitive: sphere; radius: 65;"
-                material="shader: skyGradient; colorTop: #aaa; colorBottom: #fff; side: back"></a-entity>
+                material="shader: skyGradient; colorTop: #aaa; colorBottom: #fff; side: back">
+      </a-entity>
       <a-entity id="floor"
                 rotation="-90 0 0"
                 geometry="primitive: plane; width: 100; height: 100"
                 material="src: url(floor.jpg); repeat: 80 80">
       </a-entity>
-      <!-- hand controls -->
-      <a-entity teleport-controls="startEvents: teleportstart; endEvents: teleportend"
-        vive-controls="hand: left"
-        oculus-touch-controls="hand: left"
-        microsoft-motion-controls="hand: left"
-        daydream-controls="left" gearvr-controls="left">
-      </a-entity>
-      <a-entity teleport-controls="startEvents: teleportstart; endEvents: teleportend; type: line"
-        vive-controls="hand: right"
-        microsoft-motion-controls="hand: right"
-        oculus-touch-controls="hand: right"
-        daydream-controls="right" gearvr-controls="right">
-      </a-entity>
+      <a-entity id="rig" position="0 0 0">
+        <a-entity id="camera" camera look-controls position="0 1.3 0"></a-entity>
+        <!-- hand controls -->
+        <a-entity teleport-controls="cameraRig: #rig"
+                  hand-controls="left">
+        </a-entity>
+        <a-entity teleport-controls="type: line; cameraRig: #rig"
+                  hand-controls="right">                
+        </a-entity>
       </a-entity>
     </a-scene>
   </body>

diff --git a/index.js b/index.js
@@ -86,19 +86,7 @@ AFRAME.registerComponent('teleport-controls', {
 
     this.onButtonDown = this.onButtonDown.bind(this);
     this.onButtonUp = this.onButtonUp.bind(this);
-    if (this.data.startEvents.length && this.data.endEvents.length) {
-
-      for (i = 0; i < this.data.startEvents.length; i++) {
-        el.addEventListener(this.data.startEvents[i], this.onButtonDown);
-      }
-      for (i = 0; i < this.data.endEvents.length; i++) {
-        el.addEventListener(this.data.endEvents[i], this.onButtonUp);
-      }
-    } else {
-      el.addEventListener(data.button + 'down', this.onButtonDown);
-      el.addEventListener(data.button + 'up', this.onButtonUp);
-    }
-
+    el.addEventListener('axismove', this.handleAxis.bind(this))
     this.queryCollisionEntities();
   },
 
@@ -241,6 +229,16 @@ AFRAME.registerComponent('teleport-controls', {
     };
   })(),
 
+  handleAxis: function (evt) {
+    const axisX = parseInt(evt.detail.axis[2] * 10)
+    const axisY = parseInt(evt.detail.axis[3] * 10)
+    if (axisX === 0 && axisY === 0) {
+      this.onButtonUp(evt)
+    } else if (Math.abs(axisX) <= 1 && axisY === -9) {
+      this.onButtonDown(evt)
+    }
+  },
+
   /**
    * Run `querySelectorAll` for `collisionEntities` and maintain it with `child-attached`
    * and `child-detached` events.

diff --git a/lib/RayCurve.js b/lib/RayCurve.js
@@ -13,7 +13,6 @@ var RayCurve = function (numPoints, width) {
   });
 
   this.mesh = new THREE.Mesh(this.geometry, this.material);
-  this.mesh.drawMode = THREE.TriangleStripDrawMode;
 
   this.mesh.frustumCulled = false;
   this.mesh.vertices = this.vertices;