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

El último tipo de colisión podría ser muy útil para usted: esto es recoger un objeto con el ratón. La principal dificultad es hacer clic en un objeto 3D mientras que su pantalla es una pantalla plana en 2D.

Vamos a ver cómo podemos obtener su posición del ratón transpuesta en la escena 3D por este ejemplo pistola de tiro:


Resultado final

¿Cómo puedo hacer esto?

Motor de Babilonia le permiten hacer esto con mucha facilidad al darle funciones útiles.

En primer lugar, después de la creación de un plano que representa la pared, y un plano con la imagen de nuestro impacto, tenemos que detectar un clic en la interfaz de usuario (User Interface). Una vez que se ha producido el evento, utilice la función “pick” para obtener alguna información de gran alcance sobre la relación entre el clic y la escena.
// Cuando evento de clic es raisedwindow.addEventListener ( «clic», la función (evt) {// Tratamos de recoger un objeto var = pickResult scene.pick (evt.clientX, evt.clientY);}); // Cuando 12345 haga clic en evento se raisedwindow.addEventListener ( «clic», la función (evt) {// tratamos de escoger un objectvarpickResult = scene.pick (evt.clientX, evt.clientY);});

El objeto pickResult se compone principalmente de 4 información:


  1. hit (bool):. «Es cierto» si el clic golpea un objeto en la escena
  2. Distancia (float): la “distancia” entre la cámara activa y su éxito (infinito si no malla seleccionado)
  3. pickedMesh (BABYLON.Mesh): si se golpea un objeto, esta es la malla seleccionada. Si no, es nula.
  4. pickedPoint (BABYLON.Vector3): el punto que se ha hecho clic, transformado en coordenadas 3D, dependiendo del objeto que se ha hecho clic. Null si no hay éxitos.

    Ahora tenemos todos los datos que necesitamos para construir nuestra escena. Sólo tenemos que posicionar el impacto de nuestra arma cuando el usuario hace clic en el plan:
    // si el clic golpea el objeto en tierra, cambiamos el impacto positionif (pickResult.hit) {impact.position.x = pickResult.pickedPoint.x; impact.position.y = pickResult.pickedPoint.y;} // 12345 si el clic golpea el objeto en tierra, cambiamos el impacto positionif (pickResult.hit) {impact.position.x = pickResult.pickedPoint.x; impact.position .y = pickResult.pickedPoint.y;?}

    rápido y fácil, ¿no es así?

    Mensajes relacionados

Deja una respuesta

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