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

Add stage

Browse Source
This commit is contained in:
Diego Marcos
2018-09-12 14:08:11 -07:00
parent 2d58db4db1
commit 4d3b8ecb31
9 changed files with 396 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/stage/backglow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
assets/img/stage/sky.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 391 KiB

BIN
assets/img/stage/smoke.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

275
assets/models/backglow.obj Normal file
View File

@@ -0,0 +1,275 @@
# Blender v2.79 (sub 0) OBJ File: 'backglow.blend'
# www.blender.org
o Sphere
v 0.098757 -5.065215 0.815248
v 1.083916 -4.968185 0.815248
v 0.654964 -3.838736 -0.564526
v 2.031214 -4.680825 0.815248
v 0.791063 -2.297701 -1.420826
v 2.904250 -4.214178 0.815248
v 2.327130 -3.265578 -0.497443
v 3.669472 -3.586176 0.815248
v 4.297473 -2.820954 0.815248
v 4.764121 -1.947918 0.815248
v 1.328409 0.022565 -1.790354
v 2.186923 -1.093739 -1.434002
v 3.562454 -1.681348 -0.582879
v 5.051480 -1.000619 0.815248
v 5.148510 -0.015461 0.815248
v 5.051480 0.969696 0.815248
v 4.379599 0.406165 -0.180797
v 4.764120 1.916996 0.815248
v 2.144553 1.122739 -1.467709
v 3.298128 1.017525 -0.924407
v 4.297472 2.790031 0.815248
v 3.472711 2.655840 -0.114842
v 3.669471 3.555253 0.815248
v 2.904249 4.183253 0.815248
v 2.055791 3.310485 -0.565309
v 2.031213 4.649901 0.815248
v 0.183130 3.375538 -0.876072
v 1.083914 4.937260 0.815249
v 0.098757 5.034289 0.815248
v 0.295850 2.326391 -1.434002
v -0.008503 4.295462 -0.139675
v -0.886401 4.937259 0.815249
v -1.833699 4.649899 0.815249
v -2.706734 4.183252 0.815248
v 0.261898 -0.688767 -1.882204
v -0.354970 1.079932 -1.811419
v -1.815752 3.241281 -0.623231
v -3.471956 3.555250 0.815248
v -4.099957 2.790029 0.815248
v -1.590204 1.601876 -1.453680
v -3.467517 2.400620 -0.146349
v -4.566604 1.916993 0.815248
v -3.049379 1.313441 -0.864031
v -4.853963 0.969695 0.815248
v -2.251760 -0.062091 -1.421592
v -4.220560 0.409954 -0.079877
v -4.950993 -0.015462 0.815248
v -4.853962 -1.000620 0.815248
v -3.126690 -0.956991 -0.916875
v -3.984757 -1.254182 -0.150430
v -4.566602 -1.947918 0.815248
v -4.099955 -2.820953 0.815248
v -3.271872 -2.712983 -0.098776
v -3.471954 -3.586174 0.815248
v -2.706732 -4.214175 0.815248
v -0.934122 -0.705609 -1.776673
v -1.595481 -3.949479 -0.174256
v -1.833696 -4.680821 0.815248
v -1.363578 -1.797317 -1.479549
v -1.538550 -2.951828 -0.924405
v -0.886398 -4.968181 0.815248
vt 0.942378 0.257677
vt 0.783016 0.322957
vt 0.887242 0.174545
vt 0.999901 0.447927
vt 0.838340 0.466898
vt 0.982122 0.349040
vt 0.674279 0.422186
vt 0.999901 0.548356
vt 0.796863 0.635808
vt 0.670089 0.569519
vt 0.937697 0.733607
vt 0.976775 0.643596
vt 0.531333 0.676014
vt 0.556167 0.569539
vt 0.812344 0.881112
vt 0.709818 0.813207
vt 0.883981 0.814867
vt 0.506041 0.880319
vt 0.600590 0.754079
vt 0.451159 0.989423
vt 0.548284 0.988442
vt 0.412878 0.521713
vt 0.546867 0.472156
vt 0.263968 0.937523
vt 0.385278 0.806309
vt 0.355345 0.973967
vt 0.366026 0.624959
vt 0.285750 0.679865
vt 0.316087 0.474067
vt 0.196498 0.732911
vt 0.180739 0.546486
vt 0.246698 0.363268
vt 0.130509 0.386851
vt 0.489255 0.400879
vt 0.383469 0.349621
vt 0.388722 0.238913
vt 0.181836 0.112255
vt 0.221725 0.220164
vt 0.113422 0.181983
vt 0.351770 0.143260
vt 0.533530 0.318119
vt 0.352835 0.017181
vt 0.261019 0.055739
vt 0.599796 0.235620
vt 0.492969 0.107181
vt 0.672785 0.155524
vt 0.642616 0.971174
vt 0.730566 0.933669
vt 0.185901 0.880935
vt 0.019417 0.643107
vt 0.116640 0.812342
vt 0.060951 0.731458
vt 0.003611 0.448736
vt 0.000099 0.545999
vt 0.058566 0.261628
vt 0.022485 0.352533
vt 0.448737 0.000099
vt 0.642224 0.016589
vt 0.546618 0.000114
vt 0.732931 0.054818
vt 0.815055 0.108913
vn -0.1523 0.7410 0.6540
vn -0.0752 0.6274 0.7750
vn 0.0128 0.7447 0.6672
vn -0.4233 0.6357 0.6455
vn -0.3714 0.5234 0.7669
vn -0.2827 0.6948 0.6612
vn -0.1082 0.3753 0.9206
vn -0.5355 0.5160 0.6686
vn -0.5666 0.2651 0.7802
vn -0.3551 0.1800 0.9173
vn -0.6996 0.2842 0.6555
vn -0.6123 0.4239 0.6674
vn -0.3231 -0.2015 0.9246
vn -0.2046 -0.0157 0.9787
vn -0.7884 0.0150 0.6150
vn -0.6883 -0.0613 0.7228
vn -0.7316 0.1537 0.6642
vn -0.5505 -0.4240 0.7192
vn -0.5246 -0.1661 0.8349
vn -0.5274 -0.5522 0.6456
vn -0.6489 -0.4181 0.6357
vn 0.0663 -0.1731 0.9826
vn -0.0306 0.1241 0.9918
vn -0.2736 -0.6927 0.6672
vn -0.3153 -0.5392 0.7809
vn -0.4241 -0.6244 0.6559
vn -0.0422 -0.3797 0.9241
vn -0.0095 -0.5490 0.8358
vn 0.2785 -0.2727 0.9209
vn 0.0177 -0.7036 0.7103
vn 0.3087 -0.5362 0.7856
vn 0.5176 -0.2087 0.8298
vn 0.5767 -0.3956 0.7147
vn 0.1803 0.0925 0.9792
vn 0.3805 -0.0024 0.9248
vn 0.5212 0.1580 0.8386
vn 0.7709 0.0161 0.6367
vn 0.6975 -0.0722 0.7129
vn 0.7530 -0.1661 0.6367
vn 0.6767 0.2051 0.7070
vn 0.2396 0.2979 0.9240
vn 0.7045 0.3052 0.6408
vn 0.7548 0.1369 0.6414
vn 0.2637 0.4744 0.8399
vn 0.5384 0.4383 0.7197
vn 0.2681 0.6475 0.7133
vn -0.6870 -0.2906 0.6660
vn -0.7703 -0.1686 0.6150
vn -0.1657 -0.7270 0.6663
vn 0.2765 -0.6874 0.6716
vn -0.0041 -0.7907 0.6122
vn 0.1710 -0.7377 0.6531
vn 0.5202 -0.5495 0.6538
vn 0.4192 -0.6185 0.6646
vn 0.7061 -0.2767 0.6517
vn 0.6588 -0.4389 0.6110
vn 0.6486 0.4168 0.6369
vn 0.4374 0.6214 0.6500
vn 0.5286 0.5530 0.6440
vn 0.3004 0.7310 0.6126
vn 0.1242 0.7377 0.6636
s 1
f 2/1/1 3/2/2 1/3/3
f 6/4/4 7/5/5 4/6/6
f 7/5/5 5/7/7 3/2/2
f 8/8/8 7/5/5 6/4/4
f 13/9/9 12/10/10 7/5/5
f 10/11/11 13/9/9 9/12/12
f 19/13/13 11/14/14 12/10/10
f 15/15/15 17/16/16 14/17/17
f 22/18/18 20/19/19 17/16/16
f 23/20/20 22/18/18 21/21/21
f 11/14/14 36/22/22 35/23/23
f 26/24/24 25/25/25 24/26/26
f 30/27/27 36/22/22 19/13/13
f 27/28/28 30/27/27 25/25/25
f 40/29/29 36/22/22 30/27/27
f 31/30/30 37/31/31 27/28/28
f 43/32/32 40/29/29 37/31/31
f 41/33/33 43/32/32 37/31/31
f 36/22/22 56/34/34 35/23/23
f 45/35/35 56/34/34 36/22/22
f 49/36/36 45/35/35 43/32/32
f 47/37/37 46/38/38 44/39/39
f 50/40/40 49/36/36 46/38/38
f 59/41/41 56/34/34 45/35/35
f 51/42/42 50/40/40 48/43/43
f 60/44/44 59/41/41 49/36/36
f 53/45/45 60/44/44 49/36/36
f 57/46/46 60/44/44 53/45/45
f 57/46/46 3/2/2 60/44/44
f 35/23/23 12/10/10 11/14/14
f 13/9/9 8/8/8 9/12/12
f 7/5/5 12/10/10 5/7/7
f 13/9/9 14/17/17 17/16/16
f 12/10/10 20/19/19 19/13/13
f 3/2/2 4/6/6 7/5/5
f 22/18/18 18/47/47 21/21/21
f 17/16/16 20/19/19 13/9/9
f 15/15/15 16/48/48 17/16/16
f 16/48/48 18/47/47 17/16/16
f 22/18/18 24/26/26 25/25/25
f 20/19/19 25/25/25 19/13/13
f 22/18/18 25/25/25 20/19/19
f 19/13/13 36/22/22 11/14/14
f 25/25/25 28/49/49 31/30/30
f 25/25/25 30/27/27 19/13/13
f 25/25/25 31/30/30 27/28/28
f 31/30/30 33/50/50 37/31/31
f 28/49/49 29/51/51 31/30/30
f 29/51/51 32/52/52 31/30/30
f 30/27/27 37/31/31 40/29/29
f 37/31/31 38/53/53 41/33/33
f 33/50/50 34/54/54 37/31/31
f 46/38/38 42/55/55 44/39/39
f 38/53/53 39/56/56 41/33/33
f 39/56/56 42/55/55 41/33/33
f 40/29/29 45/35/35 36/22/22
f 43/32/32 45/35/35 40/29/29
f 41/33/33 46/38/38 43/32/32
f 46/38/38 48/43/43 50/40/40
f 46/38/38 49/36/36 43/32/32
f 53/45/45 51/42/42 52/57/57
f 49/36/36 59/41/41 45/35/35
f 50/40/40 53/45/45 49/36/36
f 53/45/45 55/58/58 57/46/46
f 52/57/57 54/59/59 53/45/45
f 5/7/7 60/44/44 3/2/2
f 55/58/58 58/60/60 57/46/46
f 58/60/60 61/61/61 57/46/46
f 59/41/41 35/23/23 56/34/34
f 59/41/41 5/7/7 35/23/23
f 3/2/2 61/61/61 1/3/3
f 35/23/23 5/7/7 12/10/10
f 13/9/9 7/5/5 8/8/8
f 13/9/9 10/11/11 14/17/17
f 12/10/10 13/9/9 20/19/19
f 3/2/2 2/1/1 4/6/6
f 22/18/18 17/16/16 18/47/47
f 22/18/18 23/20/20 24/26/26
f 25/25/25 26/24/24 28/49/49
f 31/30/30 32/52/52 33/50/50
f 30/27/27 27/28/28 37/31/31
f 37/31/31 34/54/54 38/53/53
f 46/38/38 41/33/33 42/55/55
f 46/38/38 47/37/37 48/43/43
f 53/45/45 50/40/40 51/42/42
f 53/45/45 54/59/59 55/58/58
f 5/7/7 59/41/41 60/44/44
f 3/2/2 57/46/46 61/61/61

