Add interaction system

doc/index.md

@@ -45,7 +45,6 @@
     - [mute-mic](#components/network/mute-mic)
     - [networked-counter](#components/network/networked-counter)
     - [networked-video-player](#components/network/networked-video-player)
-    - [super-networked-interactable](#components/network/super-networked-interactable)
     - [super-spawner](#components/network/super-spawner)
   - [ui](#components/ui)
     - [hud-controller](#components/ui/hud-controller)
@@ -58,7 +57,6 @@
     - [cardboard-controls](#components/user-input/cardboard-controls)
     - [cursor-controller](#components/user-input/cursor-controller)
     - [hand-controls2](#components/user-input/hand-controls2)
-    - [haptic-feedback](#components/user-input/haptic-feedback)
     - [virtual-gamepad-controls](#components/user-input/virtual-gamepad-controls)
     - [wasd-to-analog2d](#components/user-input/wasd-to-analog2d)
   - [vr-mode](#components/vr-mode)
@@ -295,15 +293,6 @@ Instantiates and plays a network video stream, setting the video as the source m
 
 `src/components/networked-video-player.js`
 
-
-<a name="components/network/super-networked-interactable"></a>
-#### super-networked-interactable
-
-Manages ownership and haptics on an interatable
-
-`src/components/super-networked-interactable.js`
-
-
 <a name="components/network/super-spawner"></a>
 #### super-spawner
 
@@ -339,14 +328,6 @@ Converts events from various 6DoF and 3DoF controllers into hand-pose events.
 `src/components/hand-controls2.js`
 
 
-<a name="components/user-input/haptic-feedback"></a>
-#### haptic-feedback
-
-Listens for haptic events and actuates hardware controllers accordingly
-
-`src/components/haptic-feedback.js`
-
-
 <a name="components/user-input/virtual-gamepad-controls"></a>
 #### virtual-gamepad-controls
 
@@ -442,7 +423,7 @@ Positions the HUD and toggles app mode based on where the user is looking
 <a name="components/ui/icon-button"></a>
 #### icon-button
 
-A button with an image, tooltip, hover states and haptics.
+A button with an image, tooltip, and hover states.
 
 `src/components/icon-button.js`
 
@@ -458,7 +439,7 @@ HUD panel for muting, freezing, and space bubble controls.
 <a name="components/ui/text-button"></a>
 #### text-button
 
-A button with text and haptics
+A button with text 
 
 `src/components/text-button.js`
 

package.json

@@ -75,7 +75,6 @@
     "react-router-dom": "^4.3.1",
     "react-youtube": "^7.8.0",
     "screenfull": "^4.0.1",
-    "super-hands": "github:mozillareality/aframe-super-hands-component#hubs/master",
     "three": "github:mozillareality/three.js#hubs/master",
     "three-mesh-bvh": "^0.1.0",
     "three-pathfinding": "github:mozillareality/three-pathfinding#hubs/master",

src/components/block-button.js

@@ -14,11 +14,11 @@ AFRAME.registerComponent("block-button", {
   },
 
   play() {
-    this.el.addEventListener("grab-start", this.onClick);
+    this.el.object3D.addEventListener("interact", this.onClick);
   },
 
   pause() {
-    this.el.removeEventListener("grab-start", this.onClick);
+    this.el.object3D.removeEventListener("interact", this.onClick);
   },
 
   block(clientId) {

src/components/camera-focus-button.js

@@ -28,10 +28,10 @@ AFRAME.registerComponent("camera-focus-button", {
   },
 
   play() {
-    this.el.addEventListener("grab-start", this.onClick);
+    this.el.object3D.addEventListener("interact", this.onClick);
   },
 
   pause() {
-    this.el.removeEventListener("grab-start", this.onClick);
+    this.el.object3D.removeEventListener("interact", this.onClick);
   }
 });

src/components/camera-tool.js

@@ -67,9 +67,6 @@ AFRAME.registerComponent("camera-tool", {
   },
 
   init() {
-    this.stateAdded = this.stateAdded.bind(this);
-    this.onGrab = this.onGrab.bind(this);
-
     this.lastUpdate = performance.now();
     this.localSnapCount = 0; // Counter that is used to arrange photos
 
@@ -132,32 +129,18 @@ AFRAME.registerComponent("camera-tool", {
     this.el.setAttribute("hover-menu__camera", { template: "#camera-hover-menu", dirs: ["forward", "back"] });
     this.el.components["hover-menu__camera"].getHoverMenu().then(() => {
       this.snapButton = this.el.querySelector(".snap-button");
-      this.snapButton.addEventListener("grab-start", () => (this.takeSnapshotNextTick = true));
+      this.snapButton.object3D.addEventListener("interact", () => {
+        this.takeSnapshotNextTick = true;
+      });
     });
   },
 
-  play() {
-    this.el.addEventListener("stateadded", this.stateAdded);
-    this.el.addEventListener("grab-start", this.onGrab);
-  },
-
-  pause() {
-    this.el.removeEventListener("stateadded", this.stateAdded);
-    this.el.removeEventListener("grab-start", this.onGrab);
-  },
-
   remove() {
     this.cameraSystem.deregister(this.el);
     this.el.sceneEl.systems["camera-mirror"].unmirrorCameraAtEl(this.el);
     this.el.sceneEl.emit("camera_removed");
   },
 
-  stateAdded(evt) {
-    if (evt.detail === "activated") {
-      this.takeSnapshotNextTick = true;
-    }
-  },
-
   focus(el, track) {
     if (track) {
       this.trackTarget = el;
@@ -185,19 +168,34 @@ AFRAME.registerComponent("camera-tool", {
     this.el.sceneEl.systems["camera-mirror"].unmirrorCameraAtEl(this.el);
   },
 
-  onGrab() {
-    this.localSnapCount = 0; // When camera is moved, reset photo arrangement algorithm
-  },
-
   onAvatarUpdated() {
     delete this.playerHead;
   },
 
   tick() {
-    const userinput = this.el.sceneEl.systems.userinput;
-    const grabber = this.el.components.grabbable.grabbers[0];
-    if (grabber && !!pathsMap[grabber.id]) {
-      const grabberPaths = pathsMap[grabber.id];
+    const interaction = AFRAME.scenes[0].systems.interaction;
+    const userinput = AFRAME.scenes[0].systems.userinput;
+    const heldLeftHand = interaction.state.leftHand.held === this.el;
+    const heldRightHand = interaction.state.rightHand.held === this.el;
+    const heldRightRemote = interaction.state.rightRemote.held === this.el;
+    if (
+      (heldLeftHand && userinput.get(interaction.options.leftHand.grabPath)) ||
+      (heldRightHand && userinput.get(interaction.options.rightHand.grabPath)) ||
+      (heldRightRemote && userinput.get(interaction.options.rightRemote.grabPath))
+    ) {
+      this.localSnapCount = 0;
+    }
+
+    let grabberId;
+    if (heldRightHand) {
+      grabberId = "player-right-controller";
+    } else if (heldLeftHand) {
+      grabberId = "player-left-controller";
+    } else if (heldRightRemote) {
+      grabberId = "cursor";
+    }
+    if (grabberId) {
+      const grabberPaths = pathsMap[grabberId];
       if (userinput.get(grabberPaths.takeSnapshot)) {
         this.takeSnapshotNextTick = true;
       }

src/components/clone-media-button.js

@@ -28,10 +28,10 @@ AFRAME.registerComponent("clone-media-button", {
   },
 
   play() {
-    this.el.addEventListener("grab-start", this.onClick);
+    this.el.object3D.addEventListener("interact", this.onClick);
   },
 
   pause() {
-    this.el.removeEventListener("grab-start", this.onClick);
+    this.el.object3D.removeEventListener("interact", this.onClick);
   }
 });

src/components/cursor-controller.js

@@ -75,22 +75,13 @@ const HIGHLIGHT = new THREE.Color(23 / 255, 64 / 255, 118 / 255);
 const NO_HIGHLIGHT = new THREE.Color(190 / 255, 190 / 255, 190 / 255);
 const TRANSFORM_COLOR_1 = [150, 80, 150];
 const TRANSFORM_COLOR_2 = [23, 64, 118];
-/**
- * Manages targeting and physical cursor location. Has the following responsibilities:
- *
- * - Tracking which entities in the scene can be targeted by the cursor (`objects`).
- * - Performing a raycast per-frame or on-demand to identify which entity is being currently targeted.
- * - Updating the visual presentation and position of the `cursor` entity and `line` component per frame.
- * - Sending an event when an entity is targeted or un-targeted.
- */
 AFRAME.registerComponent("cursor-controller", {
   schema: {
     cursor: { type: "selector" },
     camera: { type: "selector" },
     far: { default: 4 },
     near: { default: 0.01 },
-    minDistance: { default: 0.18 },
-    objects: { default: "" }
+    minDistance: { default: 0.18 }
   },
 
   init: function() {
@@ -104,84 +95,37 @@ AFRAME.registerComponent("cursor-controller", {
       { once: true }
     );
 
-    // raycaster state
-    this.setDirty = this.setDirty.bind(this);
-    this.targets = [];
     this.raycaster = new THREE.Raycaster();
     this.raycaster.firstHitOnly = true; // flag specific to three-mesh-bvh
-    this.dirty = true;
     this.distance = this.data.far;
     this.color = new THREE.Color(0, 0, 0);
     this.transformColor = [0, 0, 0];
-    const lineMaterial = new THREE.LineBasicMaterial({
-      color: "white",
-      opacity: 0.2,
-      transparent: true,
-      visible: false
-    });
 
     const lineGeometry = new THREE.BufferGeometry();
     lineGeometry.addAttribute("position", new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
 
-    this.line = new THREE.Line(lineGeometry, lineMaterial);
+    this.line = new THREE.Line(
+      lineGeometry,
+      new THREE.LineBasicMaterial({
+        color: "white",
+        opacity: 0.2,
+        transparent: true,
+        visible: false
+      })
+    );
     this.el.setObject3D("line", this.line);
   },
 
   update: function() {
     this.raycaster.far = this.data.far;
     this.raycaster.near = this.data.near;
-    this.setDirty();
-  },
-
-  play: function() {
-    this.observer = new MutationObserver(this.setDirty);
-    this.observer.observe(this.el.sceneEl, { childList: true, attributes: true, subtree: true });
-    this.el.sceneEl.addEventListener("object3dset", this.setDirty);
-    this.el.sceneEl.addEventListener("object3dremove", this.setDirty);
-  },
-
-  pause: function() {
-    this.observer.disconnect();
-    this.el.sceneEl.removeEventListener("object3dset", this.setDirty);
-    this.el.sceneEl.removeEventListener("object3dremove", this.setDirty);
   },
 
-  setDirty: function() {
-    this.dirty = true;
-  },
-
-  populateEntities: function(selector, target) {
-    target.length = 0;
-    const els = this.data.objects ? this.el.sceneEl.querySelectorAll(this.data.objects) : this.el.sceneEl.children;
-    for (let i = 0; i < els.length; i++) {
-      if (els[i].object3D) {
-        target.push(els[i].object3D);
-      }
-    }
-  },
-
-  emitIntersectionEvents: function(prevIntersection, currIntersection) {
-    // if we are now intersecting something, and previously we were intersecting nothing or something else
-    if (currIntersection && (!prevIntersection || currIntersection.object.el !== prevIntersection.object.el)) {
-      this.data.cursor.emit("raycaster-intersection", { el: currIntersection.object.el });
-    }
-    // if we were intersecting something, but now we are intersecting nothing or something else
-    if (prevIntersection && (!currIntersection || currIntersection.object.el !== prevIntersection.object.el)) {
-      this.data.cursor.emit("raycaster-intersection-cleared", { el: prevIntersection.object.el });
-    }
-  },
-
-  tick: (() => {
+  tick2: (() => {
     const rawIntersections = [];
     const cameraPos = new THREE.Vector3();
 
     return function(t) {
-      if (this.dirty) {
-        // app aware devices cares about this.targets so we must update it even if cursor is not enabled
-        this.populateEntities(this.data.objects, this.targets);
-        this.dirty = false;
-      }
-
       const userinput = AFRAME.scenes[0].systems.userinput;
       const cursorPose = userinput.get(paths.actions.cursor.pose);
       const rightHandPose = userinput.get(paths.actions.rightHand.pose);
@@ -193,16 +137,20 @@ AFRAME.registerComponent("cursor-controller", {
         return;
       }
 
+      const interaction = AFRAME.scenes[0].systems.interaction;
       let intersection;
-      const isGrabbing = this.data.cursor.components["super-hands"].state.has("grab-start");
+      const isGrabbing = !!interaction.state.rightRemote.held;
       if (!isGrabbing) {
         rawIntersections.length = 0;
         this.raycaster.ray.origin = cursorPose.position;
         this.raycaster.ray.direction = cursorPose.direction;
-        this.raycaster.intersectObjects(this.targets, true, rawIntersections);
-        intersection = rawIntersections.find(x => x.object.el);
-        this.emitIntersectionEvents(this.prevIntersection, intersection);
-        this.prevIntersection = intersection;
+        this.raycaster.intersectObjects(
+          AFRAME.scenes[0].systems["hubs-systems"].cursorTargettingSystem.targets,
+          true,
+          rawIntersections
+        );
+        intersection = rawIntersections[0];
+        interaction.updateCursorIntersection(intersection);
         this.distance = intersection ? intersection.distance : this.data.far;
       }
 
@@ -235,7 +183,6 @@ AFRAME.registerComponent("cursor-controller", {
       }
 
       if (this.line.material.visible) {
-        // Reach into line component for better performance
         const posePosition = cursorPose.position;
         const cursorPosition = cursor.object3D.position;
         const positionArray = this.line.geometry.attributes.position.array;
@@ -251,10 +198,5 @@ AFRAME.registerComponent("cursor-controller", {
         this.line.geometry.computeBoundingSphere();
       }
     };
-  })(),
-
-  remove: function() {
-    this.emitIntersectionEvents(this.prevIntersection, null);
-    delete this.prevIntersection;
-  }
+  })()
 });