beam effect on new blocks

src/components/beams.js

@@ -0,0 +1,62 @@
+AFRAME.registerComponent('beams', {
+  schema: {
+    poolSize: {default: 10}
+  },
+  init: function () {
+    var redMaterial;
+    var blueMaterial;
+    var materialOptions;
+    var geo;
+    var beam;
+
+    this.redBeams = [];
+    this.blueBeams = [];
+    this.currentRed = 0;
+    this.currentBlue = 0;
+
+    materialOptions = {
+      color: 0xaa3333,
+      map: new THREE.TextureLoader().load('assets/img/beam.png'),
+      transparent: true,
+      blending: THREE.AdditiveBlending
+    };
+    redMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    materialOptions.color = 0x4444cc;
+    blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    geo = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
+
+    for (var j = 0; j < 2; j++) {
+      for (var i = 0; i < this.data.poolSize; i++) {
+        beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);
+        beam.visible = false;
+        this.el.object3D.add(beam);
+        this[j === 0 ? 'redBeams' : 'blueBeams'].push(beam);
+      }
+    }
+  },
+
+  newBeam: function (color, position) {
+    var beam;
+    if (color === 'red') {
+      beam = this.redBeams[this.currentRed];
+      this.currentRed = (this.currentRed + 1) % this.redBeams.length;
+      beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0); // z offset to avoid z-fighting
+    } else {
+      beam = this.blueBeams[this.currentBlue];
+      this.currentBlue = (this.currentBlue + 1) % this.blueBeams.length;
+      beam.position.set(position.x, position.y, position.z + this.currentBlue / 50.0);
+    }
+
+    beam.visible = true;
+    beam.scale.x = 1;
+
+    AFRAME.anime({
+      targets: beam.scale,
+      x: 0,
+      duration: 300,
+      easing: 'easeInCubic',
+      complete: (anim) => { beam.visible = false; }
+    });
+  }
+
+});

src/components/beat-loader.js

@@ -15,6 +15,10 @@ AFRAME.registerComponent('beat-loader', {
   horizontalPositions: [-0.60, -0.25, 0.25, 0.60],
   verticalPositions: [1.00, 1.35, 1.70],
 
+  init: function () {
+    this.beams = document.getElementById('beams').components['beams'];
+  },
+
   update: function () {
     if (!this.data.challengeId || !this.data.difficulty) { return; }
     this.loadBeats();
@@ -122,6 +126,8 @@ AFRAME.registerComponent('beat-loader', {
       el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
       el.play();
 
+      this.beams.newBeam(color, el.object3D.position);
+
       if (this.first) { return; }
 
       this.first = {