17
src/components/materials.js Normal file
View File

@@ -0,0 +1,17 @@
AFRAME.registerSystem('materials', {
init: function () {
this.black = new THREE.MeshLambertMaterial({color: 0x000000, flatShading: true});
this.default = new THREE.MeshLambertMaterial({color: 0xff0000, flatShading: true});
this.neon = new THREE.MeshBasicMaterial({color: 0x9999ff, fog: false});
}
});
AFRAME.registerComponent('materials', {
schema: {
default: 'black',
oneOf: ['black', 'red', 'blueneon']
},
update: function () {
this.el.object3D.traverse(o => o.material = this.system[this.data]);
}
});

39
src/components/stage-colors.js Normal file
View File

@@ -0,0 +1,39 @@
AFRAME.registerComponent('stage-colors', {
schema: {
default: 'red',
oneOf: ['red', 'blue']
},
init: function () {
this.neonRed = new THREE.Color(0xff9999);
this.neonBlue = new THREE.Color(0x9999ff);
this.defaultRed = new THREE.Color(0xff0000);
this.defaultBlue = new THREE.Color(0x0000ff);
this.mineEnvMap = {
red: new THREE.TextureLoader().load('images/mineenviro-red.jpg'),
blue: new THREE.TextureLoader().load('images/mineenviro-blue.jpg')
};
this.mineColor = { red: new THREE.Color(0x070304), blue: new THREE.Color(0x030407) };
this.mineEmission = { red: new THREE.Color(0x090707), blue: new THREE.Color(0x070709) };
this.mineMaterial = new THREE.MeshStandardMaterial({
roughness: 0.38,
metalness: 0.48,
color: this.mineColor[this.data],
emissive: this.mineEmission[this.data],
envMap: this.mineEnvMap[this.data]
});
},
update: function () {
var red = (this.data == 'red');
document.getElementById('backglow').setAttribute('material', {color: red ? '#f10' : '#00acfc'});
document.getElementById('sky').setAttribute('material', {color: red ? '#770100': '#15252d'});
this.el.sceneEl.setAttribute('fog', {color: red ? '#a00' : '#007cb9'});
this.el.sceneEl.systems.materials.neon.color = red ? this.neonRed : this.neonBlue;
this.el.sceneEl.systems.materials.default.color = red ? this.defaultRed : this.defaultBlue;
this.mineMaterial.color = this.mineColor[this.data];
this.mineMaterial.emissive = this.mineEmission[this.data];
this.mineMaterial.envMap = this.mineEnvMap[this.data];
}
});

