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.

Tutorial

Este tutorial se va a hablar de sistema de partículas en BabylonJS. Las partículas pequeñas son a menudo utilizados para simular los sprites difícil de reproducir fenómenos como el fuego, el humo, el agua, o el efecto visual abstracta como magia.


Resultado final

¿Cómo puedo hacer esto?

Para realizar este truco de magia, lo primero que hay que hacer es crear un nuevo objeto, que será nuestro emisor. En nuestro caso, una caja será nuestro objeto de representación, lo que representa nuestra fuente.
var fuente = BABYLON.Mesh.CreateBox ( «foutain», 1.0, escena); 1varfountain = BABYLON.Mesh.CreateBox ( «foutain», 1.0, escena);

El emisor actúa como la fuente de las partículas, y su ubicación en el espacio 3D determina el lugar en que se generan y de dónde proceden. Así que prestar atención a la ubicación / rotación de este objeto. En nuestro caso, el emisor es nuestra fuente, pero si es necesario, sólo se puede usar un vector (BABYLON.Vector3) como emisor.

Ahora, consiguen en el sistema de partículas mediante la creación de un nuevo objeto ParticleSystem:
var particleSystem = nuevo BABYLON.ParticleSystem ( «partículas», 2000, de escena); 1varparticleSystem = newBABYLON.ParticleSystem ( «partículas», 2000, escena);

nada realmente nuevo, excepto el segundo parámetro, que es el número máximo de partículas. Ahora una parte importante es definir la textura de cada partícula. Cada uno tiene el mismo patrón, por lo que elegir cuidadosamente cuál de ellos desea. Nuestra imagen de partículas va a ser ésta:


Para definir la textura de las partículas, sólo hay que escribir:
particleSystem.particleTexture = new BABYLON.Texture ( «Flare.png», escena); 1particleSystem.particleTexture = newBABYLON.Texture ( «Flare.png», escena);

En esta textura, se puede utilizar una máscara opcional para filtrar algunos colores, o una parte del canal alfa.
particleSystem.textureMask = nuevo BABYLON.Color4 (0.1, 0.8, 0.8, 1.0); 1particleSystem.textureMask = newBABYLON.Color4 (0.1,0.8,0.8,1.0);

Esta es la salida de esta configuración:


La última cosa importante que hacer es definir nuestra emisor que hemos hablado anteriormente:
// Cuando las partículas viene fromparticleSystem.emitter = fuente; // el objeto de comenzar, los emitter12 // en donde las partículas viene fromparticleSystem.emitter = fuente; // el objeto de comenzar, el emisor

