Three.js 和 WebVideo 动画

<!-- THREE.JS 84 --><script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>  

<!-- Simplified object for 2D and THREE.js canvas (designed for my web page banners and for doing tests with them) --><!-- Can work in 2 ways, normal / test mode, and banner mode (for my web page headers) -->

<script src='https://devildrey33.github.io/ObjetoCanvas/JS/ObjetoCanvas.js'></script><link rel='stylesheet' href='https://devildrey33.github.io/ObjetoCanvas/CSS/ObjetoCanvas.css'></link>

<!-- Create time animations like Tween.js with less feautres but with my own style --><script src='https://devildrey33.github.io/ObjetoAnimacion/JS/ObjetoAnimacion.js'></script>

<!-- Tests --><!-- <link rel='stylesheet' href='https://devildrey33.es/Ejemplos/Utils/ObjetoTest.css' /><script lay-src="https://devildrey33.es/Ejemplos/Utils/ObjetoTest.js"></script><script lay-src="https://devildrey33.es/Ejemplos/CyberParasit/CyberParasit_Test.js"></script> --><div id='ObjetoCanvas'>  <!-- Botones para iniciar y repetir el show -->  <div id="Empezar" class='MarcoCanvas' onclick="CyberP.IniciarShow();">Start</div>  <div id="Repetir" class='MarcoCanvas' onclick="CyberP.IniciarShow();">Again?</div>  <div id="Creditos" class='MarcoCanvas' visible='true'>    <span>Programming / Animations : </span>    <div><a href='https://devildrey33.github.io' target='_blank'>Josep Antoni Bover Comas</a></div><br />    <span>Artist and song :</span>    <div><a href='https://www.jamendo.com/artist/480345/levenrain' target='_blank'>LevenRain</a></div>    <div><a href='https://www.jamendo.com/track/1349290/actionman-versus-the-cyberparasites' target='_blank'>ActionMan Versus The CyberParasites</a></div><br />    <span>Motherboard mesh : </span>    <div><a href='https://www.turbosquid.com/Search/Artists/nobicasa' target='_blank'>Nobicasa</a></div>

  </div></div>

/* Three.js CyberParasit creado por Josep Antoni Bover Comas el 15/08/2017 para devildrey33.es        Ultima modificación el 30/08/2017  */

#Empezar, #Repetir {    bottom: 50%;    left: calc(50%);    font-size: 42px;    text-align:center;    cursor:pointer;    transform:perspective(600px) rotateX(-90deg) translateX(-50%);    z-index: 1000;    font-family:'Orbitron',sans-serif;}

#Empezar:hover, #Repetir:hover {    color:rgb(234,80,78);}

#Empezar[visible=true], #Repetir[visible=true] {    transform:perspective(600px) rotateX(0deg) translateX(-50%);                     }

#BeatActual > div {    margin: 17px auto 0px auto;    text-align: center;}





#Creditos {    font-family: monospace;    font-size: 1.3rem;    position:absolute;    top:10px;    left:10px;    padding: 10px;    transform:perspective(600px) rotateX(-90deg);    margin: 0px;    }

#Creditos[visible=true] {    transform:perspective(600px) rotateX(0deg);    }

#Creditos a {    color:#CCC;    text-decoration:none;    transition:0.4s;    text-shadow: 1px 1px 3px #333;    font-weight: bold;}

#Creditos > div { margin-left:20px; }

#Creditos a:visited {    color:#EEE;}

#Creditos a:hover {    color:rgb(234,80,78);}

/* Example created by devildrey33 for https://devildrey33.es    Audio : this previsualization uses LevenRain 'Action man verusus the CyberParasites' song from (https://www.jamendo.com/track/1349290/actionman-versus-the-cyberparasites)    Floor : this previsualization uses a model / mesh from Nobicasa of a motherboard               (https://www.turbosquid.com/Search/Artists/nobicasa)        NOTE : example edited from original to avoid errors during codepen preview on index (to show at least the first frame). WebAudio API its capped on preview mode. */

/* TODO : on Iphone7 + chorme this example doesn't works... its a strange flickering with Credits, Start button, Canvas... and i cant debug that right now.... :( */

