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

wired all scene sync events

Browse Source
This commit is contained in:
Diego F. Goberna
2018-10-16 00:20:33 +02:00
parent 62aa0e58b8
commit a507517516
9 changed files with 447 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/beat-loader.js
View File

@@ -4,6 +4,7 @@ var utils = require('../utils');
* Load beat data (all the beats and such).
*/
AFRAME.registerComponent('beat-loader', {
dependencies: ['stage-colors'],
schema: {
beatAnticipationTime: {default: 2.0},
beatSpeed: {default: 4.0},
@@ -27,7 +28,14 @@ AFRAME.registerComponent('beat-loader', {
this.songCurrentTime = undefined;
this.onKeyDown = this.onKeyDown.bind(this);
this.stageColors = this.el.components['stage-colors'];
this.twister = document.getElementById('twister');
this.leftStageLasers = document.getElementById('leftStageLasers');
this.rightStageLasers = document.getElementById('rightStageLasers');
this.el.addEventListener('cleargame', this.clearBeats.bind(this));
//this.addDebugControls();
},
update: function (oldData) {
@@ -223,30 +231,41 @@ AFRAME.registerComponent('beat-loader', {
},
generateEvent: function (event) {
console.log(event);
switch(event._type) {
case 0: // lasers color
case 1: // tunnel neon color
document.getElementById('tunnelNeon').setAttribute('colorPreset', event._value);
document.getElementById('tunnelNeon').emit('pulse');
break;
case 2: document.getElementById('leftStageLasers').setAttribute('colorPreset', event._value);
break;
case 3: document.getElementById('rightStageLasers').setAttribute('colorPreset', event._value);
break;
case 0:
this.stageColors.setColor('fog', event._value);
this.stageColors.setColor('sky', event._value);
this.stageColors.setColor('backglow', event._value);
break;
case 1:
this.stageColors.setColor('tunnelNeon', event._value);
break;
case 2:
this.stageColors.setColor('leftStageLaser0', event._value);
this.stageColors.setColor('leftStageLaser1', event._value);
this.stageColors.setColor('leftStageLaser2', event._value);
break;
case 3:
this.stageColors.setColor('rightStageLaser0', event._value);
this.stageColors.setColor('rightStageLaser1', event._value);
this.stageColors.setColor('rightStageLaser2', event._value);
break;
case 4:
document.getElementById('floor').emit('pulse');
document.getElementById('stageNeon').emit('pulse');
break;
this.stageColors.setColor('floor', event._value);
this.stageColors.setColor('stageNeon', event._value);
break;
case 8:
case 9: document.getElementById('twister').components.twister.pulse(event._value);
break;
case 12: document.getElementById('leftStageLasers').components['stage-lasers'].pulse(event._value);
console.log('left laser', event._value);
break;
case 13: document.getElementById('rightStageLasers').components['stage-lasers'].pulse(event._value);
console.log('right laser', event._value);
break;
this.twister.components.twister.pulse(event._value);
break;
case 9:
this.twister.components.twister.zoom(event._value);
break;
case 12:
this.leftStageLasers.components['stage-lasers'].pulse(event._value);
break;
case 13:
this.rightStageLasers.components['stage-lasers'].pulse(event._value);
break;
}
},
@@ -277,6 +296,56 @@ AFRAME.registerComponent('beat-loader', {
child.components.wall.returnToPool(true);
}
}
},
addDebugControls: function () {
var self = this;
var currControl = 0;
function addControl(i, name, type){
var div = document.createElement('div');
div.style.position = 'absolute';
div.id = 'stagecontrol' + i;
div.style.width = '100px';
div.style.height = '30px';
div.style.top = type === 'element' ? '20px' : '70px';
div.style.background = '#000';
div.style.color = '#fff';
div.style.zIndex = 999999999;
div.style.padding = '5px';
div.style.font = '14px sans-serif';
div.style.textAlign = 'center';
div.style.cursor = 'pointer';
div.style.left = (20 + i * 120)+'px';
div.innerHTML = name;
if (type === 'element') {
div.addEventListener('click', () => {
document.getElementById('stagecontrol' + currControl).style.background = '#000';
div.style.background = '#66f';
currControl = i;
} )
} else {
div.addEventListener('click', () => { self.generateEvent({_type: currControl, _value: i}) })
}
document.body.appendChild(div);
}
[ 'sky',
'tunnelNeon',
'leftStageLasers',
'rightStageLasers',
'floor'].forEach((id, i) => {addControl(i, id, 'element'); });
[
'off',
'blue',
'blue',
'bluefade',
'',
'red',
'red',
'redfade'
].forEach((id, i) => {addControl(i, id, 'value'); });
;
}
});

28
src/components/stage-colors.js
View File

@@ -25,9 +25,27 @@ AFRAME.registerComponent('stage-colors', {
});
this.sky = document.getElementById('sky');
this.backglow = document.getElementById('backglow');
this.smoke1 = document.getElementById('smoke1');
this.smoke2 = document.getElementById('smoke2');
this.auxColor = new THREE.Color();
let $ = function (id) { return document.getElementById(id); };
this.targets = {};
[ 'fog',
'sky',
'backglow',
'tunnelNeon',
'leftStageLaser0',
'leftStageLaser1',
'leftStageLaser2',
'rightStageLaser0',
'rightStageLaser1',
'rightStageLaser2',
'floor',
'stageNeon'].forEach((id) => {
this.targets[id] = id == 'fog' ? this.el.sceneEl : document.getElementById(id);
});
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
},
update: function (oldData) {
@@ -46,5 +64,11 @@ AFRAME.registerComponent('stage-colors', {
this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
this.mineMaterial.needsUpdate = true;
},
setColor: function (target, code) {
var mesh = this.targets[target].getObject3D('mesh');
if (mesh) mesh.material.opacity = 1;
this.targets[target].emit('color' + this.colorCodes[code], {}, false);
}
});

2
src/components/stage-lasers.js
View File

@@ -13,7 +13,7 @@ AFRAME.registerComponent('stage-lasers', {
},
pulse: function (speed) {
this.speed = speed / 3;
this.speed = speed / 5;
},
tick: function (time, delta) {

39
src/components/twister.js
View File

@@ -12,16 +12,23 @@ AFRAME.registerComponent('twister', {
init: function () {
this.currentTwist = 0;
this.animate = false;
this.zoomProgress = 0;
},
pulse: function (twist) {
if (!this.data.enabled) { return; }
if (twist == 0) { twist = 0.1 + Math.random() * 0.25; }
else twist = Math.min(twist, 0.5);
if (twist == 0) { twist = 0.05 + Math.random() * 0.15; }
else twist = Math.min(twist * 0.5, 0.5);
twist *= Math.random() < 0.5 ? -1 : 1; // random direction
this.el.setAttribute('twister', {twist: twist});
},
zoom: function () {
if (!this.data.enabled) { return; }
this.zoomProgress = 0.01;
this.animate = true;
},
update: function (oldData) {
var radius = 4;
var segment;
@@ -65,16 +72,28 @@ AFRAME.registerComponent('twister', {
tick: function (time, delta) {
if (!this.animate) { return; }
if (Math.abs(this.data.twist - this.currentTwist) < 0.001) {
delta *= 0.001;
this.currentTwist += (this.data.twist - this.currentTwist) * delta;
var child = this.el.object3D.children[0];
var zoom = this.zoomProgress ? Math.sin(this.zoomProgress * Math.PI) * 0.4 : 0;
while (child) {
child.rotation.y = this.currentTwist;
child.position.y = this.data.positionIncrement + zoom;
child = child.children[0];
}
if (this.zoomProgress > 0) {
this.zoomProgress += delta;
if (this.zoomProgress >= 1) {
this.zoomProgress = 0;
}
}
if (Math.abs(this.data.twist - this.currentTwist) < 0.001 && this.zoomProgress == 0){
this.animate = false;
}
this.currentTwist += (this.data.twist - this.currentTwist) * delta * 0.001;
var child = this.el.object3D.children[0];
while (child) {
child.rotation.y = this.currentTwist;
child = child.children[0];
}
}
});