Ahora debería ver sus sistemas de partículas de trabajo. Pero no va a ser nuestro resultado final antes de que refinamos algunos parámetros:


  • Caja de alrededor de nuestro emisor. Nuestra emisor es el centro de la fuente de partículas, pero si usted quiere que sus partículas se emite desde más de un punto, entonces se puede definir una caja entera: particleSystem.minEmitBox = new BABYLON.Vector3 (-1, 0, 0); // A partir de todo FromparticleSystem.maxEmitBox = new BABYLON.Vector3 (1, 0, 0); // Para … 12particleSystem.minEmitBox = newBABYLON.Vector3 (-1,0,0); // A partir de todo FromparticleSystem.maxEmitBox = newBABYLON.Vector3 (1,0,0); // Para …

    Como se puede ver, las partículas se emiten desde una posición diferente en el eje X:



    • Ahora usted puede dar algunos colores a sus partículas. Color de uno y dos se combinan, y el “colorDead” es el color que tome la partícula antes de que disappears.// Colores de todas las partículas (splited en 2 + color específico antes de dispose) particleSystem.color1 = new BABYLON.Color4 (0.7, 0.8, 1.0, 1.0); particleSystem.color2 = new BABYLON.Color4 (0.2, 0.5, 1.0, 1.0); particleSystem.colorDead = new BABYLON.Color4 (0, 0, 0,2, 0,0); 1234 // Colores de todas las partículas (splited en 2 color + específico antes de dispose) particleSystem.color1 = newBABYLON.Color4 (0.7,0.8,1.0,1.0); particleSystem.color2 = newBABYLON.Color4 (0.2,0.5,1.0,1.0); particleSystem.colorDead = newBABYLON. color4 (0,0,0.2,0.0);
    • Tamaño de partículas: // Tamaño de cada partícula (aleatorio entre …) particleSystem.minSize = 0,1; particleSystem.maxSize = 0,5; 123 // Tamaño de cada partícula (aleatorio entre …) particleSystem.minSize = 0,1; particleSystem.maxSize = 0,5;
    • tiempo de vida de las partículas: tiempo // La vida de cada partícula (aleatorio entre …) particleSystem.minLifeTime = 0,3; particleSystem.maxLifeTime = 1,5; 123 // Tiempo de la vida de cada partícula (aleatorio entre …) particleSystem. minLifeTime = 0,3; particleSystem.maxLifeTime = 1,5;
      tasa

    • emiten. Esta es la densidad de las partículas, la tasa de partículas de flujo: particleSystem.emitRate = 1,000; 1particleSystem.emitRate = 1,000;


      Ahora algo que puede ser interesante si se quiere poner en marcha sólo unas pocas partículas a la vez, por ejemplo, si desea emitir sólo 300 partículas:
      particleSystem.manualEmitCount = 300; 1particleSystem.manualEmitCount = 300;.

      Se advirtió, la corriente no es más continua, esta es una emisión de partículas de un solo disparo, por lo que esta función está borrando el parámetro anterior “emitRate”


      • el modo seleccionado para partículas. Se puede elegir entre “BLENDMODE_ONEONE” (opción por defecto: se añade color de origen con el color de destino sin alfa que afecta el resultado), y “BLENDMODE_STANDARD” (para mezclar colores actual y el color de partículas usando partículas alfa de) .particleSystem.blendMode = BABYLON.ParticleSystem .BLENDMODE_ONEONE; 1particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
      • La gravedad. Puede utilizar la gravedad si se quiere dar una orientación a sus partículas (por ejemplo: partículas de fuego están subiendo en el eje Y) // Establecer la gravedad de todas las partículas (no es necesario abajo) = particleSystem.gravity nueva BABYLON.Vector3 (0 , -9,81, 0); 12 // Set la gravedad de todas las partículas (no es necesario abajo) particleSystem.gravity = newBABYLON.Vector3 (0, -9.81,0);
      • Dirección. dirección aleatoria de cada partícula después de que ha sido emitida, entre dirección1 y direction2 vectors.particleSystem.direction1 = new BABYLON.Vector3 (-7, 8, 3); particleSystem.direction2 = nuevo BABYLON.Vector3 (7, 8, -3) ; 12particleSystem.direction1 = newBABYLON.Vector3 (-7,8,3); particleSystem.direction2 = newBABYLON.Vector3 (7,8, -3);



        • AngularSpeed. Se puede definir una rotación para cada partícula (en radianes): particleSystem.minAngularSpeed ​​= 0; particleSystem.maxAngularSpeed ​​= Math.PI; 12particleSystem.minAngularSpeed ​​= 0; particleSystem.maxAngularSpeed ​​= Math.PI;
        • Velocidad / Fuerza. Se puede definir la potencia en emisores de partículas, y la velocidad total de movimiento (0,01 es la velocidad de actualización predeterminada, más rápido actualizaciones = más rápido animación) .particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed ​​= 0,005; 1234particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed ​​= 0,005;
        • Duración. Se puede establecer la cantidad de tiempo que el sistema de partículas se está ejecutando (depende de la velocidad total más arriba) .particleSystem.targetStopDuration = 5; 1particleSystem.targetStopDuration = 5;
        • Desechar. Dispone o no el sistema de partículas en la parada (muy útil si desea crear un sistema de partículas con un solo disparo targetStopDuration específico): particleSystem.disposeOnStop = true; 1particleSystem.disposeOnStop = true;

          Por último, se puede iniciar este sistema de partículas cada vez que desee en su código con:
          particleSystem.start ();

          Y, naturalmente, se detienen:
          particleSystem.stop ();

          Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *