diff --git a/assets/img/beam.png b/assets/img/beam.png
new file mode 100644
index 0000000..b3cf1aa
Binary files /dev/null and b/assets/img/beam.png differ
diff --git a/package-lock.json b/package-lock.json
index e039bd4..d02125e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,9 +95,9 @@
"integrity": "sha512-mVxIH5qjik3qnbmeuXnYWFyKkcdLdZEQIFIFky1Z3QY8gZFsbCgocImwAx9UV9DTsIywa/lt3nXyNrpgOQgNCg=="
},
"aframe-audioanalyser-component": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.0.tgz",
- "integrity": "sha512-piyQ6Ui8AmojGEWUx1LpsX2K7R0WiUzeehea699mAf3oE+BxGyDPNlFvi0ti3t9cdhj6ybvySu7xKRZ3f4llyA=="
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.1.tgz",
+ "integrity": "sha512-jTkt9umD4SoRmW6vlJfm2zG9fV8pzecNzTdJYn12w8hpZ0lp3BtFSKqTDy0RE3dqAsDJo9AU72niZAu8w3NeeA=="
},
"aframe-cubemap-component": {
"version": "0.1.4",
diff --git a/src/components/beams.js b/src/components/beams.js
new file mode 100644
index 0000000..63001ea
--- /dev/null
+++ b/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; }
+ });
+ }
+
+});
\ No newline at end of file
diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js
index c619bce..259b068 100644
--- a/src/components/beat-loader.js
+++ b/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 = {
diff --git a/src/index.html b/src/index.html
index b5d2963..8b5ffae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,9 +18,9 @@
effect-bloom="strength: 1"
intro-song
overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh']"
- pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
- pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
- pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
+ pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
+ pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
+ pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
search
@@ -49,6 +49,7 @@
+ 
diff --git a/src/templates/stage.html b/src/templates/stage.html
index 143f1bc..1e8335b 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -49,6 +49,8 @@
+
+