Serie BabylonJS por David Catuhe (@DeltaKosh):

Tabla de contenidos

Aprender WebGL y Babylon.js a su propio ritmo

no dude en visitar nuestra línea de golf en 3D con WebGL Programación y Babylon.js para principiantes en Zenva Academia. El curso cubre el marco Babylon.js y explica todo lo que necesita para empezar con el uso de esta fantástica biblioteca en proyectos nuevos o existentes.

¿Qué se puede esperar

Su escena está empezando a parecer grande, pero es muy estática. Para poner dinámico en ella, vamos a aprender a mover sus mallas a medida que decidir.

Resultado final

¿Cómo puedo hacer esto?

Hay dos maneras diferentes de hacer las animaciones de la escena. La primera posibilidad es definir un conjunto de claves y diciendo su situación objeto en cada tecla. El segundo es para animaciones más complejas, al cambiar código de animación en tiempo de ejecución.

1 – Básico animación

La animación se basa en objetos llamados Animación (!!). Una animación está definida por diversas propiedades y una colección de teclas. Cada clave representa el valor de la animación en un momento dado. Para lograr nuestra escena de hoy, comenzamos por la creación de nuestro entorno:
función createSceneTuto (motor) {// // básico escena Como de costumbre: [escena, luz, cámara] // Creación de la esfera var = box1 BABYLON.Mesh.CreateBox ( «Cuadro1», 10.0, escena); box1.position.x = -20; 1234567functioncreateSceneTuto (motor) {// // básico escena Como de costumbre: [escena, luz, cámara] // Creación de spherevarbox1 = BABYLON.Mesh.CreateBox ( «Cuadro1», 10.0, escena) ; box1.position.x = -20;

Nuestro objetivo: mover esta “caja 1”. En primer lugar, crear nuestro objeto Animación:
var Animationbox = new BABYLON.Animation ( «tutoAnimation», «scaling.x», 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); 123456varanimationBox = newBABYLON.Animation ( «tutoAnimation», «scaling.x», 30 , BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

Muchos información están en los parámetros:

1. Nombre de esta animación, nada más.
   
2. La propiedad en cuestión. Esto puede ser cualquier propiedad de malla, dependiendo de lo que desee cambiar. Aquí queremos escalar un objeto en el eje X, por lo que será “scaling.x”.
   
3. de imágenes por segundo solicitada: FPS más alto posible en esta animación
   
4. Tipo de este cambio. Aquí se dice qué tipo de valor será modificado: se trata de un flotador (por ejemplo, una traducción), un vector (por ejemplo, una dirección), o un cuaternión. Los valores exactos son:
   
   
   
   
   • BABYLON.Animation.ANIMATIONTYPE_FLOAT
     
   • BABYLON.Animation.ANIMATIONTYPE_VECTOR3
     
   • BABYLON.Animation.ANIMATIONTYPE_QUATERNION
     
     

     5.Finalmente, hay que aconsejar qué tipo de comportamiento esta animación se llevará a su límite superior:
     

     
     
     • Usar valores anteriores y de la subasta que: BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
       
     • Reiniciar de valor inicial: BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
       
     • Mantenga su valor final: BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
       
       

       Ahora que tenemos nuestro objeto de animación, es el momento de decir cómo se pueden modificar esos valores. En nuestro caso, queremos escalar nuestra caja, pero no de una forma lineal: tiene que ser más rápido cuando se hizo más grande, y más lento cuando se hizo más delgada. Por lo tanto:
       // Array con todas las claves de animación keysvar = []; // En la clave de animación 0, el valor de escala es «1» keys.push ({frame: 0, valor: 1}); // En la clave de animación 20, el valor de escala es «0.2» keys.push ({marco: 20, valor: 0,2}); // En la clave de animación 100, el valor de escala es «1» keys.push ({frame: 100, valor: 1}); 1234567891011121314151617181920 // Array con todos keysvarkeys animación = []; // En la clave de animación 0, el valor de escala es «1» keys.push ({frame: 0, valor: 1}); // En la clave de animación 20, el valor de escala es «0.2» keys.push ({marco: 20, valor: 0,2}); // En la clave de animación 100, el valor de escala es «1» keys.push ({frame: 100, valor: 1});

       a continuación, dos paso importante:
       

       
       
       • Adición de la matriz de animación para el objeto de animación:
         
         animationBox.setKeys (teclas); 1animationBox.setKeys (claves);
         • Enlace esta animación en nuestro cuadro:
           
           box1.animations.push (Animationbox); 1box1.animations.push (Animationbox);

           Por último, puede iniciar la animación en una línea de código, en cualquier momento de su aplicación:
           scene.beginAnimation (caja, 0, 100, true); 1scene.beginAnimation (caja, 0100, true);

           También puede elegir jugar sólo una parte de la animación (en este caso de 0 a 100), y optar por bucle de esta animación (aquí es verdadero).
           

           Y ya está! No dude en combinar muchas de animación para un objeto empujando la transformación diferente
           

           2 – animación Complex
           

           La animación compleja permite elegir todo en cada cuadro de la animación (cada tic). El código calculado en tiempo de ejecución debe estar ubicado en esta función:
           scene.registerBeforeRender (function () {// El código aquí}); 123scene.registerBeforeRender (function () {// El código aquí});

           Esta función puede ser muy útil para las animaciones complejas, como los juegos, donde los personajes tienen para moverse en función de muchos parámetros.
           

           No dude en combinar esos dos tipos de animaciones:. Si bien hecho que es muy potente
           

           Mensajes relacionados