cursor mesh with temporary visual (fixes #20)

src/components/cursor-mesh.js

@@ -0,0 +1,44 @@
+/**
+ * Cursor mesh to show at intersection point with respective hand.
+ */
+AFRAME.registerComponent('cursor-mesh', {
+  schema: {
+    cursorEl: {type: 'selector'}
+  },
+
+  init: function () {
+    this.scenePivotEl = document.getElementById('scenePivot');
+  },
+
+  tick: function () {
+    var cursor;
+    var cursorEl = this.data.cursorEl;
+    var el = this.el;
+    var i;
+    var intersection;
+    var intersectedEl;
+    var intersectionPoint;
+    var object3D = this.el.object3D;
+    var scenePivotEl = this.scenePivotEl;
+
+    cursor = cursorEl.components.cursor;
+    if (!cursor) { return; }
+
+    // Look for valid intersection target.
+    intersectedEl = cursorEl.components.cursor.intersectedEl;
+    if (intersectedEl) {
+      el.object3D.visible = true;
+    } else {
+      el.object3D.visible = false;
+      return;
+    }
+
+    // Update cursor mesh.
+    intersection = cursorEl.components.raycaster.getIntersection(intersectedEl);
+    el.object3D.position.copy(intersection.point);
+
+    if (scenePivotEl) {
+      el.object3D.rotation.copy(scenePivotEl.object3D.rotation);
+    }
+  }
+});

src/index.html

@@ -31,6 +31,7 @@
         <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
         <audio id="saberDraw" src="assets/sounds/saberDraw.wav"></audio>
 
+        <img id="cursorMeshImage" src="assets/img/cursor-mesh.png">
         <img id="gridImg" src="assets/img/grid.png">
         <img id="playImg" src="assets/img/play.png">
         <img id="sliceImg" src="assets/img/slice.png">
@@ -70,6 +71,7 @@
               <a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ color }}; shader: flat; opacity: 0.04"></a-entity>
             </a-entity>
             <a-entity
+              id="{{ hand }}Cursor"
               class="raycaster"
               mixin="raycaster"
               bind__raycaster="enabled: menu.active && activeHand === '{{ hand }}'; showLine: menu.active && activeHand === '{{ hand }}'"
@@ -82,9 +84,16 @@
         {{ saber('right', 'left', 'cyan') }}
       </a-entity>
 
+      <a-mixin
+        id="cursorMesh"
+        geometry="primitive: plane; width: 0.26; height: 0.26"
+        material="shader: flat; color: white; transparent: true; src: #cursorMeshImage; side: both; depthTest: false"></a-mixin>
+      <a-entity id="leftCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #leftCursor"></a-entity>
+      <a-entity id="rightCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #rightCursor"></a-entity>
       {% if not IS_PRODUCTION %}
         <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
                   bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
+        <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"></a-entity>
       {% endif %}
     </a-scene>
   </body>

src/templates/menu.html

@@ -78,7 +78,8 @@
   <a-entity id="menuBackground"
       mixin="slice"
       slice9="width: 2.5; height: 1.4"
-      position="0 0 -0.005"></a-entity>
+      position="0 0 -0.005"
+      raycastable></a-entity>
 
   <a-entity id="searchResultsContainer" position="0 0 0.001"
     animation__toleft="property: position.x;  to: -0.59; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"