diff --git a/assets/sounds/introSong.ogg b/assets/sounds/introSong.ogg new file mode 100644 index 0000000..c374af4 Binary files /dev/null and b/assets/sounds/introSong.ogg differ diff --git a/package.json b/package.json index 69c5c66..a63029e 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dependencies": { "aframe-animation-component": "^5.1.0", "aframe-animation-timeline-component": "^1.3.1", + "aframe-audioanalyser-component": "^3.0.3", "aframe-cubemap-component": "^0.1.2", "aframe-event-decorators": "^1.0.2", "aframe-event-set-component": "^4.0.1", diff --git a/src/components/analyzer.js b/src/components/analyzer.js new file mode 100644 index 0000000..c87c6a1 --- /dev/null +++ b/src/components/analyzer.js @@ -0,0 +1,46 @@ +AFRAME.registerComponent('analyser', { + dependencies: ['audioanalyser'], + schema: { + height: {default: 1.0}, + thickness: {default: 0.1}, + separation: {default: 0.3}, + scale: {default: 4.0}, + mirror: {default: 3} + }, + + init: function () { + this.analyser = this.el.components.audioanalyser; + this.columns = null; + var material = this.el.sceneEl.systems.materials.black; + var geometry = new THREE.BoxBufferGeometry(); + for (var i = 0; i < this.analyser.data.fftSize; i++) { + for (var side = 0; side < 2; side++) { + var column = new THREE.Mesh(geometry, material); + this.el.object3D.add(column); + } + } + this.columns = this.el.object3D.children; + }, + + update: function () { + var z = 0; + for (var i = 0; i < this.columns.length; i++) { + this.columns[i].position.x = ((i % 2) * 2 - 1) * this.data.mirror; + this.columns[i].position.z = z; + this.columns[i].scale.set(this.data.thickness, this.data.height, this.data.thickness); + z -= this.data.separation; + } + }, + + tick: function () { + var v; + var height = this.data.height; + var n = this.columns.length / 2; + + for (var i = 0; i < n; i++) { + v = height + this.analyser.levels[i] / 256.0 * this.data.scale; + this.columns[i * 2 + 0].scale.y = v; + this.columns[i * 2 + 1].scale.y = v; + } + } +}); diff --git a/src/index.html b/src/index.html index 8bc6fc0..8694c2e 100644 --- a/src/index.html +++ b/src/index.html @@ -24,6 +24,8 @@ + + diff --git a/src/index.js b/src/index.js index 2709819..2c527b9 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ require('babel-polyfill'); function requireAll (req) { req.keys().forEach(req); } require('aframe-animation-component'); +require('aframe-audioanalyser-component'); require('aframe-cubemap-component'); require('aframe-event-set-component'); require('aframe-haptics-component'); diff --git a/src/templates/stage.html b/src/templates/stage.html index e085b53..e93f10d 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -5,7 +5,7 @@ - +