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

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>