apply logo light only to logo

src/components/logo-light.js

@@ -0,0 +1,42 @@
+var ONCE = {once: true};
+
+/**
+ * Delay logo light so it only applies to the logo.
+ */
+AFRAME.registerComponent('logo-light', {
+  init: function () {
+    this.logoBack = document.getElementById('logoBack');
+    this.logoFront = document.getElementById('logoFront');
+    this.logoFrontU = document.getElementById('logoFrontU');
+  },
+
+  play: function () {
+    setTimeout(() => {
+      this.el.setAttribute('light', {
+        type: 'spot',
+        penumbra: 1,
+        intensity: 5,
+        angle: 20
+      });
+      this.waitAndUpdate(this.logoBack);
+      this.waitAndUpdate(this.logoFront);
+      this.waitAndUpdate(this.logoFrontU);
+    }, 1000);
+  },
+
+  waitAndUpdate: function (el) {
+    if (el.getObject3D('mesh')) {
+      el.object3D.traverse(this.updateMaterials);
+    } else {
+      el.addEventListener('model-loaded', () => {
+        el.object3D.traverse(this.updateMaterials);
+      }, ONCE);
+    }
+  },
+
+  updateMaterials: function (node) {
+    if (node.material) {
+      node.material.needsUpdate = true;
+    }
+  }
+});

src/templates/stage.html

@@ -77,19 +77,18 @@
 
   <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
 
-  <a-entity id="logolight"
+  <a-entity
+    id="logolight"
     position="0 6 0"
-    light="type: spot; penumbra: 1; intensity: 5; angle: 20"
-    animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyserbeat"
-    animation__visibleon="property: visible; from: false; to: true; dur: 1; startEvents: audioanalyserbeat"
-    animation__visibleoff="property: visible; from: true; to: false; dur: 1; delay: 300; startEvents: audioanalyserbeat"
-    visible="false"></a-entity>
+    rotation="0 50 0"
+    logo-light
+    animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyser-beat"></a-entity>
 
   <a-entity id="logosparks" bind__visible="menu.active" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
   <a-entity id="logo" bind__visible="menu.active" position="0 6 -7.5" rotation="90 0 0">
-    <a-entity obj-model="obj: #logobackObj" material="color: #001b29"></a-entity>
-    <a-entity obj-model="obj: #logofrontObj"  material="color: #e81e23"></a-entity>
-    <a-entity obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menu.active"></a-entity>
+    <a-entity id="logoBack" obj-model="obj: #logobackObj" material="color: #001b29"></a-entity>
+    <a-entity id="logoFront" obj-model="obj: #logofrontObj"  material="color: #e81e23"></a-entity>
+    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menu.active"></a-entity>
   </a-entity>
 
   <a-entity