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

3d logo with flashlight animation

Browse Source
This commit is contained in:
Diego F. Goberna
2018-09-23 01:41:55 +02:00
parent 86694bdb66
commit 0732c4abc8
6 changed files with 4867 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/logoflicker.js
View File

@@ -9,26 +9,18 @@ AFRAME.registerComponent('logoflicker', {
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.10, 0)},
{position: new THREE.Vector3(0.3, 0.8, 0)},
{position: new THREE.Vector3(-0.3, 0.8, 0)}
];
this.setOn();
},
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.el.object3D.visible = false;
this.sparks.emit('logoflicker',
this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)],
false);
@@ -38,11 +30,7 @@ AFRAME.registerComponent('logoflicker', {
},
setOn: function () {
this.colorUniform.x = this.defaultColor.r;
this.colorUniform.y = this.defaultColor.g;
this.colorUniform.z = this.defaultColor.b;
this.colorUniform.needsUpdate = true;
this.el.object3D.visible = true;
setTimeout(this.setOff,
Math.floor((this.data.delay * 3 / 10) + Math.random() * this.data.delay));
}

3
src/index.html
View File

@@ -26,6 +26,9 @@
<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-asset-item id="backglow-obj" src="assets/models/backglow.obj"></a-asset-item>
<a-asset-item id="logofront-obj" src="assets/models/logofront.obj"></a-asset-item>
<a-asset-item id="logoback-obj" src="assets/models/logoback.obj"></a-asset-item>
<a-asset-item id="logofront-u-obj" src="assets/models/logofront-u.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>

28
src/templates/stage.html
View File

@@ -5,7 +5,7 @@
<a-entity id="twister" twister position="0 0 -60" rotation="90 0 0"></a-entity>
<a-entity id="audioColumns" audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: false; enableLevels: false; enableWaveform: false" audio-columns="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 1"></a-entity>
<a-entity id="audioColumns" audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false" audio-columns="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 1" proxy-event="event: audioanalyser-beat; to: #logolight"></a-entity>
<!-- Corridor. -->
<a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>
@@ -42,23 +42,17 @@
<a-entity id="smoke2" geometry="primitive: cylinder; radius: 20; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.8 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 243000; easing: linear; loop: true"></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 id="logosparks" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.4; count: 10; dur: 600; on: logoflicker" position="-3.8 0.5 0.05"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #ff666a" position="0.974 0 0"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #ff1a1f" position="0.974 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: PER SABER; align: center; color: #0a0228" position="0.974 0 -0.2"></a-entity>
<a-entity mixin="font" text="width: 35; value: S; align: center; color: #ff666a" position="-4.601 0 0"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #ff666a" position="-3.632 0 0" logoflicker="delay: 1200"></a-entity>
<a-entity mixin="font" text="width: 35; value: S; align: center; color: #ff1a1f" position="-4.601 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #ff1a1f" position="-3.632 0 -0.1"></a-entity>
<a-entity mixin="font" text="width: 35; value: S; align: center; color: #0a0228" position="-4.601 0 -0.2"></a-entity>
<a-entity mixin="font" text="width: 35; value: U; align: center; color: #0a0228" position="-3.632 0 -0.2"></a-entity>
<a-entity id="logolight"
position="0 6 0"
light="type: spot; penumbra: 1; intensity: 5; angle: 20"
animation="property: rotation; from: 0 50 0; to: 0 -50 0; dur:300; easing: linear; startEvents: audioanalyser-beat"
></a-entity>
<a-entity id="logosparks" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 600; on: logoflicker" position="-2.8 5.5 -7.2"></a-entity>
<a-entity id="logo" position="0 6 -7.5" rotation="90 0 0">
<a-entity obj-model="obj:#logoback-obj" material="color: #001B29"></a-entity>
<a-entity obj-model="obj:#logofront-obj" material="color: #e81e23"></a-entity>
<a-entity obj-model="obj:#logofront-u-obj" material="color: #e81e23" logoflicker="delay: 1200"></a-entity>
</a-entity>
<a-entity geometry="primitive: plane; width: 3; height: 3" material="shader: flat; src: #floor" position="0 0 0" rotation="-90 0 0"></a-entity>