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

En las escenas dinámicas, los objetos se mueven e interactúan entre sí. Para obtener la mejor representación, que tendrá que saber cuándo sus mallas están en contacto entre ellos.

En este ejemplo, vamos a descubrir cómo funciona el sistema de colisión:


Resultado final

¿Cómo puedo hacer esto?

Este tutorial se va a mostrar dos formas de detección de colisión: el primero es para criar a un evento de colisión cuando dos mallas están en contacto, el otro está detectando el contacto entre una malla y un único punto. Vamos a hablar de la escena anterior. La primera y segunda esfera (globo) chocarán en la planta rotada, el último estará en colisión sólo en un único punto. Una vez que haya creado esta escena básica, ver cómo comprobar las colisiones.

El punto aquí es comprobar el contacto entre nuestros globos y el suelo. Ahora estamos utilizando “intersectsMesh) (” función, con dos parámetros:. La malla de comprobación, y la precisión de la intersección (boolean)
si (balloon1.intersectsMesh (Plan1, false)) {balloon1.material.emissiveColor = nuevo BABYLON.Color4 (1, 0, 0, 1);} else {balloon1.material.emissiveColor = new BABYLON.Color4 (1, 1, 1, 1);} 12345if (balloon1.intersectsMesh (Plan1, false)) {balloon1.material.emissiveColor = newBABYLON.Color4 (1,0,0,1);} else {balloon1.material.emissiveColor = newBABYLON.Color4 ( 1,1,1,1);}

para evitar cálculo costoso mediante la comprobación de todos los detalles en una malla, el motor de Babilonia crea un cuadro delimitador alrededor del objeto, y la intersección de prueba entre esta caja, y la malla para ser cheque. Este es un ejemplo de un cuadro delimitador:


Pero este cuadro delimitador puede ser más o menos precisa, y es por eso que tenemos nuestro segundo parámetro. En resumen, si este parámetro se establece en True (false por defecto), entonces el cuadro delimitador está más cerca de la malla (OBB tipo saltón), pero es un cálculo más costoso. Tenga en cuenta que este tipo de selección es especialmente útil cuando se gira la malla.


Así que pensar en los detalles de las colisiones es necesario que antes de elegir.

Si desea más información sobre este segundo parámetro, se puede echar un vistazo a esta página de Wikipedia, sobre todo acerca de la AABB y OBB modo: http://en.wikipedia.org/wiki/Bounding_volume

La primera función que puede utilizar es “intersectsPoint ()” con un punto específico, como esto:
var pointToIntersect = nuevo BABYLON.Vector3 (10, -5, 0), si (balloon3.intersectsPoint (pointToIntersect)) {balloon3.material.emissiveColor = new BABYLON.Color4 (1, 0, 0, 1);} 1234varpointToIntersect = newBABYLON .Vector3 (10, -5,0); si (balloon3.intersectsPoint (pointToIntersect)) {balloon3.material.emissiveColor = newBABYLON.Color4 (1,0,0,1);}

define un punto preciso en nuestra escena, y si se cruza nuestras globo este punto, siempre que sea en el balón, entonces el evento se eleva y nos cambian el color del globo.

Mensajes relacionados

Deja una respuesta

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