14
src/index.html
View File

@@ -7,14 +7,22 @@
</head>
<body>
<a-scene
effect-bloom="strength: 0.7"
bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty"
bind__song="challengeId: challenge.id; isPlaying: !menu.active && !challenge.isLoading"
bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
console-shortcuts
effect-bloom="strength: 0.7"
proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficulties"
search>
search
stage-colors="blue">
<a-assets timeout="10000">
<!-- Stage -->
<a-image id="skyTexture" src="assets/img/stage/sky.jpg"></a-image>
<a-image id="smokeTexture" src="assets/img/stage/smoke.png"></a-image>
<a-image id="backglowTexture" src="assets/img/stage/backglow.png"></a-image>
<a-asset-item id="backglow-obj" src="assets/models/backglow.obj"></a-asset-item>
<a-mixin id="laser" laser geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
<audio id="hoverSound" src="/assets/sounds/hover.ogg"></audio>
<img id="gridImg" src="assets/img/grid.png">
<img id="playImg" src="assets/img/play.png">
@@ -26,7 +34,7 @@
</a-assets>
<a-entity id="container" bind__recenter="enabled: menu.active" recenter="target: #menu">
{% include './templates/environment.html' %}
{% include './templates/stage.html' %}
{% include './templates/gameUi.html' %}
{% include './templates/menu.html' %}
</a-entity>

