junisaber/src/templates/stage.html

<a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>

<a-sky
  id="sky"
  mixin="gameoverAnimation"
  animation__gameover="property: components.material.material.color; type: color; to: #301000; startEvents: gameover"
  geometry="segmentsHeight: 16; segmentsWidth: 32"
  material="fog: false; src: #skyTexture"></a-sky>

<a-entity
  id="audioAnalyser"
  bind__audioanalyser="beatDetectionThrottle: menu.active && 5000 || 1000"
  audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000; unique: true"
  proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>

<a-entity id="stage">
  <a-entity id="backglow"
    mixin="gameoverAnimation"
    animation__gameover="property: components.material.material.opacity; to: 0.2; startEvents: gameover"
    obj-model="obj: #backglowObj"
    material="shader: flat; transparent: true; fog: false; color: #f00; src: #backglowTexture; opacity: 0.8"
    position="0 0 -50"
    scale="20 20 20"></a-entity>

  <a-entity id="twister" position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>

  <a-entity
    id="audioColumns"
    audio-columns="analyser: #audioAnalyser; height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45"
    position="0 -17 1"></a-entity>

  <a-mixin id="corridor" geometry="skipCache: true" vertex-colors-buffer="baseColor: #010101" visible="false"></a-mixin>
  <a-entity id="stageCorridor" buffer-geometry-merger material="shader: flat; flatShading: true; vertexColors: vertex">
    <!-- Corridor. -->
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85"></a-entity>
    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="1.9 -9.97 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="-1.9 -9.97 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="1.9 -1 -31.85"></a-entity>
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="-1.9 -1 -31.85"></a-entity>
    <!-- Corridor handrail. -->
    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="3.5 -10 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="-3.5 -10 -7"></a-entity>
  </a-entity>

  <a-entity id="tunnel" obj-model="obj:#tunnelObj" material="shader: flat; flatShading: true; color: #010101"></a-entity>
  <a-entity id="tunnelNeon" obj-model="obj:#tunnelNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>

  <a-entity id="stageNeon" obj-model="obj:#stageNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>

  <!-- Lasers left. -->
  <a-entity bind__stage-lasers="enabled: !menu.active" id="leftStageLasers">
    <a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
    <a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
    <a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
  </a-entity>

  <!-- Lasers right. -->
  <a-entity bind__stage-lasers="enabled: !menu.active" id="rightStageLasers">
    <a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
    <a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
    <a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
  </a-entity>

  <a-mixin
    id="smoke"
    mixin="gameoverAnimation"
    additive
    animation__gameover="property: components.material.material.opacity; to: 0; startEvents: gameover"
    animation__rotate="property: rotation; to: 0 360 0; easing: linear; loop: true"
    geometry="primitive: cylinder; height: 30"
    material="src: #smokeTexture; repeat: 2 1; side: double; fog: true; shader: flat; transparent: true; color: #111"></a-mixin>
  <a-entity id="smoke1" mixin="smoke" geometry="radius: 10" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
  <a-entity id="smoke2" mixin="smoke" geometry="radius: 20" position="0 1.8 0" animation__rotate="dur: 243000"></a-entity>

  <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>

  <a-entity
    id="songLoadingIndicator"
    bind__visible="isSongLoading"
    geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.08"
    material="shader: flat; color: #FAFAFA; opacity: 0.75; side: back"
    position="0 1.4 -2.5"
    rotation="0 180 0">
  </a-entity>

  <a-entity
    id="loadingText"
    mixin="textFont"
    bind__animation__color="enabled: challenge.isLoading || isSongLoading"
    animation__color="property: components.text.material.uniforms.color.value; type: color; from: #AAF; to: #88D; dir: alternate; loop: true; dur: 2000; easing: easeInOutCubic; enabled: false"
    text="value: READY, STEADY...; align: center; color: #aaf; wrapCount: 18; width: 2"
    position="0 1.5 -2.5"
    bind__visible="challenge.isLoading || isSongLoading"></a-entity>

  <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>

  <a-entity
    id="logolight"
    position="0 6 0"
    rotation="0 50 0"
    logo-light
    animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyserbeat"></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 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
    id="floor"
    animation="property: components.material.material.color; type: color; from: #FFF to: #888; dur: 200; easing: linear; startEvents: pulse"
    geometry="primitive: plane; width: 3; height: 3"
    material="color: #888; shader: flat; src: #floorImg"
    rotation="-90 0 0"></a-entity>
</a-entity>