fix cursor mesh toggling

src/components/cursor-mesh.js

@@ -3,6 +3,7 @@
  */
 AFRAME.registerComponent('cursor-mesh', {
   schema: {
+    active: {default: true},
     cursorEl: {type: 'selector'}
   },
 
@@ -10,6 +11,10 @@ AFRAME.registerComponent('cursor-mesh', {
     this.scenePivotEl = document.getElementById('scenePivot');
   },
 
+  update: function () {
+    this.el.object3D.visible = this.data.active;
+  },
+
   tick: function () {
     var cursor;
     var cursorEl = this.data.cursorEl;
@@ -21,6 +26,8 @@ AFRAME.registerComponent('cursor-mesh', {
     var object3D = this.el.object3D;
     var scenePivotEl = this.scenePivotEl;
 
+    if (!this.data.active) { return; }
+
     cursor = cursorEl.components.cursor;
     if (!cursor) { return; }
 

src/index.html

@@ -204,8 +204,8 @@
           <a-entity
             id="{{ hand }}CursorMesh"
             mixin="cursorMesh"
-            bind__visible="menu.active"
-            cursor-mesh="cursorEl: #{{ hand }}Hand"
+            bind__cursor-mesh="active: menu.active && activeHand === '{{ hand }}'"
+            cursor-mesh="active: menu.active && activeHand === '{{ hand }}'; cursorEl: #{{ hand }}Hand"
             material="color: {{ beamColor }}"
             scale="1.3 1.3 1.3"></a-entity>
         {% endmacro %}
@@ -217,7 +217,8 @@
       {% 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>
+        <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
+                  bind__cursor-mesh="active: menu.active"></a-entity>
       {% endif %}
     </a-scene>
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>