54
src/templates/stage.html Normal file
View File

@@ -0,0 +1,54 @@
<a-sky id="sky" src="#skyTexture" material="fog: false"></a-sky>
<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 audioanalyser="src: #song; fftSize: 128; enableBeatDetection: false; enableLevels: false; enableWaveform: false" analyser="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 4"></a-entity>
<!-- corridor -->
<a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>
<a-entity geometry="height:20; depth:0.3; width:0.3" materials="black" position="1.9 -9.97 -7"></a-entity>
<a-entity geometry="height:20; depth:0.3; width:0.3" materials="black" position="-1.9 -9.97 -7"></a-entity>
<a-entity geometry="height: 0.3; depth: 50; width: 0.3" position="1.9 -1 -31.85" materials="black"></a-entity>
<a-entity geometry="height: 0.3; depth: 50; width: 0.3" position="-1.9 -1 -31.85" materials="black"></a-entity>
<!-- corridor handrail -->
<a-entity geometry="height:21.5; depth:0.2; width:0.2" materials="black" position="3.5 -10 -7"></a-entity>
<a-entity geometry="height:21.5; depth:0.2; width:0.2" materials="black" position="-3.5 -10 -7"></a-entity>
<a-entity geometry="height: 0.05; depth: 50; width: 0.05" position="3.5 0.65 -32" materials="neon"></a-entity>
<a-entity geometry="height: 0.05; depth: 50; width: 0.05" position="-3.5 0.65 -32" materials="neon"></a-entity>
<!-- neons on sides -->
<a-entity geometry="height: 0.05; depth: 100; width: 0.05" position="4.5 0.65 -32" materials="neon"></a-entity>
<a-entity geometry="height: 0.05; depth: 100; width: 0.05" position="-4.5 0.65 -32" materials="neon"></a-entity>
<!-- lasers left -->
<a-entity class="laser" mixin="laser" position=" -6 2.3 -40"></a-entity>
<a-entity class="laser" mixin="laser" position="-10 0 -38"></a-entity>
<a-entity class="laser" mixin="laser" position="-14 -3 -36"></a-entity>
<!-- lasers right -->
<a-entity class="laser" mixin="laser" position=" 6 4 -40"></a-entity>
<a-entity class="laser" mixin="laser" position="10 2 -38"></a-entity>
<a-entity class="laser" mixin="laser" position="14 -1.5 -36"></a-entity>
<a-entity geometry="primitive: cylinder; radius: 10; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: false; depthTest: false; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.4 0">
<a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="200000" easing="linear" repeat="indefinite"></a-animation>
</a-entity>
<a-entity geometry="primitive: cylinder; radius: 20; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: false; depthTest: false; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.8 0">
<a-animation attribute="rotation" from="0 0 0" to="0 -360 0" dur="243000" easing="linear" repeat="indefinite"></a-animation>
</a-entity>
<a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
</a-entity>
<a-entity id="logo" position="0 5.0 -7.5">
<a-entity mixin="font" text="width: 35; value: SUPER SABER; align: center; color: #ff666a"></a-entity>
<a-entity mixin="font" text="width: 35; value: SUPER SABER; align: center; color: #ff1a1f" position="0 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: SUPER SABER; align: center; color: #0a0228" position="0 0 -0.2">
</a-entity>
</a-entity>

1
vendor/aframe.effects.js vendored
View File

@@ -81688,7 +81688,6 @@ THREE.VREffect = function( renderer, onError ) {
}
if ( renderer.autoClear || forceClear ) {
debugger;
renderer.clear();
}