XR Cursor

docs/components/cursor.md

@@ -88,7 +88,7 @@ AFRAME.registerComponent('cursor-listener', {
 | fuse               | Whether cursor is fuse-based.                                                                                                                      | false on desktop, true on mobile |
 | fuseTimeout        | How long to wait (in milliseconds) before triggering a fuse-based click event.                                                                     | 1500                             |
 | mouseCursorStylesEnabled | Whether to show pointer cursor in `rayOrigin: mouse` mode when hovering over entity.                                                               | true                             |
-| rayOrigin          | Where the intersection ray is cast from (i.e.,entity or mouse). `rayOrigin: mouse` is extremely useful for VR development on a mouse and keyboard. | entity
+| rayOrigin          | Where the intersection ray is cast from (i.e. xrselect ,entity or mouse). `rayOrigin: mouse` is extremely useful for VR development on a mouse and keyboard. | entity
 | upEvents           | Array of additional events on the entity to *listen* to for triggering `mouseup` (e.g., `trackpadup` for daydream-controls).                       | []                               |
 
 To further customize the cursor component, we configure the cursor's dependency
@@ -183,3 +183,16 @@ pick up event with the `begin` attribute:
 
 To play with an example of a cursor with visual feedback, check out the [Cursor
 with Visual Feedback example on CodePen][cursor-codepen].
+
+## XR Select Cursor
+
+When an XR `"selectstart"` event happens the raycaster picks an element based upon it's current location.
+This works for handheld AR, and headmounted VR and AR. This works well with the mouse `rayOrigin` too.
+
+```html
+<a-scene
+  cursor__mouse="rayOrigin: mouse"
+  cursor__xrselect="rayOrigin: xrselect"
+  raycaster="objects:#objects *;"
+>
+```

src/components/cursor.js

@@ -52,9 +52,11 @@ module.exports.Component = registerComponent('cursor', {
     fuseTimeout: {default: 1500, min: 0},
     mouseCursorStylesEnabled: {default: true},
     upEvents: {default: []},
-    rayOrigin: {default: 'entity', oneOf: ['mouse', 'entity']}
+    rayOrigin: {default: 'entity', oneOf: ['mouse', 'entity', 'xrselect']}
   },
 
+  multiple: true,
+
   init: function () {
     var self = this;
 
@@ -63,6 +65,7 @@ module.exports.Component = registerComponent('cursor', {
     this.intersectedEl = null;
     this.canvasBounds = document.body.getBoundingClientRect();
     this.isCursorDown = false;
+    this.activeXRInput = null;
 
     // Debounce.
     this.updateCanvasBounds = utils.debounce(function updateCanvasBounds () {
@@ -86,6 +89,19 @@ module.exports.Component = registerComponent('cursor', {
     this.updateMouseEventListeners();
   },
 
+  tick: function () {
+    // Update on frame to allow someone to select and mousemove
+    var frame = this.el.sceneEl.frame;
+    var inputSource = this.activeXRInput;
+    if (this.data.rayOrigin === 'xrselect' && frame && inputSource) {
+      this.onMouseMove({
+        frame: frame,
+        inputSource: inputSource,
+        type: 'fakeselectevent'
+      });
+    }
+  },
+
   play: function () {
     this.addEventListeners();
   },
@@ -208,6 +224,12 @@ module.exports.Component = registerComponent('cursor', {
       var point;
       var top;
 
+      var frame;
+      var inputSource;
+      var referenceSpace;
+      var pose;
+      var transform;
+
       camera.parent.updateMatrixWorld();
 
       // Calculate mouse position based on the canvas element
@@ -223,7 +245,19 @@ module.exports.Component = registerComponent('cursor', {
       mouse.x = (left / bounds.width) * 2 - 1;
       mouse.y = -(top / bounds.height) * 2 + 1;
 
-      if (camera && camera.isPerspectiveCamera) {
+      if (this.data.rayOrigin === 'xrselect' && (evt.type === 'selectstart' || evt.type === 'fakeselectevent')) {
+        frame = evt.frame;
+        inputSource = evt.inputSource;
+        referenceSpace = this.el.renderer.xr.getReferenceSpace();
+        pose = frame.getPose(inputSource.targetRaySpace, referenceSpace);
+        transform = pose.transform;
+        direction.set(0, 0, -1);
+        direction.applyQuaternion(transform.orientation);
+        origin.copy(transform.position);
+      } else if (evt.type === 'fakeselectout') {
+        direction.set(0, 1, 0);
+        origin.set(0, 9999, 0);
+      } else if (camera && camera.isPerspectiveCamera) {
         origin.setFromMatrixPosition(camera.matrixWorld);
         direction.set(mouse.x, mouse.y, 0.5).unproject(camera).sub(origin).normalize();
       } else if (camera && camera.isOrthographicCamera) {
@@ -250,6 +284,23 @@ module.exports.Component = registerComponent('cursor', {
       evt.preventDefault();
     }
 
+    if (this.data.rayOrigin === 'xrselect' && evt.type === 'selectstart') {
+      this.activeXRInput = evt.inputSource;
+      this.onMouseMove(evt);
+      this.el.components.raycaster.checkIntersections();
+
+      // if something was tapped on don't do ar-hit-test things
+      if (
+        this.el.components.raycaster.intersectedEls.length &&
+        this.el.sceneEl.components['ar-hit-test'] !== undefined &&
+        this.el.sceneEl.getAttribute('ar-hit-test').enabled
+      ) {
+        // Cancel the ar-hit-test behaviours and disable the ar-hit-test
+        this.el.sceneEl.setAttribute('ar-hit-test', 'enabled', false);
+        this.reenableARHitTest = true;
+      }
+    }
+
     this.twoWayEmit(EVENTS.MOUSEDOWN);
     this.cursorDownEl = this.intersectedEl;
   },
@@ -269,18 +320,31 @@ module.exports.Component = registerComponent('cursor', {
     var data = this.data;
     this.twoWayEmit(EVENTS.MOUSEUP);
 
+    if (this.reenableARHitTest === true) {
+      this.el.sceneEl.setAttribute('ar-hit-test', 'enabled', true);
+      this.reenableARHitTest = undefined;
+    }
+
     // If intersected entity has changed since the cursorDown, still emit mouseUp on the
     // previously cursorUp entity.
     if (this.cursorDownEl && this.cursorDownEl !== this.intersectedEl) {
       this.intersectedEventDetail.intersection = null;
       this.cursorDownEl.emit(EVENTS.MOUSEUP, this.intersectedEventDetail);
     }
 
-    if ((!data.fuse || data.rayOrigin === 'mouse') &&
+    if ((!data.fuse || data.rayOrigin === 'mouse' || data.rayOrigin === 'xrselect') &&
         this.intersectedEl && this.cursorDownEl === this.intersectedEl) {
       this.twoWayEmit(EVENTS.CLICK);
     }
 
+    // if the current xr input stops selecting then make the ray caster point somewhere else
+    if (data.rayOrigin === 'xrselect' && this.activeXRInput === evt.inputSource) {
+      this.onMouseMove({
+        type: 'fakeselectout'
+      });
+    }
+
+    this.activeXRInput = null;
     this.cursorDownEl = null;
     if (evt.type === 'touchend') { evt.preventDefault(); }
   },
@@ -363,7 +427,7 @@ module.exports.Component = registerComponent('cursor', {
     }
 
     // Begin fuse if necessary.
-    if (data.fuseTimeout === 0 || !data.fuse) { return; }
+    if (data.fuseTimeout === 0 || !data.fuse || data.rayOrigin === 'xrselect' || data.rayOrigin === 'mouse') { return; }
     cursorEl.addState(STATES.FUSING);
     this.twoWayEmit(EVENTS.FUSING);
     this.fuseTimeout = setTimeout(function fuse () {

src/components/scene/ar-hit-test.js

@@ -366,6 +366,11 @@ module.exports.Component = register('ar-hit-test', {
     this.makeBBox();
   },
   update: function () {
+    // If it is disabled it's cleaned up
+    if (this.data.enabled === false) {
+      this.hitTest = null;
+      this.bboxMesh.visible = false;
+    }
     if (this.data.target) {
       if (this.data.target.object3D) {
         this.data.target.addEventListener('model-loaded', this.update);