Pen tool

package.json

@@ -54,7 +54,7 @@
     "react-dom": "^16.1.1",
     "react-intl": "^2.4.0",
     "screenfull": "^3.3.2",
-    "super-hands": "github:mozillareality/aframe-super-hands-component#f8f9781d8b4c487bb544b3986000e85ed5f82fcc",
+    "super-hands": "github:mozillareality/aframe-super-hands-component#feature/drawing",
     "three": "github:mozillareality/three.js#8b1886c384371c3e6305b757d1db7577c5201a9b",
     "three-pathfinding": "^0.7.0",
     "three-to-cannon": "1.3.0",

src/assets/stylesheets/2d-hud.scss

@@ -113,6 +113,13 @@
   background-image: url(../hud/bubble_on-hover.png);
 }
 
+:local(.iconButton.spawn_pen) {
+  background-image: url(../hud/spawn_pen.png);
+}
+:local(.iconButton.spawn_pen:hover) {
+  background-image: url(../hud/spawn_pen-hover.png);
+}
+
 :local(.iconButton.freeze) {
   background-image: url(../hud/freeze_off.png);
 }

src/components/css-class.js

@@ -6,6 +6,7 @@ AFRAME.registerComponent("css-class", {
   schema: {
     type: "string"
   },
+  multiple: true,
   init() {
     this.el.classList.add(this.data);
   },

src/components/cursor-controller.js

@@ -73,7 +73,7 @@ AFRAME.registerComponent("cursor-controller", {
         this.updateRay();
       }
 
-      const isGrabbing = this.data.cursor.components["super-hands"].state.has("grab-start");
+      const isGrabbing = this.isInteracting();
       if (isGrabbing) {
         const distance = Math.min(
           this.data.maxDistance,
@@ -153,6 +153,10 @@ AFRAME.registerComponent("cursor-controller", {
     this.data.cursor.components["static-body"].syncToPhysics();
   },
 
+  isInteracting: function() {
+    return this.data.cursor.components["super-hands"].state.has("grab-start");
+  },
+
   startInteraction: function() {
     if (this._isTargetOfType(TARGET_TYPE_INTERACTABLE_OR_UI)) {
       this.data.cursor.emit("cursor-grab", {});
@@ -174,9 +178,11 @@ AFRAME.registerComponent("cursor-controller", {
     const targetDistanceMod = this.currentDistanceMod + delta;
     const moddedDistance = this.currentDistance - targetDistanceMod;
     if (moddedDistance > maxDistance || moddedDistance < minDistance) {
-      return;
+      return false;
     }
+
     this.currentDistanceMod = targetDistanceMod;
+    return true;
   },
 
   _handleCursorLoaded: function() {

src/components/grabbable-toggle.js

@@ -0,0 +1,185 @@
+/* global AFRAME, THREE */
+const inherit = AFRAME.utils.extendDeep;
+const physicsCore = require("super-hands/reaction_components/prototypes/physics-grab-proto.js");
+const buttonsCore = require("super-hands/reaction_components/prototypes/buttons-proto.js");
+// new object with all core modules
+const base = inherit({}, physicsCore, buttonsCore);
+AFRAME.registerComponent(
+  "grabbable-toggle",
+  inherit(base, {
+    schema: {
+      maxGrabbers: { type: "int", default: NaN },
+      invert: { default: false },
+      suppressY: { default: false },
+      primaryReleaseEvents: { default: ["primary_hand_release"] },
+      secondaryReleaseEvents: { default: ["secondary_hand_release"] }
+    },
+    init: function() {
+      this.GRABBED_STATE = "grabbed";
+      this.GRAB_EVENT = "grab-start";
+      this.UNGRAB_EVENT = "grab-end";
+      this.grabbed = false;
+      this.grabbers = [];
+      this.constraints = new Map();
+      this.deltaPositionIsValid = false;
+      this.grabDistance = undefined;
+      this.grabDirection = { x: 0, y: 0, z: -1 };
+      this.grabOffset = { x: 0, y: 0, z: 0 };
+      // persistent object speeds up repeat setAttribute calls
+      this.destPosition = { x: 0, y: 0, z: 0 };
+      this.deltaPosition = new THREE.Vector3();
+      this.targetPosition = new THREE.Vector3();
+      this.physicsInit();
+
+      this.el.addEventListener(this.GRAB_EVENT, e => this.start(e));
+      this.el.addEventListener(this.UNGRAB_EVENT, e => this.end(e));
+      this.el.addEventListener("mouseout", e => this.lostGrabber(e));
+
+      this.toggle = false;
+      this.lastGrabber = null;
+    },
+    update: function() {
+      this.physicsUpdate();
+      this.xFactor = this.data.invert ? -1 : 1;
+      this.zFactor = this.data.invert ? -1 : 1;
+      this.yFactor = (this.data.invert ? -1 : 1) * !this.data.suppressY;
+    },
+    tick: (function() {
+      const q = new THREE.Quaternion();
+      const v = new THREE.Vector3();
+
+      return function() {
+        let entityPosition;
+        if (this.grabber) {
+          // reflect on z-axis to point in same direction as the laser
+          this.targetPosition.copy(this.grabDirection);
+          this.targetPosition
+            .applyQuaternion(this.grabber.object3D.getWorldQuaternion(q))
+            .setLength(this.grabDistance)
+            .add(this.grabber.object3D.getWorldPosition(v))
+            .add(this.grabOffset);
+          if (this.deltaPositionIsValid) {
+            // relative position changes work better with nested entities
+            this.deltaPosition.sub(this.targetPosition);
+            entityPosition = this.el.getAttribute("position");
+            this.destPosition.x = entityPosition.x - this.deltaPosition.x * this.xFactor;
+            this.destPosition.y = entityPosition.y - this.deltaPosition.y * this.yFactor;
+            this.destPosition.z = entityPosition.z - this.deltaPosition.z * this.zFactor;
+            this.el.setAttribute("position", this.destPosition);
+          } else {
+            this.deltaPositionIsValid = true;
+          }
+          this.deltaPosition.copy(this.targetPosition);
+        }
+      };
+    })(),
+    remove: function() {
+      this.el.removeEventListener(this.GRAB_EVENT, this.start);
+      this.el.removeEventListener(this.UNGRAB_EVENT, this.end);
+      this.physicsRemove();
+    },
+    start: function(evt) {
+      if (evt.defaultPrevented || !this.startButtonOk(evt)) {
+        return;
+      }
+      // room for more grabbers?
+      let grabAvailable = !Number.isFinite(this.data.maxGrabbers) || this.grabbers.length < this.data.maxGrabbers;
+      if (Number.isFinite(this.data.maxGrabbers) && !grabAvailable && this.grabbed) {
+        this.grabbers[0].components["super-hands"].onGrabEndButton();
+        grabAvailable = true;
+      }
+      if (this.grabbers.indexOf(evt.detail.hand) === -1 && grabAvailable) {
+        if (!evt.detail.hand.object3D) {
+          console.warn("grabbable entities must have an object3D");
+          return;
+        }
+        this.grabbers.push(evt.detail.hand);
+        // initiate physics if available, otherwise manual
+        if (!this.physicsStart(evt) && !this.grabber) {
+          this.grabber = evt.detail.hand;
+          this.resetGrabber();
+        }
+        // notify super-hands that the gesture was accepted
+        if (evt.preventDefault) {
+          evt.preventDefault();
+        }
+        this.grabbed = true;
+        this.el.addState(this.GRABBED_STATE);
+      }
+    },
+    end: function(evt) {
+      const handIndex = this.grabbers.indexOf(evt.detail.hand);
+      if (evt.defaultPrevented || !this.endButtonOk(evt)) {
+        return;
+      }
+
+      const type = evt.detail && evt.detail.buttonEvent ? evt.detail.buttonEvent.type : null;
+
+      if (this.toggle && this.lastGrabber !== this.grabbers[0]) {
+        this.toggle = false;
+        this.lastGrabber = null;
+      }
+
+      if (handIndex !== -1) {
+        this.grabber = this.grabbers[0];
+      }
+
+      if ((this.isPrimaryRelease(type) && !this.toggle) || this.isSecondaryRelease(type)) {
+        this.toggle = true;
+        this.lastGrabber = this.grabbers[0];
+        return;
+      } else if (this.toggle && this.isPrimaryRelease(type)) {
+        this.toggle = false;
+        this.lastGrabber = null;
+      }
+
+      if (handIndex !== -1) {
+        this.grabbers.splice(handIndex, 1);
+        this.grabber = this.grabbers[0];
+      }
+
+      this.physicsEnd(evt);
+      if (!this.resetGrabber()) {
+        this.grabbed = false;
+        this.el.removeState(this.GRABBED_STATE);
+      }
+      if (evt.preventDefault) {
+        evt.preventDefault();
+      }
+    },
+    resetGrabber: (() => {
+      const objPos = new THREE.Vector3();
+      const grabPos = new THREE.Vector3();
+      return function() {
+        if (!this.grabber) {
+          return false;
+        }
+        const raycaster = this.grabber.getAttribute("raycaster");
+        this.deltaPositionIsValid = false;
+        this.grabDistance = this.el.object3D
+          .getWorldPosition(objPos)
+          .distanceTo(this.grabber.object3D.getWorldPosition(grabPos));
+        if (raycaster) {
+          this.grabDirection = raycaster.direction;
+          this.grabOffset = raycaster.origin;
+        }
+        return true;
+      };
+    })(),
+    lostGrabber: function(evt) {
+      const i = this.grabbers.indexOf(evt.relatedTarget);
+      // if a queued, non-physics grabber leaves the collision zone, forget it
+      if (i !== -1 && evt.relatedTarget !== this.grabber && !this.physicsIsConstrained(evt.relatedTarget)) {
+        this.grabbers.splice(i, 1);
+      }
+    },
+
+    isPrimaryRelease(type) {
+      return this.data.primaryReleaseEvents.indexOf(type) !== -1;
+    },
+
+    isSecondaryRelease(type) {
+      return this.data.secondaryReleaseEvents.indexOf(type) !== -1;
+    }
+  })
+);

src/components/in-world-hud.js

@@ -11,23 +11,23 @@ AFRAME.registerComponent("in-world-hud", {
   init() {
     this.mic = this.el.querySelector(".mic");
     this.freeze = this.el.querySelector(".freeze");
-    this.bubble = this.el.querySelector(".bubble");
+    this.pen = this.el.querySelector(".pen");
     this.background = this.el.querySelector(".bg");
     const renderOrder = window.APP.RENDER_ORDER;
     this.mic.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
     this.freeze.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
-    this.bubble.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
+    this.pen.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
     this.background.object3DMap.mesh.renderORder = renderOrder.HUD_BACKGROUND;
 
     this.updateButtonStates = () => {
       this.mic.setAttribute("icon-button", "active", this.el.sceneEl.is("muted"));
       this.freeze.setAttribute("icon-button", "active", this.el.sceneEl.is("frozen"));
-      this.bubble.setAttribute("icon-button", "active", this.el.sceneEl.is("spacebubble"));
+      this.pen.setAttribute("icon-button", "active", this.el.sceneEl.is("pen"));
     };
     this.updateButtonStates();
 
     this.onStateChange = evt => {
-      if (!(evt.detail === "muted" || evt.detail === "frozen" || evt.detail === "spacebubble")) return;
+      if (!(evt.detail === "muted" || evt.detail === "frozen" || evt.detail === "pen")) return;
       this.updateButtonStates();
     };
 
@@ -39,8 +39,8 @@ AFRAME.registerComponent("in-world-hud", {
       this.el.emit("action_freeze");
     };
 
-    this.onBubbleClick = () => {
-      this.el.emit("action_space_bubble");
+    this.onPenClick = () => {
+      this.el.emit("spawn_pen");
     };
   },
 
@@ -50,7 +50,7 @@ AFRAME.registerComponent("in-world-hud", {
 
     this.mic.addEventListener("click", this.onMicClick);
     this.freeze.addEventListener("click", this.onFreezeClick);
-    this.bubble.addEventListener("click", this.onBubbleClick);
+    this.pen.addEventListener("mousedown", this.onPenClick);
   },
 
   pause() {
@@ -59,6 +59,6 @@ AFRAME.registerComponent("in-world-hud", {
 
     this.mic.removeEventListener("click", this.onMicClick);
     this.freeze.removeEventListener("click", this.onFreezeClick);
-    this.bubble.removeEventListener("click", this.onBubbleClick);
+    this.pen.removeEventListener("mousedown", this.onPenClick);
   }
 });

src/components/input-configurator.js

@@ -162,7 +162,7 @@ AFRAME.registerComponent("input-configurator", {
       this.cursor.el.setAttribute("cursor-controller", { rayObject: this.data.gazeCursorRayObject });
     }
 
-    if (this.actionEventHandler) {
+    if (this.actionEventHandler && this.controller) {
       this.actionEventHandler.setHandThatAlsoDrivesCursor(this.controller);
     }
   }

src/components/media-loader.js

@@ -20,16 +20,18 @@ AFRAME.registerComponent("media-loader", {
     this.onError = this.onError.bind(this);
     this.showLoader = this.showLoader.bind(this);
     this.clearLoadingTimeout = this.clearLoadingTimeout.bind(this);
+    this.shapeAdded = false;
   },
 
   setShapeAndScale(resize) {
     const mesh = this.el.getObject3D("mesh");
     const box = getBox(this.el, mesh);
     const scaleCoefficient = resize ? getScaleCoefficient(0.5, box) : 1;
     this.el.object3DMap.mesh.scale.multiplyScalar(scaleCoefficient);
-    if (this.el.body && this.el.body.shapes.length > 1) {
+    if (this.el.body && this.shapeAdded && this.el.body.shapes.length > 1) {
       this.el.removeAttribute("shape");
-    } else {
+      this.shapeAdded = false;
+    } else if (this.el.body.shapes.length === 0) {
       const center = new THREE.Vector3();
       const { min, max } = box;
       const halfExtents = {
@@ -43,6 +45,7 @@ AFRAME.registerComponent("media-loader", {
         shape: "box",
         halfExtents: halfExtents
       });
+      this.shapeAdded = true;
     }
   },