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

reduce sky segments

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-04 16:46:05 -07:00
parent 3e91ac70a3
commit a8f930b686
6 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/fonts/Teko-Bold.json
View File

File diff suppressed because one or more lines are too long

4
src/components/beams.js
View File

@@ -1,3 +1,5 @@
const ANIME = AFRAME.ANIME || AFRAME.anime;
AFRAME.registerComponent('beams', {
schema: {
poolSize: {default: 3}
@@ -29,7 +31,7 @@ AFRAME.registerComponent('beams', {
for (var i = 0; i < this.data.poolSize; i++) {
beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);
beam.visible = false;
beam.anim = AFRAME.anime({
beam.anim = ANIME({
targets: beam.scale,
x: 0.00001,
autoplay: false,

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

@@ -1,3 +1,4 @@
const ANIME = AFRAME.ANIME || AFRAME.anime;
var utils = require('../utils');
/**
@@ -17,7 +18,7 @@ AFRAME.registerComponent('song-preview-system', {
// anime.js animation to fade in volume.
this.volumeTarget = {volume: 0};
this.animation = AFRAME.anime({
this.animation = ANIME({
targets: this.volumeTarget,
delay: 250,
duration: 1500,

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

@@ -13,8 +13,8 @@ AFRAME.registerComponent('stage-colors', {
red: new THREE.TextureLoader().load('assets/img/mineenviro-red.jpg'),
blue: new THREE.TextureLoader().load('assets/img/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.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,
@@ -25,10 +25,11 @@ AFRAME.registerComponent('stage-colors', {
},
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'});
const red = this.data === 'red';
document.getElementById('backglow').setAttribute('material', 'color', red ? '#f10' : '#00acfc');
document.getElementById('sky').setAttribute('material', 'color', red ? '#f10' : '#00acfc');
this.el.setAttribute('background', '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];

1
src/index.html
View File

@@ -59,7 +59,6 @@
<img id="missRedImg" src="assets/img/missred.png">
<a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
<a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
<a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
<a-mixin id="textFont" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>

4
src/templates/stage.html
View File

@@ -1,4 +1,6 @@
<a-sky id="sky" src="#skyTexture" material="fog: false"></a-sky>
<a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
<a-sky id="sky" geometry="segmentsHeight: 16; segmentsWidth: 32" material="fog: false; src: #skyTexture"></a-sky>
<a-entity
id="audioAnalyser"