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

¿Alguna vez jugar a un juego FPS (First Person Shooter)? Estamos para simular los mismos movimientos de cámara: la cámara está en el suelo, en colisión con el suelo y los objetos .


Resultado final

¿Cómo puedo hacer esto?

Para replicar este movimiento, tenemos que hacer esto en 3 sencillos pasos:

1 – Definir y aplicar gravedad

Lo primero que hay que hacer es definir nuestro vector de gravedad, la definición de la fuerza G. En un mundo clásico, en la tierra, la dirección de la fuerza de la gravedad es hacia abajo en el eje Y, pero estar libre de cambiarlo!
scene.gravity = new BABYLON.Vector3 (0, -9.81, 0); 1scene.gravity = newBABYLON.Vector3 (0, -9.81,0);

La gravedad se puede aplicar a cualquier cámara que haya definido previamente en su código.
camera.applyGravity = true; 1camera.applyGravity = true;

2 – Definir elipsoide

Un paso importante es ahora para definir el elipsoide alrededor de nuestra cámara. Este elipsoide está representando a las dimensiones de nuestro jugador: un evento de colisión será levantado cuando una malla estará en contacto con este elipsoide, la prevención de la cámara a estar demasiado cerca de esta malla:


Este es el elipsoide uno por defecto, pero el cambio de valores le hará alto, más grande o más pequeño, delgado, dependiendo del eje.
// Establecer el elipsoide alrededor de la cámara (por ejemplo, tamaño del reproductor) camera.ellipsoid = new BABYLON.Vector3 (1, 1, 1); 12 // Conjunto del elipsoide alrededor de la cámara (por ejemplo, tamaño del reproductor) camera.ellipsoid = newBABYLON .Vector3 (1,1,1);

3 – Aplicar colisión

Por último, cuando los elementos anteriores están listos, sólo tenemos que declarar que estamos interesados ​​en colisiones:
// Habilitar Collisionsscene.collisionsEnabled = true; 12 // Habilitar Collisionsscene.collisionsEnabled = true;

¿Y cuáles son las mallas que podría estar en colisión con nuestra cámara:
ground.checkCollisions = true; box.checkCollisions = true; 12ground.checkCollisions = true; box.checkCollisions = true;!

Eso es todo

Ahora, la cámara va a caer en el eje Y hasta que chocan nuestra tierra.

Mensajes relacionados

Deja una respuesta

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