From ff263a439bcef09346158c8d83ed71a3ebf74ad6 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Thu, 20 Sep 2018 05:56:56 -0700
Subject: [PATCH] cursor mesh with temporary visual (fixes #20)

---
 assets/img/cursor-mesh.png    | Bin 0 -> 1021 bytes
 src/components/cursor-mesh.js |  44 ++++++++++++++++++++++++++++++++++
 src/index.html                |   9 +++++++
 src/templates/menu.html       |   3 ++-
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 assets/img/cursor-mesh.png
 create mode 100644 src/components/cursor-mesh.js

diff --git a/assets/img/cursor-mesh.png b/assets/img/cursor-mesh.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b8aa951cac171c323f96c3261d641f3a3b9b994
GIT binary patch
literal 1021
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nCE-CIEGZ*dNapATR2d}U45hP#Dw0AF4aaIrbay%R}t|=
z+4im0_I=gjzhYxFn|1_fifj_#nP`@j!5h@w`+btNfY-|Z@6PNoFXsEB;Ct!h+?mGt
zY4^_Txm9E5zhKvuNEQwTYQlpXf)-ZpRoJN#x&6BD$yq5^?d&JXc%@BZKDqD7>b-ip
zTPO94RK*pAZc@zjma6~x-(ID9QtZj}ljSTO%y)O~p47MGsma-uDJnlx*0M0Mc%3g&
zUHsBtMP8Rf;6~W}?N^Nc>BeR_pXOogdcG+|;pUm2<;N$<o)l-%;IrLv`_zV$|0l;D
z+9s=Wi9g`LwD>2d{NHTfzDA7YMCE*Yjf$uG-Ub_H2`H%lVtw=ZeA4ACr-nIxUw<`v
z-E?kvGy7j0-}0*eB>}lxO$8OKcQwBGe%?y%g_46=#{D|=CM)YOZ6=Gw;$=~SS8i^K
z5<D=IH*4)WhAQ6uvVnVZS4%R^xiH&OO7QCK4YQinmRUDloBRBC+ml&qRrdaV-u%RO
z(+*CRBeS&i8^ViMv1jzFeD~YZz^}Sq_57rxtn(&hrHN1YQL=8$jZ^#Q>saO1>AC86
z-<xPtX49Ij)F7YDcX>x%^uD5+N1Kx;KbZEU%)wN-VdE<mhr8Q;T=rPHLo(nj#{-Yk
zKdUbaPiAoEyL_YkUz{9JN#P5F-tYTozW?&KobhT8L)-DY+w<RstS>vY=la{)sZT;d
z#uPr-;%etFCTq8A(|KLj|JTkfSUxGA@#-8+!%~*Yx6{AAyQ@BFcUf4$#jq)PKlNq9
z_obhmDR?>e;jPu*6gr<*HI!-Y=h!RSkt;56dGGgX!#7Mxui0-by_Utjpg+T3c|~#7
zR;32xUp4<UnylPCRgyW6+z?%J{<%NXy8I+lHI50qw{|W%|E#^@m(liHX&e)DcTH$#
zyk_d7ByFMeY<1(V4aXU;8uNvmy2Q2M>>EFY<IKXVQ`;DRE>bSe5!Z3Fa&VclxW&Nb
z%zyLWJc7a;JVK#`j6o7=>mD&JS<A@m8WzzY($=+h2g7NDh?1kM4MN|T8JLKN3Jiqc
el+Ji29)@K8gEy*fZOH}ZX9iDKKbLh*2~7a9vWsN^

literal 0
HcmV?d00001

diff --git a/src/components/cursor-mesh.js b/src/components/cursor-mesh.js
new file mode 100644
index 0000000..ec4b2e6
--- /dev/null
+++ b/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);
+    }
+  }
+});
diff --git a/src/index.html b/src/index.html
index 7302c8f..e815a96 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/templates/menu.html b/src/templates/menu.html
index b23e9b1..b718386 100644
--- a/src/templates/menu.html
+++ b/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"