beat warp in

src/components/beat-loader.js

@@ -1,4 +1,7 @@
-var utils = require('../utils');
+import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat';
+import utils from '../utils';
+
+const WARMUP_TIME = (BEAT_WARMUP_OFFSET / BEAT_WARMUP_SPEED) * 1000;  // ms.
 
 /**
  * Load beat data (all the beats and such).
@@ -30,7 +33,6 @@ AFRAME.registerComponent('beat-loader', {
 
   init: function () {
     this.audioAnalyserEl = document.getElementById('audioanalyser');
-    this.beams = document.getElementById('beams').components.beams;
     this.beatData = null;
     this.beatDataProcessed = false;
     this.beatContainer = document.getElementById('beatContainer');
@@ -148,7 +150,8 @@ AFRAME.registerComponent('beat-loader', {
     if (this.beatsTimeOffset !== undefined &&
         this.songCurrentTime !== this.el.components.song.context.currentTime) {
       this.songCurrentTime = this.el.components.song.context.currentTime;
-      this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000;
+      this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000 +
+                       WARMUP_TIME;
     }
 
     notes = this.beatData._notes;
@@ -225,8 +228,6 @@ AFRAME.registerComponent('beat-loader', {
         this.orientations[noteInfo._cutDirection]);
 
       beatEl.play();
-
-      this.beams.newBeam(color, beatEl.object3D.position);
     };
   })(),
 

src/components/beat.js

@@ -1,6 +1,7 @@
-var SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
+import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat';
 
-var auxObj3D = new THREE.Object3D();
+const auxObj3D = new THREE.Object3D();
+const SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
 
 /**
  * Create beat from pool, collision detection, clipping planes.
@@ -38,6 +39,7 @@ AFRAME.registerComponent('beat', {
 
   init: function () {
     this.backToPool = false;
+    this.beams = document.getElementById('beams').components.beams;
     this.beatBoundingBox = new THREE.Box3();
     this.cutDirection = new THREE.Vector3();
     this.destroyed = false;
@@ -47,6 +49,7 @@ AFRAME.registerComponent('beat', {
     this.returnToPoolTimer = 800;
     this.rotationAxis = new THREE.Vector3();
     this.saberEls = this.el.sceneEl.querySelectorAll('[saber-controls]');
+    this.startPositionZ = undefined;
     this.rightCutPlanePoints = [
       new THREE.Vector3(),
       new THREE.Vector3(),
@@ -83,9 +86,11 @@ AFRAME.registerComponent('beat', {
   },
 
   play: function () {
+    this.blockEl.object3D.visible = true;
     this.destroyed = false;
     this.el.object3D.visible = true;
-    this.blockEl.object3D.visible = true;
+    this.startPositionZ = this.el.object3D.position.z;
+    this.el.object3D.position.z -= BEAT_WARMUP_OFFSET;
   },
 
   tock: function (time, timeDelta) {
@@ -95,7 +100,20 @@ AFRAME.registerComponent('beat', {
       // Only check collisions when close.
       const collisionZThreshold = -4;
       if (this.el.object3D.position.z > collisionZThreshold) { this.checkCollisions(); }
-      this.el.object3D.position.z += this.data.speed * (timeDelta / 1000);
+
+      // Move.
+      if (this.el.object3D.position.z < this.startPositionZ) {
+        // Warm up / warp in.
+        this.el.object3D.position.z += BEAT_WARMUP_SPEED * (timeDelta / 1000);
+        if (this.el.object3D.position.z >= this.startPositionZ) {
+          this.beams.newBeam(this.data.color, this.el.object3D.position);
+        }
+      } else {
+        // Standard moving.
+        this.el.object3D.position.z += this.data.speed * (timeDelta / 1000);
+      }
+
+      // Check.
       this.backToPool = this.el.object3D.position.z >= 2;
       if (this.backToPool) { this.missHit(); }
     }

src/constants/beat.js

@@ -0,0 +1,2 @@
+export const BEAT_WARMUP_OFFSET = 100;
+export const BEAT_WARMUP_SPEED = 250;