Overlay accepts multiple objects. Add Keyboard and controllers to the overlay. When clicking play menu is hidden and overlay removed from scene

src/index.html

@@ -10,10 +10,11 @@
       bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty"
       bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
       bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
+      bind-toggle__overlay="menu.active"
       console-shortcuts
       effect-bloom="strength: 0.7"
       proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
-      overlay="object: #menu"
+      overlay="object: #menu, #keyboard, #rightHand, #leftHand"
       search
       stage-colors="blue"
       fog="color: #a00; density: 0.035; type: exponential">

src/templates/menu.html

@@ -172,7 +172,7 @@
   </a-entity>
 </a-entity>
 
-<a-entity id="keyboard" super-keyboard="width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.8 -1" rotation="-40 0 0" keyboard-raycastable search bind__super-keyboard="show: search.active"></a-entity>
+<a-entity id="keyboard" super-keyboard="width: 1; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; injectToRaycasterObjects: false" position="0 0.8 -1" rotation="-40 0 0" keyboard-raycastable search bind__super-keyboard="show: menu.active"></a-entity>
 
 <!-- Representation of the song information during play mode. Not part of menu.
      TODO: Move to different template along with score and such. -->

vendor/aframe.effects.js

@@ -69532,17 +69532,55 @@ var register = _dereq_('../../core/component').registerComponent;
 
 module.exports.Component = register('overlay', {
   schema: {
-    object: {type: 'selector'}
+    objects: {default: ''}
+  },
+
+  init: function () {
+    this.objectsVisibility = [];
   },
 
   update: function () {
-    var object = this.data.object;
-    var scene = object && new THREE.Scene();
-    this.el.overlayScene = scene;
+    var objects = this.data.object;
+    var el = this.el;
+    var els;
+    var i;
+    var scene;
+    scene = this.scene = objects && new THREE.Scene();
+    this.restoreObjects();
     if (!scene) { return; }
-    this.el.object3D.remove(object.object3D);
-    scene.add(object.object3D);
-    this.el.overlayObject = object.object3D;
+    els = this.els = this.el.sceneEl.querySelectorAll(objects);
+    for (i = 0; i < els.length; ++i) {
+      if (!els[i].object3D) { continue; }
+      scene.add(els[i].object3D);
+    } 
+  },
+
+  render: function () {
+    var renderer = this.el.renderer;
+    var autoClear = renderer.autoClear;
+    renderer.autoClear = false;
+    renderer.clearDepth();
+    this.scene.visible = true;
+    this.el.effect.render(this.scene, this.el.camera);
+    // Hide objects so they are not rendered on first pass.
+    this.scene.visible = false;
+    renderer.autoClear = autoClear;
+  }, 
+
+  /* Return ownership to the a-scene THREE.Scene */
+  restoreObjects: function () {
+    var els = this.els;
+    var scene = this.scene;
+    var i;
+    if (!this.els) { return; }
+    for (i = 0; i < els.length; ++i) {
+      scene && scene.remove(els[i].object3D);
+      this.el.object3D.add(els[i].object3D);
+    } 
+  }, 
+
+  remove: function () {
+    this.restoreObjects();
   }
 });
 
@@ -76318,9 +76356,7 @@ module.exports.AScene = registerElement('a-scene', {
      */
     render: {
       value: function () {
-        var autoClear = this.renderer.autoClear;
         var effectComposer = this.effectComposer;
-        var overlayScene = this.overlayScene;
         var effect = this.effect;
 
         this.delta = this.clock.getDelta() * 1000;
@@ -76335,15 +76371,10 @@ module.exports.AScene = registerElement('a-scene', {
           effect.render(this.object3D, this.camera, this.renderTarget);
         }
 
-        if (overlayScene) {
-          this.renderer.autoClear = false;
-          this.renderer.clearDepth();
-          effect.render(overlayScene, this.camera);
-          this.renderer.autoClear = autoClear;
-        }
-
         if (this.isPlaying) { this.tock(this.time, this.delta, this.camera); }
 
+        this.components.overlay && this.components.overlay.render();
+
         effect.submitFrame();
       },
       writable: true
@@ -78180,7 +78211,7 @@ _dereq_('./core/a-mixin');
 _dereq_('./extras/components/');
 _dereq_('./extras/primitives/');
 
-console.log('A-Frame Version: 0.8.2 (Date 2018-09-19, Commit #b2131c876)');
+console.log('A-Frame Version: 0.8.2 (Date 2018-09-20, Commit #b2131c876)');
 console.log('three Version:', pkg.dependencies['three']);
 console.log('WebVR Polyfill Version:', pkg.dependencies['webvr-polyfill']);