diff --git a/src/components/logoflicker.js b/src/components/logoflicker.js index 9561c57..137e938 100644 --- a/src/components/logoflicker.js +++ b/src/components/logoflicker.js @@ -1,29 +1,49 @@ AFRAME.registerComponent('logoflicker', { dependencies: ['text'], + schema: { - default: 1000.0, + delay: {default: 1000.0}, }, + init: function () { - this.defaultColor = this.el.components['text'].data.color; + this.setOff = this.setOff.bind(this); + this.setOn = this.setOn.bind(this); + + this.defaultColor = new THREE.Color().setStyle(this.el.components.text.data.color); + this.color = new THREE.Color().setStyle('#0A0228'); + this.colorUniform = this.el.components.text.material.uniforms.color.value; + this.sparks = document.getElementById('logosparks'); this.sparkPositions = [ - { position: new THREE.Vector3(0, 0.1, 0) }, - { position: new THREE.Vector3(0.5, 1.2, 0) }, - { position: new THREE.Vector3(0, 1.2, 0) } + {position: new THREE.Vector3(0, 0.1, 0)}, + {position: new THREE.Vector3(0.5, 1.2, 0)}, + {position: new THREE.Vector3(0, 1.2, 0)} ]; + this.setOn(); }, - setOff: function () { - this.el.setAttribute('text', {color: '#0a0228'}); - this.sparks.emit('flicker', - this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)]); - setTimeout(this.setOn.bind(this), - 50 + Math.floor(Math.random() * 100)); + setOff: function () { + this.colorUniform.x = this.color.r; + this.colorUniform.y = this.color.g; + this.colorUniform.z = this.color.b; + this.colorUniform.needsUpdate = true; + + this.sparks.emit('logoflicker', + this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)], + false); + + setTimeout(this.setOn, + 50 + Math.floor(Math.random() * 100)); }, + setOn: function () { - this.el.setAttribute('text', {color: this.defaultColor}); - setTimeout(this.setOff.bind(this), - Math.floor((this.data * 3 / 10) + Math.random() * this.data)); + this.colorUniform.x = this.defaultColor.r; + this.colorUniform.y = this.defaultColor.g; + this.colorUniform.z = this.defaultColor.b; + this.colorUniform.needsUpdate = true; + + setTimeout(this.setOff, + Math.floor((this.data.delay * 3 / 10) + Math.random() * this.data.delay)); } }); diff --git a/src/templates/stage.html b/src/templates/stage.html index 04a8571..292887e 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -45,14 +45,14 @@