juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[npm bump] audio floor beat, split audioanalyser to separate entity

Browse Source
This commit is contained in:
Kevin Ngo
2018-09-25 05:58:16 -07:00
parent 0061a781a4
commit 9e75eefc43
6 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -82,9 +82,9 @@
}
},
"aframe-animation-component": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.1.tgz",
"integrity": "sha512-EO049MCScYCUbzqsNqw4tiRjp781BOuySWitElarH4ysH+orlb7vxEgfwY8fgShwBgAUdY9vtSTc6jzjJwy1kA==",
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.2.tgz",
"integrity": "sha512-DGUsRGB6TaN0rRKGYRrU0M1eblhpnMMYR1Vhulh0d5TxQRNszWJ5I1aHB/YW6wcj0gO89hLabSe5Is5NFpUeGg==",
"requires": {
"animejs": "2.2.0"
}
@@ -148,9 +148,9 @@
"from": "github:supermedium/aframe-particleplayer-component#master"
},
"aframe-proxy-event-component": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/aframe-proxy-event-component/-/aframe-proxy-event-component-1.1.1.tgz",
"integrity": "sha512-1lWviitmCgNJDxDOA5x4wvtAp6Y4k1Plkrd5GEDHCu3ybDKSbOfE2aPXOCm0srs7VcwrYsLlqzMKJMrw/5sxyA=="
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/aframe-proxy-event-component/-/aframe-proxy-event-component-2.1.0.tgz",
"integrity": "sha512-FJ1+ZQLsETYoZbNwCe3l9xkakOHPYnBgDIE4YJMpWvqiFjiq0+BY6VuFWraZDdluul78b/d+UXIXmdd1JZRYqg=="
},
"aframe-slice9-component": {
"version": "1.0.0",

4
package.json
View File

@@ -6,7 +6,7 @@
"start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000"
},
"dependencies": {
"aframe-animation-component": "^5.1.1",
"aframe-animation-component": "^5.1.2",
"aframe-animation-timeline-component": "^1.3.1",
"aframe-audioanalyser-component": "^4.0.0",
"aframe-cubemap-component": "^0.1.2",
@@ -18,7 +18,7 @@
"aframe-orbit-controls": "^1.2.0",
"aframe-particle-system-component": "^1.0.11",
"aframe-particleplayer-component": "github:supermedium/aframe-particleplayer-component#master",
"aframe-proxy-event-component": "^1.1.1",
"aframe-proxy-event-component": "^2.1.0",
"aframe-slice9-component": "^1.0.0",
"aframe-state-component": "^5.0.0-beta6",
"aframe-super-keyboard": "2.0.2",

3
src/components/audio-columns.js
View File

@@ -12,6 +12,7 @@ AFRAME.registerComponent('audio-columns', {
dependencies: ['audioanalyser'],
schema: {
analyser: {type: 'selector', default: '#audioanalyser'},
height: {default: 1.0},
mirror: {default: 3},
scale: {default: 4.0},
@@ -20,7 +21,7 @@ AFRAME.registerComponent('audio-columns', {
},
init: function () {
this.analyser = this.el.components.audioanalyser;
this.analyser = this.data.analyser.components.audioanalyser;
// Number of levels is half the FFT size.
this.frequencyBinCount = this.analyser.data.fftSize / 2;

2
src/components/song-preview.js
View File

@@ -161,8 +161,8 @@ AFRAME.registerComponent('song-preview-system', {
},
updateAnalyser: function () {
document.getElementById('audioAnalyser').setAttribute('audioanalyser', 'src', this.audio);
document.getElementById('introSong').pause();
document.getElementById('audioColumns').setAttribute('audioanalyser', 'src', this.audio);
},
/**

2
src/index.html
View File

@@ -36,7 +36,7 @@
<img id="backglowTexture" src="assets/img/stage/backglow.png">
<img id="cursorMeshImg" src="assets/models/laser/laser.png">
<img id="downIconImg" src="assets/img/downIcon.png">
<img id="floor" src="assets/img/stage/floor.png">
<img id="floorImg" src="assets/img/stage/floor.png">
<img id="gridImg" src="assets/img/grid.png">
<img id="playImg" src="assets/img/play.png">
<img id="skyTexture" src="assets/img/stage/sky.jpg">

27
src/templates/stage.html
View File

@@ -1,11 +1,19 @@
<a-sky id="sky" src="#skyTexture" material="fog: false"></a-sky>
<a-entity
id="audioAnalyser"
audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000"
proxy-event="event: audioanalyser-beat; to: #logolight, #floor"></a-entity>
<a-entity id="stage">
<a-entity id="backglow" obj-model="obj: #backglow-obj" position="0 0 -50" scale="20 20 20" material="shader: flat; transparent: true; fog: false; color: #f00; src:#backglowTexture; opacity: 0.8"></a-entity>
<a-entity id="twister" twister position="0 0 -60" rotation="90 0 0"></a-entity>
<a-entity id="audioColumns" audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000" audio-columns="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 1" proxy-event="event: audioanalyser-beat; to: #logolight"></a-entity>
<a-entity
id="audioColumns"
audio-columns="analyser: #audioAnalyser; height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45"
position="0 -17 1"></a-entity>
<!-- Corridor. -->
<a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>
@@ -46,14 +54,19 @@
<a-entity id="logolight"
position="0 6 0"
light="type: spot; penumbra: 1; intensity: 5; angle: 20"
animation="property: rotation; from: 0 50 0; to: 0 -50 0; dur:300; easing: linear; startEvents: audioanalyser-beat"
></a-entity>
animation="property: rotation; from: 0 50 0; to: 0 -50 0; dur:300; easing: linear; startEvents: audioanalyser-beat"></a-entity>
<a-entity id="logosparks" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 600; on: logoflicker" position="-2.8 5.5 -7.2"></a-entity>
<a-entity id="logo" position="0 6 -7.5" rotation="90 0 0">
<a-entity obj-model="obj:#logoback-obj" material="color: #001B29"></a-entity>
<a-entity obj-model="obj:#logofront-obj" material="color: #e81e23"></a-entity>
<a-entity obj-model="obj:#logofront-u-obj" material="color: #e81e23" logoflicker="delay: 1200"></a-entity>
<a-entity obj-model="obj: #logoback-obj" material="color: #001B29"></a-entity>
<a-entity obj-model="obj: #logofront-obj" material="color: #e81e23"></a-entity>
<a-entity obj-model="obj: #logofront-u-obj" material="color: #e81e23" logoflicker="delay: 1200"></a-entity>
</a-entity>
<a-entity geometry="primitive: plane; width: 3; height: 3" material="shader: flat; src: #floor" rotation="-90 0 0"></a-entity>
<a-entity
id="floor"
animation__beat="property: components.material.material.color; type: color; to: #FFF; dur: 250; easing: linear; startEvents: audioanalyser-beat"
animation="property: components.material.material.color; type: color; to: #BBB; dur: 250; easing: linear; startEvents: animationcomplete__beat"
geometry="primitive: plane; width: 3; height: 3"
material="color: #BBB; shader: flat; src: #floorImg"
rotation="-90 0 0"></a-entity>
</a-entity>