fix event handling to support webvr and webxr controller apis

.gitignore

@@ -3,4 +3,4 @@
 examples/build.js
 gh-pages
 node_modules/
-npm-debug.log
+npm-debug.log

README.md

@@ -13,7 +13,7 @@ Teleport component
 | type       | Type of teleport: line or parabolic         | parabolic   |
 | button       | Button used to launch the teleport: trackpad, trigger, grip, menu         | trackpad   |
 | collisionEntities | Selector of the meshes used to check the collisions. If no value provided a plane Y=0 is used |  |
-| endEvents | Paired with `startEvents`, list of events to listen for to finish teleporting.| []            |
+| endEvents | Paired with `startEvents`, list of events to listen for to finish teleporting.| ['axismove']            |
 | hitEntity | Entity used to show at the hitting position. If no value provided a cylinder will be used as default. |           |
 | hitCylinderColor | Color used for the default `hitEntity` primitives | #99ff99          |
 | hitCylinderRadius | Radius used for the default `hitEntity` primitives | 0.25          |
@@ -28,7 +28,7 @@ Teleport component
 | maxLength | Max length of the ray when using type=line teleport | 10 |
 | landingNormal | Normal vector to detect collisions with the `collisionEntity` | (0, 1, 0)          |
 | landingMaxAngle | Angle threshold (in degrees) used together with `landingNormal` to detect if the mesh is so steep to jump to it. | 45          |
-| startEvents | Alternative to `button`, list of events to listen to start teleporting.| [] |
+| startEvents | Alternative to `axismove`, list of events to listen to start teleporting.| ['axismove'] |
 
 ### Usage
 

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,18 +132,23 @@
 
 	    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);
-	    }
+	        if (this.data.startEvents[i] === 'axismove') {
+	          el.addEventListener('axismove', this.handleAxis.bind(this))
+	        } else {
+	          el.addEventListener(this.data.startEvents[i], this.onButtonDown);	
+	        }
+	      }	
+	      for (i = 0; i < this.data.endEvents.length; i++) {	
+	        if (this.data.startEvents[i] !== 'axismove') {
+	          el.addEventListener(this.data.endEvents[i], this.onButtonUp);	
+	        }
+	      }	
+	    } else {	
+	      el.addEventListener('axismove', this.handleAxis.bind(this))
+	    }	
 
 	    this.queryCollisionEntities();
 	  },
@@ -287,6 +292,18 @@
 	    };
 	  })(),
 
+	  handleAxis: function (evt) {
+	    if (!evt.detail.axis || !evt.detail.axis.length) return 
+	    const xr = evt.detail.axis.length === 4
+	    const axisX = parseInt(evt.detail.axis[xr ? 2 : 0] * 10)
+	    const axisY = parseInt(evt.detail.axis[xr ? 3 : 1] * 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 +519,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 +573,6 @@
 	  });
 
 	  this.mesh = new THREE.Mesh(this.geometry, this.material);
-	  this.mesh.drawMode = THREE.TriangleStripDrawMode;
 
 	  this.mesh.frustumCulled = false;
 	  this.mesh.vertices = this.vertices;

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.4/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="hand: left;">
+        </a-entity>
+        <a-entity teleport-controls="type: line; cameraRig: #rig"
+                  hand-controls="hand: right;">                
+        </a-entity>
       </a-entity>
     </a-scene>
   </body>

index.js

@@ -86,19 +86,23 @@ 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);
-    }
-
+        if (this.data.startEvents[i] === 'axismove') {
+          el.addEventListener('axismove', this.handleAxis.bind(this))
+        } else {
+          el.addEventListener(this.data.startEvents[i], this.onButtonDown);	
+        }
+      }	
+      for (i = 0; i < this.data.endEvents.length; i++) {	
+        if (this.data.startEvents[i] !== 'axismove') {
+          el.addEventListener(this.data.endEvents[i], this.onButtonUp);	
+        }
+      }	
+    } else {	
+      el.addEventListener('axismove', this.handleAxis.bind(this))
+    }	
     this.queryCollisionEntities();
   },
 
@@ -241,6 +245,18 @@ AFRAME.registerComponent('teleport-controls', {
     };
   })(),
 
+  handleAxis: function (evt) {
+    if (!evt.detail.axis || !evt.detail.axis.length) return 
+    const xr = evt.detail.axis.length === 4
+    const axisX = parseInt(evt.detail.axis[xr ? 2 : 0] * 10)
+    const axisY = parseInt(evt.detail.axis[xr ? 3 : 1] * 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.

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;