junisaber/src/templates/stage.html

<a-mixin id="stageLaser" obj-model="obj:#laserNeonObj" material="depthWrite: false; transparent: true; shader: flat; fog: false; color: #00a; src: #neonImg;"></a-mixin>

<a-mixin id="neonAnimation"
  material="shader: flat; fog: false; color: #9999ff"
  animation__coloroff="property: components.material.material.opacity; to: 0.1; dur: 500; easing: linear; startEvents: coloroff"
  animation__colorblue="property: components.material.material.color; type: color; to: #AAAAFF; dur: 5; easing: linear; startEvents: colorblue"
  animation__colorbluefade="property: components.material.material.color; type: color; from: #EEF; to: #AAAAff; dur: 500; easing: linear; startEvents: colorbluefade"
  animation__colorred="property: components.material.material.color; type: color; to: #FFAAAA; dur: 5; easing: linear; startEvents: colorred"
  animation__colorredfade="property: components.material.material.color; type: color; from: #FEE; to: #ffAAAA; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>

<a-mixin id="bgAnimation"
  material="shader: flat; fog: false"
  animation__coloroff="property: components.material.material.color; type: color; to: #111; dur: 500; easing: linear; startEvents: coloroff"
  animation__colorblue="property: components.material.material.color; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: colorblue"
  animation__colorbluefade="property: components.material.material.color; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: colorbluefade"
  animation__colorred="property: components.material.material.color; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: colorred"
  animation__colorredfade="property: components.material.material.color; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>

<a-mixin id="fogAnimation"
  animation__coloroff="property: components.fog.el.object3D.fog.color; type: color; to: #010101; dur: 500; easing: linear; startEvents: coloroff"
  animation__colorblue="property: components.fog.el.object3D.fog.color; type: color; to: #007cb9; dur: 5; easing: linear; startEvents: colorblue"
  animation__colorbluefade="property: components.fog.el.object3D.fog.color; type: color; from: #3398CA; to: #007cb9; dur: 500; easing: linear; startEvents: colorbluefade"
  animation__colorred="property: components.fog.el.object3D.fog.color; type: color; to: #b90000; dur: 5; easing: linear; startEvents: colorred"
  animation__colorredfade="property: components.fog.el.object3D.fog.color; type: color; from: #ff0000; to: #b90000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>

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

<a-entity
  id="audioAnalyser"
  bind__audioanalyser="beatDetectionThrottle: menuActive && 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 bgAnimation"
    animation__gameover="property: components.material.material.opacity; to: 0.2; startEvents: gameover"
    obj-model="obj: #backglowObj"
    material="transparent: true; color: #f00; src: #backglowTexture; opacity: 0.7"
    position="0 0 -50"
    scale="20 20 20"></a-entity>

  <a-entity id="twister" position="0 0 -35" rotation="90 0 0" bind__twister="enabled: isPlaying"></a-entity>

  <a-entity
    id="audioColumns"
    audio-columns="analyser: #audioAnalyser; height: 28; mirror: 10; scale: 6; thickness: 0.4; separation: 0.45"
    position="0 -19 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"
    mixin="neonAnimation"
    obj-model="obj: #tunnelNeonObj"
    material="shader: flat; fog: false; transparent: true; color: #9999ff; src: #neonImg; depthWrite: false"></a-entity>

  <a-entity
    id="stageNeon"
    mixin="neonAnimation"
    obj-model="obj: #stageNeonObj"></a-entity>

  <!-- Lasers left. -->
  <a-entity id="leftStageLasers" bind__stage-lasers="enabled: isPlaying">
    <a-entity id="leftStageLaser0" mixin="stageLaser neonAnimation" position=" -6 2.3 -40"></a-entity>
    <a-entity id="leftStageLaser1" mixin="stageLaser neonAnimation" position="-10 0 -38"></a-entity>
    <a-entity id="leftStageLaser2" mixin="stageLaser neonAnimation" position="-14 -3 -36"></a-entity>
  </a-entity>

  <!-- Lasers right. -->
  <a-entity id="rightStageLasers" bind__stage-lasers="enabled: isPlaying">
    <a-entity id="rightStageLaser0" mixin="stageLaser neonAnimation" position=" 6 4 -40"></a-entity>
    <a-entity id="rightStageLaser1" mixin="stageLaser neonAnimation" position="10 2 -38"></a-entity>
    <a-entity id="rightStageLaser2" mixin="stageLaser neonAnimation" 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 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="menuActive || isVictory" particleplayer="src: #logoSparksJSON; scale: 1.4; pscale: 0.35; count: 10; interpolate: true; 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="menuActive || isVictory" 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: menuActive || isVictory"></a-entity>
  </a-entity>

  <a-entity
    id="floor"
    geometry="primitive: plane; width: 3; height: 3"
    material="shader: floorShader; src: #floorImg; normalMap: #floorNormalsImg; envMap: #floorEnvImg"
    rotation="-90 0 0"
    bind__saber-intersection="active: isPlaying"
    stepback></a-entity>

  <a-entity
    id="songProgressRing"
    bind__song-progress-ring="enabled: isPlaying && challenge.isBeatsPreloaded"
    bind__visible="isPlaying && challenge.isBeatsPreloaded"
    geometry="primitive: plane; width: 0.1; height: 0.1"
    material="shader: ring; progress: 0; transparent: true; radiusInner: 0.5; color: #ABABAB"
    position="0 0.1 -1.5"
    rotation="-45 0 0">
  </a-entity>
</a-entity>