Serie BabylonJS por David Catuhe (@DeltaKosh): p>
Tabla de contenidos p>
Aprender WebGL y Babylon.js a su propio ritmo h2>
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. P>
¿Qué se puede esperar h2>
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. P>
p>
Resultado final em> p> 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. P> 1 – Básico animación strong> p> 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: p> Nuestro objetivo: mover esta “caja 1”. En primer lugar, crear nuestro objeto Animación: p> Muchos información están en los parámetros: p> 5.Finalmente, hay que aconsejar qué tipo de comportamiento esta animación se llevará a su límite superior: p> 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: p> a continuación, dos paso importante: p>
¿Cómo puedo hacer esto? H2>
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;
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);
Ol>
Ul>
Ul>
// 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});
Ul>
animationBox.setKeys (teclas); 1animationBox.setKeys (claves);
Ul>
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: p>
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). p>
Y ya está! No dude en combinar muchas de animación para un objeto empujando la transformación diferente p>
2 – animación Complex strong> p> 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: p> 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. p> No dude en combinar esos dos tipos de animaciones:. Si bien hecho que es muy potente p>
scene.registerBeforeRender (function () {// El código aquí}); 123scene.registerBeforeRender (function () {// El código aquí});
Mensajes relacionados h3>