"use strict";/* CyberParasit_Audio creado por Josep Antoni Bover Comas el 08/08/2017 para devildrey33.es * Archivo que contiene todo lo relacionado con el audio.     Ultima modificación el 27/08/2017  */var CyberParasit_Audio = function() {    this.DatosAnalizador    = [];    this.DatosAnalizadorSin = [];        this.Iniciar = function(Padre) {        this.CancionCargada = true;        this.Padre = Padre;                try {          var Compatibilidad = window.AudioContext || window.webkitAudioContext;          this.AudioContext = new Compatibilidad();                  this.Analizador = this.AudioContext.createAnalyser();          this.Analizador.fftSize = 1024;          this.Analizador.smoothingTimeConstant = 0.8; //           this.TamDatos = this.Analizador.fftSize / 2;          this.DatosAnalizador = new Uint8Array(this.TamDatos);          this.DatosAnalizadorSin = new Uint8Array(this.TamDatos);                                  this.CargarCancion();          }      catch (error) {              }    };    

    this.CargarCancion = function() {                this.Padre.Cargando(true);        this.CancionCargada = false;        this.Cancion = new Audio();        this.Cancion.controls = true;        this.Cancion.crossOrigin = "anonymous";//        this.Cancion.src = "https://devildrey33.es/Ejemplos/BannerTest/Canciones/LevenRain_-_ActionMan_Versus_The_CyberParasites.mp3";        this.Cancion.src = "https://cdn.rawgit.com/devildrey33/devildrey33/ddb01d71/Ejemplos/BannerTest/Canciones/LevenRain_-_ActionMan_Versus_The_CyberParasites.mp3";        this.Cancion.addEventListener('canplay', this.CanPlay.bind(this));                this.Cancion.addEventListener('ended', function() {             this.Padre.Audio_EventoTerminado();        }.bind(this) );            };                this.CanPlay = function() {        if (this.CancionCargada !== true) {            this.CancionCargada = true;            this.AudioSource = this.AudioContext.createMediaElementSource(this.Cancion);            this.AudioSource.connect(this.Analizador);            this.Analizador.connect(this.AudioContext.destination);            this.Padre.Audio_EventoCanPlay();            this.Padre.Cargando(false);        }            };        // Devuelve true si se ha hecho play, false si se ha hecho pausa    this.PlayPausa = function() {       if (this.Cancion.duration > 0 && !this.Cancion.paused) {           this.Cancion.pause();            return false;       }        else {            this.Cancion.play();           return true;       }     };        this.MediaFrequenciasAudio = function() {        var Divisiones = [ 256, 2000, 16000, 50000 ];        var Total      = [ 0, 0, 0, 0, 0 ];// Graves, Medios, Agudos, Agudos inaudibles, Media de todo        var Valores    = [ 0, 0, 0, 0, 0 ];// Graves, Medios, Agudos, Agudos inaudibles, Media de todo        // Obtengo los bufers con la frequencia y la onda      try {        this.Analizador.getByteFrequencyData(this.DatosAnalizador);        this.Analizador.getByteTimeDomainData(this.DatosAnalizadorSin);                        // Graves  de 0hz    a 256hz        // Medios  de 257hz  a 2000hz        // Agudos  de 2001hz a 16000hz        var HzPorBarra = this.AudioContext.sampleRate / this.Analizador.fftSize;        var Pos        = 0;                var TotalFreq = this.TamDatos;        for (var i = 0; i < TotalFreq; i++) {            if (i * HzPorBarra > Divisiones[Pos]) {                Pos++;            }            Total[Pos] ++;            Valores[Pos] += this.DatosAnalizador[i];        }      }      catch(error) {              }              return [ Valores[0] / Total[0], Valores[1] / Total[1], Valores[2] / Total[2], Valores[3] / Total[3], (Valores[0] + Valores[1] + Valores[2] + Valores[3]) / TotalFreq ];    };};













/* CyberParasit_Animaciones creado por Josep Antoni Bover Comas el 08/08/2017 para devildrey33.es * Archivo que contiene todo lo relacionado con las animaciones     Ultima modificación el 30/08/2017  *//* Max 300 a 93.02 BPM */var CyberParasit_Animaciones = function() {    this.Iniciar = function(CyberParasitPadre) {        // Iniciar desde el Beat X        var Debug_IniciarDesdeBeat = 0;                this.OA = new ObjetoAnimacion;        this.Padre = CyberParasitPadre;        this.UltimoBeat = -1;                this.Ani_Verde = this.OA.CrearAnimacion([            { 'Paso' : {                     r0 : this.Padre.Parasito_PresetAzul[0].r, g0 : this.Padre.Parasito_PresetAzul[0].g, b0 : this.Padre.Parasito_PresetAzul[0].b,                     r1 : this.Padre.Parasito_PresetAzul[1].r, g1 : this.Padre.Parasito_PresetAzul[1].g, b1 : this.Padre.Parasito_PresetAzul[1].b,                     r2 : this.Padre.Parasito_PresetAzul[2].r, g2 : this.Padre.Parasito_PresetAzul[2].g, b2 : this.Padre.Parasito_PresetAzul[2].b,                     r3 : this.Padre.Parasito_PresetAzul[3].r, g3 : this.Padre.Parasito_PresetAzul[3].g, b3 : this.Padre.Parasito_PresetAzul[3].b,                     r4 : this.Padre.Parasito_PresetAzul[4].r, g4 : this.Padre.Parasito_PresetAzul[4].g, b4 : this.Padre.Parasito_PresetAzul[4].b,                     r5 : this.Padre.Parasito_PresetAzul[5].r, g5 : this.Padre.Parasito_PresetAzul[5].g, b5 : this.Padre.Parasito_PresetAzul[5].b                 }},                                  { 'Paso' : {                    r0 : this.Padre.Parasito_PresetVerde[0].r, g0 : this.Padre.Parasito_PresetVerde[0].g, b0 : this.Padre.Parasito_PresetVerde[0].b,                    r1 : this.Padre.Parasito_PresetVerde[1].r, g1 : this.Padre.Parasito_PresetVerde[1].g, b1 : this.Padre.Parasito_PresetVerde[1].b,                    r2 : this.Padre.Parasito_PresetVerde[2].r, g2 : this.Padre.Parasito_PresetVerde[2].g, b2 : this.Padre.Parasito_PresetVerde[2].b,                    r3 : this.Padre.Parasito_PresetVerde[3].r, g3 : this.Padre.Parasito_PresetVerde[3].g, b3 : this.Padre.Parasito_PresetVerde[3].b,                    r4 : this.Padre.Parasito_PresetVerde[4].r, g4 : this.Padre.Parasito_PresetVerde[4].g, b4 : this.Padre.Parasito_PresetVerde[4].b,                    r5 : this.Padre.Parasito_PresetVerde[5].r, g5 : this.Padre.Parasito_PresetVerde[5].g, b5 : this.Padre.Parasito_PresetVerde[5].b,                                    }, 'Tiempo' : this.Padre.BeatMS * 2, 'FuncionTiempo' : FuncionesTiempo.SinIn },        ], { FuncionTerminado : function() { console.log("Ani_Verde terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito_Colores[0].setRGB(Valores.r0, Valores.g0, Valores.b0);                this.Padre.Parasito_Colores[1].setRGB(Valores.r1, Valores.g1, Valores.b1);                this.Padre.Parasito_Colores[2].setRGB(Valores.r2, Valores.g2, Valores.b2);                this.Padre.Parasito_Colores[3].setRGB(Valores.r3, Valores.g3, Valores.b3);                this.Padre.Parasito_Colores[4].setRGB(Valores.r4, Valores.g4, Valores.b4);                this.Padre.Parasito_Colores[5].setRGB(Valores.r5, Valores.g5, Valores.b5);                if (ObjetoNavegador.EsMovil() === false) {                    this.Padre.PointLight3.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                }                this.Padre.PointLight4.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                // color cubo                this.Padre.Cubo_Material.materials[0].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[1].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[2].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[3].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[5].color.setRGB(Valores.r5, Valores.g5, Valores.b5);            }.bind(this)        });    

        this.Ani_Rojo = this.OA.CrearAnimacion([            { 'Paso' : {                     r0 : this.Padre.Parasito_PresetVerde[0].r, g0 : this.Padre.Parasito_PresetVerde[0].g, b0 : this.Padre.Parasito_PresetVerde[0].b,                     r1 : this.Padre.Parasito_PresetVerde[1].r, g1 : this.Padre.Parasito_PresetVerde[1].g, b1 : this.Padre.Parasito_PresetVerde[1].b,                     r2 : this.Padre.Parasito_PresetVerde[2].r, g2 : this.Padre.Parasito_PresetVerde[2].g, b2 : this.Padre.Parasito_PresetVerde[2].b,                     r3 : this.Padre.Parasito_PresetVerde[3].r, g3 : this.Padre.Parasito_PresetVerde[3].g, b3 : this.Padre.Parasito_PresetVerde[3].b,                     r4 : this.Padre.Parasito_PresetVerde[4].r, g4 : this.Padre.Parasito_PresetVerde[4].g, b4 : this.Padre.Parasito_PresetVerde[4].b,                     r5 : this.Padre.Parasito_PresetVerde[5].r, g5 : this.Padre.Parasito_PresetVerde[5].g, b5 : this.Padre.Parasito_PresetVerde[5].b                 }},                                  { 'Paso' : {                    r0 : this.Padre.Parasito_PresetRojo[0].r, g0 : this.Padre.Parasito_PresetRojo[0].g, b0 : this.Padre.Parasito_PresetRojo[0].b,                    r1 : this.Padre.Parasito_PresetRojo[1].r, g1 : this.Padre.Parasito_PresetRojo[1].g, b1 : this.Padre.Parasito_PresetRojo[1].b,                    r2 : this.Padre.Parasito_PresetRojo[2].r, g2 : this.Padre.Parasito_PresetRojo[2].g, b2 : this.Padre.Parasito_PresetRojo[2].b,                    r3 : this.Padre.Parasito_PresetRojo[3].r, g3 : this.Padre.Parasito_PresetRojo[3].g, b3 : this.Padre.Parasito_PresetRojo[3].b,                    r4 : this.Padre.Parasito_PresetRojo[4].r, g4 : this.Padre.Parasito_PresetRojo[4].g, b4 : this.Padre.Parasito_PresetRojo[4].b,                    r5 : this.Padre.Parasito_PresetRojo[5].r, g5 : this.Padre.Parasito_PresetRojo[5].g, b5 : this.Padre.Parasito_PresetRojo[5].b,                                    }, 'Tiempo' : this.Padre.BeatMS * 2, 'FuncionTiempo' : FuncionesTiempo.SinIn },        ], { FuncionTerminado : function() { console.log("Ani_Rojo terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito_Colores[0].setRGB(Valores.r0, Valores.g0, Valores.b0);                this.Padre.Parasito_Colores[1].setRGB(Valores.r1, Valores.g1, Valores.b1);                this.Padre.Parasito_Colores[2].setRGB(Valores.r2, Valores.g2, Valores.b2);                this.Padre.Parasito_Colores[3].setRGB(Valores.r3, Valores.g3, Valores.b3);                this.Padre.Parasito_Colores[4].setRGB(Valores.r4, Valores.g4, Valores.b4);                this.Padre.Parasito_Colores[5].setRGB(Valores.r5, Valores.g5, Valores.b5);                if (ObjetoNavegador.EsMovil() === false) {                    this.Padre.PointLight3.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                }                this.Padre.PointLight4.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                // color cubo                this.Padre.Cubo_Material.materials[0].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[1].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[2].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[3].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[5].color.setRGB(Valores.r5, Valores.g5, Valores.b5);            }.bind(this)        });                   this.Ani_Azul = this.OA.CrearAnimacion([            { 'Paso' : {                     r0 : this.Padre.Parasito_PresetRojo[0].r, g0 : this.Padre.Parasito_PresetRojo[0].g, b0 : this.Padre.Parasito_PresetRojo[0].b,                     r1 : this.Padre.Parasito_PresetRojo[1].r, g1 : this.Padre.Parasito_PresetRojo[1].g, b1 : this.Padre.Parasito_PresetRojo[1].b,                     r2 : this.Padre.Parasito_PresetRojo[2].r, g2 : this.Padre.Parasito_PresetRojo[2].g, b2 : this.Padre.Parasito_PresetRojo[2].b,                     r3 : this.Padre.Parasito_PresetRojo[3].r, g3 : this.Padre.Parasito_PresetRojo[3].g, b3 : this.Padre.Parasito_PresetRojo[3].b,                     r4 : this.Padre.Parasito_PresetRojo[4].r, g4 : this.Padre.Parasito_PresetRojo[4].g, b4 : this.Padre.Parasito_PresetRojo[4].b,                     r5 : this.Padre.Parasito_PresetRojo[5].r, g5 : this.Padre.Parasito_PresetRojo[5].g, b5 : this.Padre.Parasito_PresetRojo[5].b                 }},                                  { 'Paso' : {                    r0 : this.Padre.Parasito_PresetAzul[0].r, g0 : this.Padre.Parasito_PresetAzul[0].g, b0 : this.Padre.Parasito_PresetAzul[0].b,                    r1 : this.Padre.Parasito_PresetAzul[1].r, g1 : this.Padre.Parasito_PresetAzul[1].g, b1 : this.Padre.Parasito_PresetAzul[1].b,                    r2 : this.Padre.Parasito_PresetAzul[2].r, g2 : this.Padre.Parasito_PresetAzul[2].g, b2 : this.Padre.Parasito_PresetAzul[2].b,                    r3 : this.Padre.Parasito_PresetAzul[3].r, g3 : this.Padre.Parasito_PresetAzul[3].g, b3 : this.Padre.Parasito_PresetAzul[3].b,                    r4 : this.Padre.Parasito_PresetAzul[4].r, g4 : this.Padre.Parasito_PresetAzul[4].g, b4 : this.Padre.Parasito_PresetAzul[4].b,                    r5 : this.Padre.Parasito_PresetAzul[5].r, g5 : this.Padre.Parasito_PresetAzul[5].g, b5 : this.Padre.Parasito_PresetAzul[5].b,                                    }, 'Tiempo' : this.Padre.BeatMS * 2, 'FuncionTiempo' : FuncionesTiempo.SinIn },        ], { FuncionTerminado : function() { console.log("Ani_Azul terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito_Colores[0].setRGB(Valores.r0, Valores.g0, Valores.b0);                this.Padre.Parasito_Colores[1].setRGB(Valores.r1, Valores.g1, Valores.b1);                this.Padre.Parasito_Colores[2].setRGB(Valores.r2, Valores.g2, Valores.b2);                this.Padre.Parasito_Colores[3].setRGB(Valores.r3, Valores.g3, Valores.b3);                this.Padre.Parasito_Colores[4].setRGB(Valores.r4, Valores.g4, Valores.b4);                this.Padre.Parasito_Colores[5].setRGB(Valores.r5, Valores.g5, Valores.b5);                if (ObjetoNavegador.EsMovil() === false) {                    this.Padre.PointLight3.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                }                this.Padre.PointLight4.color.setRGB(Valores.r3, Valores.g3, Valores.b3);                // color cubo                this.Padre.Cubo_Material.materials[0].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[1].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[2].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[3].color.setRGB(Valores.r5, Valores.g5, Valores.b5);                this.Padre.Cubo_Material.materials[5].color.setRGB(Valores.r5, Valores.g5, Valores.b5);            }.bind(this)        });       





        // Animación del movimiento de la cámara en cada tu-pa        this.Ani_Camara = this.OA.CrearAnimacion([            { 'Paso' : { cpx : 0, cpy : 0 }},                                  { 'Paso' : { cpx : new ObjetoAnimacion_Rand(15,-15), cpy : new ObjetoAnimacion_Rand(10,-10)}, 'Tiempo' : this.Padre.BeatMS - 50, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 this.Padre.Camara.position.x = Valores.cpx;                this.Padre.Camara.position.y = 10 + Valores.cpy;                this.Padre.Camara.rotation.x = Valores.cpx / 40;                this.Padre.Camara.rotation.y = Valores.cpy / 40;                this.Padre.Camara.lookAt(new THREE.Vector3(0,0,0));            }.bind(this), FuncionTerminado : function(Valores) {                // Re-emplazo los valores del primer paso por unas co-ordenadas aleatorias                this.Ani_Camara.Pasos[0].Paso.cpx = this.Ani_Camara.cpx;                this.Ani_Camara.Pasos[0].Paso.cpy = this.Ani_Camara.cpy;            }.bind(this)        });       

        /* 1 Beat */                this.Ani_Tu = this.OA.CrearAnimacion([            { 'Paso' : { x : 1    }},                                  { 'Paso' : { x : 1.50 }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { x : 1    }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].scale.x = Valores.x;                }            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)             */        });                /* 1 Beat */        this.Ani_Pa = this.OA.CrearAnimacion([            { 'Paso' : { y : 1    }},                                  { 'Paso' : { y : 1.50 }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { y : 1    }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 this.Padre.Parasitos.scale.y = Valores.y;            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)   */        });                        /* 1 Beat */                this.Ani_Tu2 = this.OA.CrearAnimacion([            { 'Paso' : { sy : 1   , ry : 0              }},                                  { 'Paso' : { sy : 1.50, ry : -(Math.PI / 3) }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { sy : 1   , ry : 0              }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 this.Padre.Parasitos.scale.y = Valores.sy;                for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                   this.Padre.Parasito[i].rotation.y = Valores.ry;                }            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)             */        });                /* 1 Beat */        this.Ani_Pa2 = this.OA.CrearAnimacion([            { 'Paso' : { sy : 1  , ry : 0            }},                                  { 'Paso' : { sy : 2.0, ry : Math.PI / 3  }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { sy : 1  , ry : 0            }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 this.Padre.Parasitos.scale.y = Valores.sy;                for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                   this.Padre.Parasito[i].rotation.y = Valores.ry;                }            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)   */        });                

        /* 1 Beat */                this.Ani_Tu3 = this.OA.CrearAnimacion([            { 'Paso' : { s : 1  , rz : 0             }},                                  { 'Paso' : { s : 1.5, rz : Math.PI }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { s : 1  , rz : Math.PI }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) { //                this.Padre.Parasitos.scale.y = Valores.sy;                for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                   this.Padre.Parasito[i].rotation.z = Valores.rz;                   this.Padre.Parasito[i].scale.set(Valores.s, Valores.s, Valores.s);                }            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)             */        });                /* 1 Beat */        this.Ani_Pa3 = this.OA.CrearAnimacion([            { 'Paso' : { s : 1  , rz : Math.PI               }},                                  { 'Paso' : { s : 1.5, rz : 0  }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinIn },            { 'Paso' : { s : 1  , rz : 0  }, 'Tiempo' : 115, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                   this.Padre.Parasito[i].rotation.z = Valores.rz;                   this.Padre.Parasito[i].scale.set(Valores.s, Valores.s, Valores.s);                }            }.bind(this)/*, FuncionIniciado : function() { this.Ani_Camara.Iniciar(); }.bind(this)   */        });                

                /* 2 Beats */        this.Ani_TuPaPaPa = this.OA.CrearAnimacion([            { 'Paso' : { y : 1   , x : 1,   }},                      // Beats * Milisegundos por Beat            { 'Paso' : { y : 2.20, x : 0.3, }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinIn, 'Retraso' : this.Padre.BeatMS / 2  },            { 'Paso' : { y : 1   , x : 1,   }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinOut },            { 'Paso' : { y : 1.80, x : 0.7, }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinIn  },            { 'Paso' : { y : 1   , x : 1,   }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinOut },            { 'Paso' : { y : 2   , x : 0.5, }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinIn  },            { 'Paso' : { y : 1   , x : 1,   }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinOut },            { 'Paso' : { y : 2.20, x : 0.3, }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinIn  },            { 'Paso' : { y : 1   , x : 1,   }, 'Tiempo' : this.Padre.BeatMS / 6, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionTerminado : function() { console.log("Ani_TuPaPaPa terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].scale.set(Valores.x, Valores.y, 1);                }            }.bind(this)                    });                /* 1 Beat */        this.Ani_TaDaDaDa = this.OA.CrearAnimacion([            { 'Paso' : { z : 0    }},                      // Beats * Milisegundos por Beat            { 'Paso' : { z : -Math.PI * 0.5 }, 'Tiempo' : 50                          , 'FuncionTiempo' : FuncionesTiempo.SinInOut },            { 'Paso' : { z : -Math.PI * 0.5 }, 'Tiempo' : (this.Padre.BeatMS / 4) - 50, 'FuncionTiempo' : FuncionesTiempo.Linear   },            { 'Paso' : { z : -Math.PI       }, 'Tiempo' : 50                          , 'FuncionTiempo' : FuncionesTiempo.SinInOut },            { 'Paso' : { z : -Math.PI       }, 'Tiempo' : (this.Padre.BeatMS / 4) - 50, 'FuncionTiempo' : FuncionesTiempo.Linear   },            { 'Paso' : { z : -Math.PI * 1.5 }, 'Tiempo' : 50                          , 'FuncionTiempo' : FuncionesTiempo.SinInOut },            { 'Paso' : { z : -Math.PI * 1.5 }, 'Tiempo' : (this.Padre.BeatMS / 4) - 50, 'FuncionTiempo' : FuncionesTiempo.Linear   },            { 'Paso' : { z : -Math.PI * 2   }, 'Tiempo' : 50                          , 'FuncionTiempo' : FuncionesTiempo.SinInOut },            { 'Paso' : { z : -Math.PI * 2   }, 'Tiempo' : (this.Padre.BeatMS / 4) - 50, 'FuncionTiempo' : FuncionesTiempo.Linear   }//            { 'Paso' : { z : 1    }, 'Tiempo' : this.Padre.BeatMS / 4, 'FuncionTiempo' : FuncionesTiempo.SinInOut }        ], { FuncionTerminado : function() { console.log("Ani_TaDaDaDa terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Camara.rotation.z = Valores.z;//                this.Padre.Camara.lookAt(new THREE.Vector3(0,0,0));            }.bind(this)                    });                /* 1 Beat */        this.Ani_Beeeng = this.OA.CrearAnimacion([            { 'Paso' : { x : 0    , rx : 0    }},                                  { 'Paso' : { x : new ObjetoAnimacion_Rand(3, 2.5), rx : new ObjetoAnimacion_Rand(-2.3, -2)   }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : -2.6 , rx : 1.7  }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : 2.1  , rx : -1.9 }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : -1.9 , rx : 1.3  }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : 1.3  , rx : -1.1 }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : -0.7 , rx : 0.7  }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : 0.4  , rx : -0.3 }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                            { 'Paso' : { x : 0    , rx : 0    }, 'Tiempo' : (this.Padre.BeatMS / 8), 'FuncionTiempo' : FuncionesTiempo.SinInOut },                                    ], { FuncionTerminado : function() { console.log("Ani_Beeeng terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasitos.position.x = Valores.x;                                for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].rotation.x = Valores.rx;                    this.Padre.Parasito[i].rotation.y = Valores.rx;                }                                this.Padre.Escenario.position.x = -Valores.x * 8;                this.Padre.Escenario.position.y = -(Valores.x * 4);            }.bind(this)        });                /* 1 Beat */        this.Ani_Biiing = this.OA.CrearAnimacion([            { 'Paso' : { x : 1    , y : 1   /* , rx : 0           */ }},                                  { 'Paso' : { x : 0.2  , y : 3.1 /* , rx : Math.PI     */ }, 'Tiempo' : 100, 'FuncionTiempo' : FuncionesTiempo.SinIn },                                 { 'Paso' : { x : 1    , y : 1   /* , rx : Math.PI * 2 */ }, 'Tiempo' : this.Padre.BeatMS - 100, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionTerminado : function() { console.log("Ani_Biiing terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].scale.x = Valores.x;                    this.Padre.Parasito[i].scale.y = Valores.y;                }//                this.Padre.Parasito[0].rotation.x = Valores.rx;            }.bind(this)                    });

        /* 1 Beat */        this.Ani_Booong = this.OA.CrearAnimacion([            { 'Paso' : { rz : 0           , s : 1    }},                                  { 'Paso' : { rz : Math.PI     , s : 2    }, 'Tiempo' : 100, 'FuncionTiempo' : FuncionesTiempo.SinIn },                                 { 'Paso' : { rz : Math.PI * 2 , s : 1    }, 'Tiempo' : this.Padre.BeatMS - 100, 'FuncionTiempo' : FuncionesTiempo.SinOut },        ], { FuncionTerminado : function() { console.log("Ani_Booong terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].scale.set(Valores.s, Valores.s, Valores.s);                    this.Padre.Parasito[i].rotation.z = Valores.rz;                }            }.bind(this)                    });

        /* 9 Beats */        this.Ani_Reducir = this.OA.CrearAnimacion([            { 'Paso' : { s : 1  }},                                  { 'Paso' : { s : 0.001  }, 'Tiempo' : this.Padre.BeatMS * 9, 'FuncionTiempo' : FuncionesTiempo.SinIn },                             ], { FuncionTerminado : function() {                 console.log("Ani_Reducir terminada : " + this.Padre.Beats);                 this.Padre.Parasitos_Visibles = 1;                for (var i = 0; i < this.Padre.Parasito.length; i++) {                    this.Padre.Parasito[i].position.set(0,0,0);                }            }.bind(this),             FuncionActualizar : function(Valores) {                 for (var i = 0; i < this.Padre.Parasitos_Visibles; i++) {                    this.Padre.Parasito[i].scale.set(Valores.s, Valores.s, Valores.s);                }            }.bind(this)                    });

        // 1 Beat        this.Ani_Final = this.OA.CrearAnimacion([            { 'Paso' : { s : 0.001 , cx : 0, cy :  0, cz : 50, /*r : 0*/    }},                      // Beats * Milisegundos por Beat            { 'Paso' : { s : 1     , cx : 0, cy : 10, cz : 30, /*r : Math.PI * 2.5*/ }, 'Tiempo' : this.Padre.BeatMS, 'FuncionTiempo' : FuncionesTiempo.SinInOut }        ], { FuncionTerminado : function() { console.log("Ani_Final terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) { //                this.Padre.Parasito[0].rotation.set(-Valores.r, Valores.r / 2, -Valores.r / 2);                this.Padre.Parasito[0].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Camara.position.set(Valores.cx, Valores.cy, Valores.cz);                this.Padre.Camara.lookAt(new THREE.Vector3(0,0,0));            }.bind(this) , FuncionIniciado : function() {                // Inicio los valores de la camara para el primer paso                this.Ani_Final.Pasos[0].cx = this.Padre.Camara.position.x;                this.Ani_Final.Pasos[0].cy = this.Padre.Camara.position.y;                this.Ani_Final.Pasos[0].cz = this.Padre.Camara.position.z;            }.bind(this)        });                                // Primera fila segundo cubo        this.Ani_MCubo1 = this.OA.CrearAnimacion([            { 'Paso' : { x :  0, s : 0.01 }},                                 { 'Paso' : { x : 10, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo1 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[1].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[0].position.x = Valores.x;                this.Padre.Parasito[1].position.x = -Valores.x;            }.bind(this)         });                // Segunda fila primer cubo        this.Ani_MCubo2 = this.OA.CrearAnimacion([            { 'Paso' : { z :  0, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { z : 10, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo2 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[2].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[0].position.z = Valores.z;                this.Padre.Parasito[1].position.z = Valores.z;                this.Padre.Parasito[2].position.z = -Valores.z;                this.Padre.Camara.position.z = Valores.z + 30;            }.bind(this)         });

        // Segunbda fila segundo cubo        this.Ani_MCubo3 = this.OA.CrearAnimacion([            { 'Paso' : { zx :  0, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { zx : 10, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo3 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[3].scale.set(Valores.s, Valores.s, Valores.s);//                this.Padre.Parasito[0].position.z = Valores.zx;//                this.Padre.Parasito[1].position.z = Valores.zx;                this.Padre.Parasito[2].position.x = -Valores.zx;                this.Padre.Parasito[3].position.x = Valores.zx;                this.Padre.Parasito[3].position.z = -Valores.zx;            }.bind(this)         });                // separo las filas/columnas e introduzco un cubo en medio        this.Ani_MCubo4 = this.OA.CrearAnimacion([            { 'Paso' : { zx : 10, z :  10, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { zx : 20, z :  20, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo4 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[4].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[0].position.z = Valores.zx;                this.Padre.Parasito[1].position.z = Valores.zx;                this.Padre.Parasito[2].position.z = -Valores.zx;                this.Padre.Parasito[3].position.z = -Valores.zx;                this.Padre.Camara.position.z = Valores.zx + 30;            }.bind(this)         });                // nuevo cubo en medio (3 filas de 2 cubos)        this.Ani_MCubo5 = this.OA.CrearAnimacion([            { 'Paso' : { x :  0, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 10, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo5 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[5].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[4].position.x = -Valores.x;                this.Padre.Parasito[5].position.x = Valores.x;            }.bind(this)         });                // nuevo cubo en medio (primera y ultima fila de dos cubos, la fila del medio tiene 3 cubos)        this.Ani_MCubo6 = this.OA.CrearAnimacion([            { 'Paso' : { x : 10, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 20, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo6 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[6].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[4].position.x = -Valores.x;                this.Padre.Parasito[5].position.x = Valores.x;            }.bind(this)         });                // nuevo cubo en medio de la ultima fila (primera fila 2 cubos, segunda y tercera fila 3 cubos)        this.Ani_MCubo7 = this.OA.CrearAnimacion([            { 'Paso' : { x : 10, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 20, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo7 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[7].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[7].position.z = -Valores.x;                this.Padre.Parasito[2].position.x = -Valores.x;                this.Padre.Parasito[3].position.x = Valores.x;            }.bind(this)         });                // nuevo cubo en medio de la primera fila (las tres filas tienen 3 cubos)        this.Ani_MCubo8 = this.OA.CrearAnimacion([            { 'Paso' : { x : 10, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 20, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo8 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[8].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[8].position.z = Valores.x;                this.Padre.Parasito[0].position.x = -Valores.x;                this.Padre.Parasito[1].position.x = Valores.x;            }.bind(this)         });                // nuevo cubo en medio (primera y ultima fila de tres cubos, la fila del medio tiene cuatro cubos)        this.Ani_MCubo9 = this.OA.CrearAnimacion([            { 'Paso' : { x : 20, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 30, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo9 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[9].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[4].position.x = -Valores.x;                this.Padre.Parasito[5].position.x = Valores.x;                this.Padre.Parasito[6].position.x = Valores.x - 20;                this.Padre.Parasito[9].position.x = -(Valores.x - 20);            }.bind(this)         });                        this.Ani_MCubo10 = this.OA.CrearAnimacion([            { 'Paso' : { x : 20, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 30, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo10 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[10].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[2].position.x = -Valores.x;                this.Padre.Parasito[3].position.x = Valores.x;                this.Padre.Parasito[7].position.x = Valores.x - 20;                this.Padre.Parasito[10].position.x = -(Valores.x - 20);                this.Padre.Parasito[10].position.z = -(Valores.x - 10);            }.bind(this)         });                        this.Ani_MCubo11 = this.OA.CrearAnimacion([            { 'Paso' : { x : 20, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 30, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo11 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[11].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[0].position.x = -Valores.x;                this.Padre.Parasito[1].position.x = Valores.x;                this.Padre.Parasito[8].position.x = Valores.x - 20;                this.Padre.Parasito[11].position.x = -(Valores.x - 20);                this.Padre.Parasito[11].position.z = (Valores.x - 10);            }.bind(this)         });

        // nuevo cubo en medio (primera y ultima fila de tres cubos, la fila del medio tiene cuatro cubos)        this.Ani_MCubo12 = this.OA.CrearAnimacion([            { 'Paso' : { x : 30, s : 0.01 }},                      // Beats * Milisegundos por Beat            { 'Paso' : { x : 40, s : 1    }, 'Tiempo' : this.Padre.BeatMS / 2, 'FuncionTiempo' : FuncionesTiempo.SinInOut }                    ], { FuncionIniciado : function() { this.Padre.Parasitos_Visibles ++; }.bind(this), FuncionTerminado : function() { console.log("Ani_MCubo12 terminada : " + this.Padre.Beats); }.bind(this), FuncionActualizar : function(Valores) {                 this.Padre.Parasito[12].scale.set(Valores.s, Valores.s, Valores.s);                this.Padre.Parasito[4].position.x = -Valores.x;                this.Padre.Parasito[5].position.x = Valores.x;                this.Padre.Parasito[6].position.x = Valores.x - 20;                this.Padre.Parasito[9].position.x = -(Valores.x - 20);            }.bind(this)         });                // 100 - 158        // Array de 301 Beats : 0 nada, 1 Tu, 2 Pa, 2 Tu2, 3 Pa2 etc...  (mirar this.FuncionesTuParray para ver que animación corresponde a cada valor)        // Para esta cancion es 'suficiente' aunque tengo un beat en el que empiezan dos animaciones, y he tenido que pasar una de ellas al array de animaciones críticas        this.TuParray = [        //  0   1   2   3   4   5   6   7   8   9           10  11  12  13  14  15  16  17  18  19             0,  0 , 0,  0,  0,  0,  0,  0,  0,  0,           0,  0,  0,  0,  0,  0,  0,  0,  0,  0,        // 20  21  22  23  24  25  26  27  28  29           30  31  32  33  34  35  36  37  38  39             0,  0 , 0,  0,  0,  0,  0,  0,  0,  0,           0,  0,  1,  2,  1,  2,  1,  2,  1,  2,        // 40  41  42  43  44  45  46  47  48  49           50  51  52  53  54  55  56  57  58  59             1,  2 , 1,  2,  1,  2,  1,  2,  1,  2,           1,  2,  1,  2,  1,  2,  1,  2,  1,  2,        // 60  61  62  63  64  65  66  67  68  69           70  71  72  73  74  75  76  77  78  79             1,  2 , 1,  2, 10,  4,  3,  4,  3,  4,           3,  4,  3,  4,  3,  4,  3,  4,  3,  7,        // 80  81  82  83  84  85  86  87  88  89           90  91  92  93  94  95  96  97  98  99            10,  4 , 3,  4,  3,  4,  3,  4,  3,  4,           3,  4,  3,  4,  3,  8,  0,  0,  0,  0,        ///////////////////////////////////////////////////////////////////////////////////////////        //100   1   2   3   4   5   6   7   8   9           10  11  12  13  14  15  16  17  18  19             5,  6,  5,  6,  5,  6,  5,  6,  5,  6,           5,  6,  5,  6,  5,  6,  5,  6,  5,  6,        // 20  21  22  23  24  25  26  27  28  29           30  31  32  33  34  35  36  37  38  39             5,  6,  5,  6,  5,  6,  5,  6,  5,  6,           5,  6,  5,  6,  5,  6,  5,  6,  5,  6,        // 40  41  42  43  44  45  46  47  48  49           50  51  52  53  54  55  56  57  58  59             5,  6,  5,  6,  5,  6,  5,  6,  5,  6,           5,  6,  5,  6,  5,  6,  5,  6,  5,  0,        // 60  61  62  63  64  65  66  67  68  69           70  71  72  73  74  75  76  77  78  79            10,  4,  3,  4,  3,  4,  3,  4, 10,  4,           3,  4,  3,  4,  3,  4, 10,  4,  3,  4,                    // 80  81  82  83  84  85  86  87  88  89           90  91  92  93  94  95  96  97  98  99             3,  4,  3,  4, 10,  4,  3,  4,  3,  4,           3,  4, 10,  2,  1,  2,  1,  2,  1,  2,        ///////////////////////////////////////////////////////////////////////////////////////////        //200   1   2   3   4   5   6   7   8   9           10  11  12  13  14  15  16  17  18  19            1,  2,  1,  2,  1,  2,  1,  2, 10,  2,           1,  2,  1,  2,  1,  2,  1,  2,  1,  2,        // 20  21  22  23  24  25  26  27  28  29           30  31  32  33  34  35  36  37  38  39             1,  2,  1,  2, 10,  4,  3,  4,  3,  4,           3,  4,  3,  4,  3,  4,  3,  4,  3,  7,        // 40  41  42  43  44  45  46  47  48  49           50  51  52  53  54  55  56  57  58  59            10,  4,  3,  4,  3,  4,  3,  4,  3,  4,           3,  4,  3,  4,  3,  8, 10,  4,  3,  4,        // 60  61  62  63  64  65  66  67  68  69           70  71  72  73  74  75  76  77  78  79             3,  4,  3,  4,  3,  4,  3,  4,  3,  4,           3,  7, 10,  4,  3,  4,  3,  4,  3,  4,        // 80  81  82  83  84  85  86  87  88  89           90  91  92  93  94  95  96  97  98  99             3,  4,  3,  4,  3,  4,  3,  9,  0,  0,           0,  0,  0,  0,  0,  0,  0,  0,  0,  0,        /////////////////////////////////////////////////////////////////////////        //300   1            0,  0                    ];                this.FuncionesTuParray = [            function() { },                                     // 0            this.Ani_Tu.Iniciar.bind(this.Ani_Tu),              // 1            this.Ani_Pa.Iniciar.bind(this.Ani_Pa),              // 2            this.Ani_Tu2.Iniciar.bind(this.Ani_Tu2),            // 3            this.Ani_Pa2.Iniciar.bind(this.Ani_Pa2),            // 4            this.Ani_Tu3.Iniciar.bind(this.Ani_Tu3),            // 5            this.Ani_Pa3.Iniciar.bind(this.Ani_Pa3),            // 6            this.Ani_TaDaDaDa.Iniciar.bind(this.Ani_TaDaDaDa),  // 7            this.Ani_Biiing.Iniciar.bind(this.Ani_Biiing),      // 8            this.Ani_Booong.Iniciar.bind(this.Ani_Booong),      // 9            this.Ani_Beeeng.Iniciar.bind(this.Ani_Beeeng),      // 10        ];

        // Array de animaciones críticas (invertido para mas facilidad a la hora de utilizar splice en un bucle)        // 93.02 BPM        this.Pasos_Animacion = [            { Beats : 1, Beat : 299, Funcion : this.Ani_Final.Iniciar.bind(this.Ani_Final)       , FuncionTerminado : this.Ani_Final.Terminar.bind(this.Ani_Final)     },            { Beats : 9, Beat : 288, Funcion : this.Ani_Reducir.Iniciar.bind(this.Ani_Reducir)   , FuncionTerminado : this.Ani_Reducir.Terminar.bind(this.Ani_Reducir) },                        { Beats : 2, Beat : 287, Funcion : this.Ani_Azul.Iniciar.bind(this.Ani_Azul)         , FuncionTerminado : this.Ani_Azul.Terminar.bind(this.Ani_Azul)       },               { Beats : 1, Beat : 272, Funcion : this.Ani_MCubo12.Iniciar.bind(this.Ani_MCubo12)   , FuncionTerminado : this.Ani_MCubo12.Terminar.bind(this.Ani_MCubo12) },               { Beats : 1, Beat : 256, Funcion : this.Ani_MCubo11.Iniciar.bind(this.Ani_MCubo11)   , FuncionTerminado : this.Ani_MCubo11.Terminar.bind(this.Ani_MCubo11) },               { Beats : 1, Beat : 240, Funcion : this.Ani_MCubo10.Iniciar.bind(this.Ani_MCubo10)   , FuncionTerminado : this.Ani_MCubo10.Terminar.bind(this.Ani_MCubo10) },               { Beats : 1, Beat : 224, Funcion : this.Ani_MCubo9.Iniciar.bind(this.Ani_MCubo9)     , FuncionTerminado : this.Ani_MCubo9.Terminar.bind(this.Ani_MCubo9)   },               { Beats : 1, Beat : 208, Funcion : this.Ani_MCubo8.Iniciar.bind(this.Ani_MCubo8)     , FuncionTerminado : this.Ani_MCubo8.Terminar.bind(this.Ani_MCubo8)   },               { Beats : 1, Beat : 192, Funcion : this.Ani_MCubo7.Iniciar.bind(this.Ani_MCubo7)     , FuncionTerminado : this.Ani_MCubo7.Terminar.bind(this.Ani_MCubo7)   },               { Beats : 1, Beat : 184, Funcion : this.Ani_MCubo6.Iniciar.bind(this.Ani_MCubo6)     , FuncionTerminado : this.Ani_MCubo6.Terminar.bind(this.Ani_MCubo6)   },               { Beats : 1, Beat : 176, Funcion : this.Ani_MCubo5.Iniciar.bind(this.Ani_MCubo5)     , FuncionTerminado : this.Ani_MCubo5.Terminar.bind(this.Ani_MCubo5)   },               { Beats : 1, Beat : 168, Funcion : this.Ani_MCubo4.Iniciar.bind(this.Ani_MCubo4)     , FuncionTerminado : this.Ani_MCubo4.Terminar.bind(this.Ani_MCubo4)   },               { Beats : 1, Beat : 160, Funcion : this.Ani_MCubo3.Iniciar.bind(this.Ani_MCubo3)     , FuncionTerminado : this.Ani_MCubo3.Terminar.bind(this.Ani_MCubo3)   },               { Beats : 2, Beat : 159, Funcion : this.Ani_Rojo.Iniciar.bind(this.Ani_Rojo)         , FuncionTerminado : this.Ani_Rojo.Terminar.bind(this.Ani_Rojo)       },                           { Beats : 2, Beat : 158, Funcion : this.Ani_TuPaPaPa.Iniciar.bind(this.Ani_TuPaPaPa) },    // empieza medio beat antes y se come un Pa.. mejor la dejo aquí                    { Beats : 2, Beat :  96, Funcion : this.Ani_Verde.Iniciar.bind(this.Ani_Verde)       , FuncionTerminado : this.Ani_Verde.Terminar.bind(this.Ani_Verde)     },               { Beats : 1, Beat :  80, Funcion : this.Ani_MCubo2.Iniciar.bind(this.Ani_MCubo2)     , FuncionTerminado : this.Ani_MCubo2.Terminar.bind(this.Ani_MCubo2)   },               { Beats : 1, Beat :  64, Funcion : this.Ani_MCubo1.Iniciar.bind(this.Ani_MCubo1)     , FuncionTerminado : this.Ani_MCubo1.Terminar.bind(this.Ani_MCubo1)   },           ];

        return Debug_IniciarDesdeBeat;    };        // Hay animaciones unicas / críticas que deben ser terminadas si no se han ejecutado, para mantener la linea de la animación (posiciones del cubo, colores, etc...)    this.ActivarAnimacion = function() {        // Beats atrasados (al ocultar la pestaña no sigue los ciclos normales y pasa a modo reposo (en chrome no actualiza nada, y en firefox una vez cada x segundos)        if (this.UltimoBeat < this.Padre.Beats -1) {            console.log("beats atrasados");            for (var i = this.Pasos_Animacion.length - 1; i > -1; i--) {                // Si el beat ya ha pasado y existe una funcion terminado, la ejecuto                if (this.Padre.Beats > (this.Pasos_Animacion[i].Beat + this.Pasos_Animacion[i].Beats) && typeof(this.Pasos_Animacion[i].FuncionTerminado) !== "undefined") {                    if (this.Pasos_Animacion[i]._Terminado !== true) {                        this.Pasos_Animacion[i].FuncionTerminado();                        this.Pasos_Animacion.splice(i, 1);                    }                }            }        }        // Nuevo Beat        if (this.UltimoBeat !== this.Padre.Beats) {            if (this.Pasos_Animacion.length > 0) {                if (this.Pasos_Animacion[this.Pasos_Animacion.length - 1].Beat === this.Padre.Beats) {                    this.Pasos_Animacion[this.Pasos_Animacion.length - 1].Funcion();                    this.Pasos_Animacion.splice(this.Pasos_Animacion.length - 1, 1);                }            }                                    // Activo la animación del TuParray que toca en este beat;            this.FuncionesTuParray[this.TuParray[this.Padre.Beats]]();            if (this.TuParray[this.Padre.Beats] > 0)   { this.Ani_Camara.Iniciar(); } // Camara        }        this.UltimoBeat = this.Padre.Beats;    };    };











/* Three.js CyberParasit creado por Josep Antoni Bover Comas el 08/08/2017 para devildrey33.es        Ultima modificación el 30/08/2017  */

// Constructorvar CyberParasit = function() {    // Llamo al constructor del ObjetoBanner    if (ObjetoCanvas.call(this, {         Tipo              : 'THREE',        Ancho             : 'Auto',        Alto              : 'Auto',        Entorno           : 'Normal',        MostrarFPS        : !ObjetoNavegador.EsMovil(),        BotonLogo         : true,        BotonExtraHTML    : '<div class="ObjetoCanvas_Marco" id="BeatActual" title="Beats transcurridos"><div>0</div></div>',        ElementoRaiz      : "",        Pausar            : false,             // Pausa el canvas si la pestaña no tiene el foco del teclado        ColorFondo        : 0x999999,        ForzarLandscape   : false,        CapturaEjemplo    : "CyberParasit.png",        Idioma            : 'en'    }) === false) { return false; }        // Se ha creado el canvas, inicio los valores de la animación ...     //this.Iniciar();};

CyberParasit.prototype = Object.assign( Object.create(ObjetoCanvas.prototype) , {    constructor     : CyberParasit,     // Función que se llama al redimensionar el documento    Redimensionar   : function() {    },    // Función que se llama al hacer scroll en el documento        Scroll          : function() {    },    // Función que se llama al mover el mouse por el canvas    MouseMove       : function(Evento) { /*        var man = this.Ancho / 2;        var mal = this.Alto / 2;        var px = (Evento.clientX - man) / 100;        var py = (Evento.clientY - mal) / 40;        var rx = (Evento.clientX - man) / 50000;        var ry = (Evento.clientX - mal) / 15000;        this.Camara.position.x = px;        this.Camara.position.y = -py;        this.Camara.rotation.x = rx;        this.Camara.rotation.y = ry;        this.Camara.lookAt(new THREE.Vector3(0,0,0));        console.log(this.Camara.position, this.Camara.rotation);*/    },    // Función que se llama al presionar un botón del mouse por el canvas    MousePresionado : function(Evento) { },    // Función que se llama al soltar un botón del mouse por el canvas    MouseSoltado    : function(Evento) { },    // Función que se llama al entrar con el mouse en el canvas    MouseEnter      : function(Evento) { },    // Función que se llama al salir con el mouse del canvas    MouseLeave      : function(Evento) { },    // Función que se llama al presionar una tecla    TeclaPresionada : function(Evento) { },    // Función que se llama al soltar una tecla    TeclaSoltada    : function(Evento) { },    // Función que se llama al presionar la pantalla    TouchStart      : function(Evento) { },    // Función que se llama al soltar el dedo de la pantalla    TouchEnd        : function(Evento) { },        // Variable que indica si se ha terminado la canción    Terminado       : false,    // Muestra / oculta el marco que cuenta los beats    MostrarBeats    : false,    // Utilizar desde CyberParasit_Animacion    Debug_IniciarDesdeBeat : 0,         Parasito_Colores : [        new THREE.Color('rgb(  0,   0, 128)'), // 0 - Pluma para los bordes de los circulos        new THREE.Color('rgb(  0,   0, 128)'), // 1 - Fondo graves (circulo exterior)        new THREE.Color('rgb(119, 136, 153)'), // 2 - Fondo medios (circulo del mig)        new THREE.Color('rgb(176, 196, 222)'), // 3 - Fondo agudos (circulo interior)        new THREE.Color('rgb(254, 255, 255)'), // 4 - Onda circular        new THREE.Color('rgb( 65, 105, 255)'), // 5 - Color cubo            ],        Parasito_PresetAzul : [        new THREE.Color('rgb(  0,   0, 128)'), // 0 - Pluma para los bordes de los circulos        new THREE.Color('rgb(  0,   0, 128)'), // 1 - Fondo graves (circulo exterior)        new THREE.Color('rgb(119, 136, 153)'), // 2 - Fondo medios (circulo del mig)        new THREE.Color('rgb(176, 196, 222)'), // 3 - Fondo agudos (circulo interior)        new THREE.Color('rgb(254, 255, 255)'), // 4 - Onda circular        new THREE.Color('rgb( 65, 105, 255)'), // 5 - Color cubo            ],        Parasito_PresetVerde : [        new THREE.Color('rgb(  0,  64,   0)'), // 0 - Pluma para los bordes de los circulos        new THREE.Color('rgb(  0, 128,   0)'), // 1 - Fondo graves (circulo exterior)        new THREE.Color('rgb(229, 231, 233)'), // 2 - Fondo medios (circulo del mig)//        new THREE.Color('rgb(  0, 255,   0)'), // 3 - Fondo agudos (circulo interior)        new THREE.Color('rgb(125, 206, 160)'), // 3 - Fondo agudos (circulo interior)        new THREE.Color('rgb(254, 255, 255)'), // 4 - Onda circular        new THREE.Color('rgb( 40, 180,  99)'), // 5 - Color cubo            ],        Parasito_PresetRojo : [        new THREE.Color('rgb( 64,   0,   0)'), // 0 - Pluma para los bordes de los circulos        new THREE.Color('rgb(148,  49,  38)'), // 1 - Fondo graves (circulo exterior)        new THREE.Color('rgb(223, 221, 219)'), // 2 - Fondo medios (circulo del mig)        new THREE.Color('rgb(255,   0,   0)'), // 3 - Fondo agudos (circulo interior)        new THREE.Color('rgb(254, 255, 255)'), // 4 - Onda circular        new THREE.Color('rgb(203,  67,  53)'), // 5 - Color cubo            ],    // Función que inicia el ejemplo    Iniciar         : function() {        // Oculto el marco de los beats         if (this.MostrarBeats === false || ObjetoNavegador.EsMovil() === true) {            document.getElementById("BeatActual").style.display = "none";        }                        // Activo el mapeado de sombras        this.Context.shadowMap.enabled  = true;                        // Creo la escena y la cámara        this.Escena = new THREE.Scene();                window.scene = this.Escena;         // Three.js inspector        this.Camara = new THREE.PerspectiveCamera(75, this.Ancho / this.Alto, 0.5, 2000);        this.Camara.position.set(0, 10, 30);        this.Camara.name = "Camara";        this.Escena.add(this.Camara);        this.Camara.lookAt(new THREE.Vector3(0, 0, 0));        // Creo niebla si no es un dispositivo movil o el firefox        if (ObjetoNavegador.EsMovil() === false) {            this.Escena.fog = new THREE.Fog(0xaaaaaa, 0, 350);        }



        // Inicio el API del audio y cargo la canción        this.Audio = new CyberParasit_Audio();        this.Audio.Iniciar(this);        

        // Creacion de los objetos de la escena        this.CrearEscenario();                        this.CrearLuces();                this.CrearParasitos();                        // Datos relacionados con los Beats Per Minute        this.BPM = 93.02;        this.BeatMS = 60000 / this.BPM;        this.Beats = 0;        this.UltimoBeat = 0;                // Instancia para el objeto encargado de las animaciones de tiempo http://devildrey33.es/Ejemplos/Utils/ObjetoAnimacion.js        this.Animaciones = new CyberParasit_Animaciones;        this.Debug_IniciarDesdeBeat = this.Animaciones.Iniciar(this);                              // Creo e inicio una instancia del ObjetoTest        if (typeof(CyberParasit_Test) !== "undefined") {            this.Test = new CyberParasit_Test();            this.Test.Iniciar(this);        }    },            CrearParasitos  : function() {         this.Parasito = [];

        // Inicio el plano 2D para el Ojo del cubo        this.BufferOjo = new BufferCanvas(512, 512);        this.BufferOjo.Textura = new THREE.Texture(this.BufferOjo.Canvas);        this.BufferOjo.Context.lineWidth = 5;                      this.PintarOjo(this.Tick, [0, 0, 0, 0, 0]);                var Cubo_Materiales = [            new THREE.MeshStandardMaterial({ color : this.Parasito_Colores[5], metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 }),            new THREE.MeshStandardMaterial({ color : this.Parasito_Colores[5], metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 }),            new THREE.MeshStandardMaterial({ color : this.Parasito_Colores[5], metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 }),            new THREE.MeshStandardMaterial({ color : this.Parasito_Colores[5], metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 }),            new THREE.MeshStandardMaterial({ map   : this.BufferOjo.Textura,   metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 }),            new THREE.MeshStandardMaterial({ color : this.Parasito_Colores[5], metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.8 })        ];                this.Parasitos = new THREE.Group();        this.Escena.add(this.Parasitos);                var Cubo_Geometria = new THREE.BoxGeometry( 10, 10, 10 );        this.Cubo_Material = new THREE.MultiMaterial(Cubo_Materiales);        // Creo 13 cubos        for (var i = 0; i < 13; i++) {            this.Parasito[i] = new THREE.Group();            var Cubo = new THREE.Mesh(  Cubo_Geometria, this.Cubo_Material );            Cubo.castShadow = true;            Cubo.receiveShadow = true;                                                        this.Parasito[i].add(Cubo);            if (ObjetoNavegador.EsMovil() === false) {                var CuboWire = new THREE.Mesh(  Cubo_Geometria, new THREE.MeshStandardMaterial({ color : 0x555555, metalness: 0.1, roughness: 0.4, transparent : true, opacity : 0.5, wireframe:true }) );                this.Parasito[i].add(CuboWire);            }            this.Parasitos.add(this.Parasito[i]);                        if (i > 0) { this.Parasito[i].scale.set(0.01); }        }                this.Parasitos_Visibles = 1;    },        CrearEscenario : function() {        this.Escenario = new THREE.Group();        this.Escenario.name = "Escenario";        this.Escena.add(this.Escenario);                var Color = 0x002200;                // Palno para el suelo        this.Suelo = new THREE.Mesh(    new THREE.PlaneGeometry(260, 260),                                         new THREE.MeshPhongMaterial({ color: Color, specular : 0xcccccc }));        this.Suelo.name = "Suelo";        this.Suelo.rotation.x = -Math.PI / 2;        this.Suelo.position.y = -44;        this.Suelo.castShadow = false;        this.Suelo.receiveShadow = true;        this.Escenario.add(this.Suelo);              var loader = new THREE.JSONLoader();                loader.load(            // resource URL            //'https://devildrey33.es/Ejemplos/CyberParasit/CyberParasit_ModeloPlacaMadre.json',            'https://cdn.rawgit.com/devildrey33/devildrey33/ddb01d71/Ejemplos/CyberParasit/CyberParasit_ModeloPlacaMadre.json',            // Function when resource is loaded            function ( Geometria ) {                this.CrearPlacaMadre(Geometria);            }.bind(this)        );            },        CrearPlacaMadre : function(Geometria) {        this.Cargando(false);        if (ObjetoNavegador.EsMovil() === false) {            this.PlacaMadre2 = new THREE.Mesh( Geometria, new THREE.MeshPhongMaterial({ color: 0x333333, specular : 0xbbbbbb, wireframe : true }) );            this.PlacaMadre2.scale.set(100, 100, 100);            this.PlacaMadre2.position.y = -45;            this.PlacaMadre2.position.z = -40;            this.Escenario.add(this.PlacaMadre2);        }                        this.PlacaMadre = new THREE.Mesh( Geometria, new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.4, roughness: 0.4 }));        this.PlacaMadre.scale.set(100, 100, 100);        this.PlacaMadre.position.y = -44.95;        this.PlacaMadre.position.z = -40;        this.PlacaMadre.castShadow = false;        this.PlacaMadre.receiveShadow = true;        this.Escenario.add(this.PlacaMadre);    },

        CrearLuces      : function() {                this.PointLight = new THREE.PointLight( 0xaaaaaa, 0.6, 300 );        this.PointLight.position.set(20, 55.5, 20); // No es pot tocar la altura (o s'ha de modificar de la animació beeeng)        this.PointLight.castShadow = true;        this.PointLight.name = "PointLight";        this.PointLight.shadow.mapSize.width = 512;        this.PointLight.shadow.mapSize.height = 512;        this.Escena.add(this.PointLight);        this.Escena.add(new THREE.PointLightHelper(this.PointLight, 1));

        if (ObjetoNavegador.EsMovil() === false) {            this.PointLight3 = new THREE.PointLight( this.Parasito_Colores[3], 0.4, 100 );            this.PointLight3.position.set(-90, 5, -95);            this.PointLight3.castShadow = true;            this.PointLight3.name = "PointLight3";            this.PointLight3.shadow.mapSize.width = 512;            this.PointLight3.shadow.mapSize.height = 512;            this.Escena.add(this.PointLight3);        }//         this.Escena.add(new THREE.PointLightHelper(this.PointLight3, 1));/*                this.PointLight4 = new THREE.PointLight( this.Parasito_Colores[3], 0.3, 300 );        this.PointLight4.position.set(90, 15, -175);        this.PointLight4.castShadow = true;        this.PointLight4.name = "PointLight4";        this.PointLight4.shadow.mapSize.width = 512;        this.PointLight4.shadow.mapSize.height = 512;        this.Escena.add(this.PointLight4);//         this.Escena.add(new THREE.PointLightHelper(this.PointLight4, 1));*/

        // HemisphereLight          this.HemiLight = new THREE.HemisphereLight( 0xeeeeee, 0xffffff, 1 );        this.HemiLight.color.setHSL( 0.6, 0.6, 0.6 );        this.HemiLight.groundColor.setHSL( 0.095, 1, 0.75 );        this.HemiLight.position.set( 0, 0, 0 );        this.HemiLight.name = "HemiLight";        this.Escena.add( this.HemiLight );               },        Audio_EventoCanPlay : function() {        this.Cargando(false);        if (this.Debug_IniciarDesdeBeat > 0) {            this.IniciarShow();        }        else {            document.getElementById("Empezar").setAttribute("visible", true);                    }                    },        Audio_EventoTerminado : function() {        this.Terminado = true;        document.getElementById("Repetir").setAttribute("visible", true);                document.getElementById("Creditos").setAttribute("visible", true);

        this.RestaurarPantalla();    },        IniciarShow : function() {                this.PantallaCompleta();        this.Audio.AudioContext.resume();        this.Animaciones.Iniciar(this);        // Si estoy depurando en un beat especifico, asigno a 0 la rotación de los parasitos        if (this.Debug_IniciarDesdeBeat > 0) {            this.Parasito[0].rotation.set(0, 0, 0);        }                this.TickInicio = this.Tick - (this.Debug_IniciarDesdeBeat * Math.floor(this.BeatMS));        this.Beats = this.Debug_IniciarDesdeBeat;        this.Audio.Cancion.currentTime = (this.Debug_IniciarDesdeBeat * this.BeatMS)  / 1000;        console.log("ms entre Beats : " + this.BeatMS);        console.log(this.Audio.Cancion.duration, (this.Audio.Cancion.duration * 1000) / this.BeatMS);                this.Audio.PlayPausa();        this.Terminado = false;        document.getElementById("Empezar").setAttribute("visible", false);        document.getElementById("Repetir").setAttribute("visible", false);        document.getElementById("Creditos").setAttribute("visible", false);                this.Animaciones.Pasos_Actual = 0;        for (var i = 0; i < this.Animaciones.Pasos_Animacion.length; i++) {            if (this.Animaciones.Pasos_Animacion[i].Beat < this.Debug_IniciarDesdeBeat) {                this.Animaciones.Pasos_Actual ++;            }        }    },    

    PintarOjo : function(Tick, MediaAudio) {

        var mx = (this.BufferOjo.Ancho / 2);        var my = (this.BufferOjo.Alto / 2);                this.BufferOjo.Context.fillStyle = "rgb(" + Math.floor(this.Parasito_Colores[5].r * 255) + "," + Math.floor(this.Parasito_Colores[5].g * 255) + "," + Math.floor(this.Parasito_Colores[5].b * 255) + ")";        this.BufferOjo.Context.fillRect(0, 0, this.BufferOjo.Ancho, this.BufferOjo.Alto);                                               var Valor = this.Audio.DatosAnalizadorSin[0];        this.BufferOjo.Context.strokeStyle = "rgb(" + Math.floor(this.Parasito_Colores[0].r * 255) + "," + Math.floor(this.Parasito_Colores[0].g * 255) + "," + Math.floor(this.Parasito_Colores[0].b * 255) + ")";                // Pinto el circulo con la media de los graves        this.BufferOjo.Context.fillStyle = "rgb(" + Math.floor(this.Parasito_Colores[1].r * 255) + "," + Math.floor(this.Parasito_Colores[1].g * 255) + "," + Math.floor(this.Parasito_Colores[1].b * 255) + ")";        this.BufferOjo.Context.beginPath();                this.BufferOjo.Context.arc(mx, my, 20 + (MediaAudio[0]) * 0.8, 0, this.Constantes.TAU, false);        this.BufferOjo.Context.stroke();        this.BufferOjo.Context.fill();

        // Pinto el circulo con la media de los medios                this.BufferOjo.Context.fillStyle = "rgb(" + Math.floor(this.Parasito_Colores[2].r * 255) + "," + Math.floor(this.Parasito_Colores[2].g * 255) + "," + Math.floor(this.Parasito_Colores[2].b * 255) + ")";        this.BufferOjo.Context.beginPath();                this.BufferOjo.Context.arc(mx, my, 26 + (MediaAudio[1]) * 0.7, 0, this.Constantes.TAU, false);        this.BufferOjo.Context.stroke();        this.BufferOjo.Context.fill();                // Pinto el circulo con la media de los agudos                this.BufferOjo.Context.fillStyle = "rgb(" + Math.floor(this.Parasito_Colores[3].r * 255) + "," + Math.floor(this.Parasito_Colores[3].g * 255) + "," + Math.floor(this.Parasito_Colores[3].b * 255) + ")";        this.BufferOjo.Context.beginPath();                this.BufferOjo.Context.arc(mx, my, (32 + MediaAudio[2]) * 0.6, 0, this.Constantes.TAU, false);        this.BufferOjo.Context.stroke();        this.BufferOjo.Context.fill();                // Onda circular        this.BufferOjo.Context.strokeStyle = "rgb(" + Math.floor(this.Parasito_Colores[4].r * 255) + "," + Math.floor(this.Parasito_Colores[4].g * 255) + "," + Math.floor(this.Parasito_Colores[4].b * 255) + ")";        this.BufferOjo.Context.beginPath();        

        var Avance = this.Constantes.TAU / this.Audio.TamDatos;        var Angulo = Tick;        var i = 0;        for (var i = 0; i < this.Audio.TamDatos; i++) {            Valor = this.Audio.DatosAnalizadorSin[i] * 0.7;            var x = mx + (Math.cos(Angulo) * (90 + Valor));            var y = my + (Math.sin(Angulo) * (90 + Valor));                        this.BufferOjo.Context.lineTo(x, y);                        Angulo += Avance;        }        Valor = this.Audio.DatosAnalizadorSin[0] * 0.7;        this.BufferOjo.Context.lineTo(mx + (Math.cos(Tick) * (90 + Valor)), my + (Math.sin(Tick) * (90 + Valor)));                    this.BufferOjo.Context.closePath();        this.BufferOjo.Context.stroke();        this.BufferOjo.Textura.needsUpdate = true;    },                        MostrarBPM : function() {                if (!this.TickInicio || this.Terminado === true) { return; }        this.Beats = Math.floor((this.Audio.Cancion.currentTime * 1000) / this.BeatMS);        if (this.MostrarBeats === false) { return; }        document.querySelector("#BeatActual > div").innerHTML = this.Beats;    },        // Función que pinta cada frame de la animación    Pintar          : function() {                  this.MostrarBPM();        this.Animaciones.ActivarAnimacion();        this.Animaciones.OA.Actualizar(this.Tick);        var MediasAudio = this.Audio.MediaFrequenciasAudio();        this.PintarOjo(this.Tick, MediasAudio);                this.Context.render(this.Escena, this.Camara);     }    });



// Inicialización del canvas en el Load de la páginavar CyberP = new CyberParasit;//window.addEventListener('load', function() { CyberP = new CyberParasit; });