step back message (fixes #93)

src/components/stepback.js

@@ -0,0 +1,31 @@
+AFRAME.registerComponent('stepback', {
+  init: function () {
+    this.message = document.getElementById('stepback');
+    this.camera = document.getElementById('camera');
+    this.lastTime = 0;
+    this.limit =  - (this.el.getAttribute('geometry').height / 2 - 0.6);
+    this.throttling = 300;
+  },
+
+  tick: function (time, delta) {
+    if (time - this.lastTime < this.throttling) { return; }
+
+    var camPos = this.camera.object3D.position;
+    var msgPos = this.message.object3D.position;
+
+    if (camPos.z < this.limit) {
+      this.throttling = 20;
+      this.message.object3D.visible = true;
+      this.message.getObject3D('mesh').material.opacity = 1 - Math.abs(camPos.z - msgPos.z);
+      msgPos.x = camPos.x;
+      msgPos.y = camPos.y;
+    }
+    else {
+      this.message.object3D.visible = false;
+      this.throttling = 300;
+    }
+
+    this.lastTime = time;
+  }
+
+});

src/index.html

@@ -28,7 +28,7 @@
       effect-bloom="strength: 1"
       gpu-preloader
       loading-screen="backgroundColor: #000;"
-      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu"
+      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu, #stepback"
       pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
@@ -79,6 +79,7 @@
         <img id="noiseTexture" src="assets/img/noise.png">
         <img id="neonImg" src="assets/img/neon.png">
         <img id="sparkImg" src="assets/img/spark.png">
+        <img id="stepbackImg" src="assets/img/stepback.png">
 
         <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
         <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
@@ -231,12 +232,15 @@
         {{ saber('right', 'left', '#78AAFF', 'cyan') }}
       </a-entity>
 
+      <a-entity id="stepback" geometry="primitive: plane; width: 0.5; height: 0.25;" position="0 1.6 -1.55" material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0;"></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"
                   bind__cursor-mesh="active: menuActive"></a-entity>
       {% endif %}
+
     </a-scene>
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>

src/templates/stage.html

@@ -152,5 +152,6 @@
     id="floor" mixin="neonAnimation"
     geometry="primitive: plane; width: 3; height: 3"
     material="color: #AAF; shader: flat; src: #floorImg"
-    rotation="-90 0 0"></a-entity>
+    rotation="-90 0 0"
+    stepback></a-entity>
 </a-entity>