Serie BabylonJS por David Catuhe (@DeltaKosh):

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.

¿Qué se puede esperar

Para continuar con la construcción de nuestra escena, vamos a ver cómo manejar las cámaras.

Resultado final

¿Cómo puedo hacer esto?

Cámaras de gestión es bastante simple: Babylon.js soporta 3 tipos de cámaras:

• Freecamera es un FPS como cámara donde el control de la cámara con las teclas de los cursores y el ratón
  
• TouchCamera es una cámara controlada con eventos táctiles (que requiere “hand.js” para trabajar, siempre incluidos en nuestras demos)
  
• ArcRotateCamera es una cámara que gira alrededor de un pivote dado. Puede ser controlado con los eventos del ratón o táctiles (y también requiere “hand.js” para trabajar)
  
  

  Se puede crear tanto las cámaras como desee, pero sólo una cámara puede estar activo a la vez. Aquí es cómo escribir el código para cada una de esas cámaras:
  // Freecamera & gt; & gt; Puedes moverte por el mundo con el ratón y el teclado // Parámetros: nombre, cargo, escena var = new Freecamera BABYLON.FreeCamera ( «Freecamera», nueva BABYLON.Vector3 (0, 0, 5), escena); // 123 Freecamera & gt; & gt; Puedes moverte por el mundo con el ratón y el teclado // Parámetros: nombre, cargo, scenevarfreeCamera = newBABYLON.FreeCamera ( «Freecamera», newBABYLON.Vector3 (0,0,5), escena); // TouchCamera & gt; & gt; Moverse en su mundo con su toque de pantalla // Parámetros: nombre, cargo, escena var = new touchCamera BABYLON.TouchCamera ( «TouchCamera», nueva BABYLON.Vector3 (0, 0, 10), escena); // 123 TouchCamera & gt; & gt; Moverse en su mundo con su toque de pantalla // Parámetros: nombre, cargo, scenevartouchCamera = newBABYLON.TouchCamera ( «TouchCamera», newBABYLON.Vector3 (0,0,10), escena); // ArcRotateCamera & gt; & gt; La cámara girando alrededor de un punto 3D (aquí Vector cero) // Parámetros: nombre, alfa, beta, radio, blanco, escena var arcCamera = nuevo BABYLON.ArcRotateCamera ( «ArcRotateCamera», 1, 0,8, 10, nuevo BABYLON.Vector3 (0 , 0, 0), escena); 123 // ArcRotateCamera & gt; & gt; La cámara girando alrededor de un punto 3D (aquí Vector cero) // Parámetros: nombre, alfa, beta, radio, objetivo, scenevararcCamera = newBABYLON.ArcRotateCamera ( «ArcRotateCamera», 1,0.8,10, newBABYLON.Vector3 (0,0,0 ), escena);

  Todas las cámaras pueden manejar automáticamente las entradas para usted llamando a la función “attachControl” en el lienzo. Y se puede revocar el control mediante el uso de la función “detachControl”:
  // Monte la cámara en la scenecamera.attachControl (lienzo); // 12 Acople la cámara a la scenecamera.attachControl (lienzo);

  Tenga en cuenta que puede cambiar algunos parámetros más tarde, dependiendo del tipo de cámaras: Cambio de destino / posición de la cámara ArcRotate:
  arcCamera.target = new BABYLON.Vector3 (3, 0, 0); arcCamera.setPosition (nuevo BABYLON.Vector3 (0, 0, 50)); 12arcCamera.target = newBABYLON.Vector3 (3,0,0); arcCamera. setPosition (newBABYLON.Vector3 (0,0,50));

  Cambiar la sensibilidad de la cámara de tacto:
  touchCamera.moveSensibility = 100; 1touchCamera.moveSensibility = 100;

  Aplicar la gravedad de la cámara libre: más tarde en los tutoriales
  

  Mensajes relacionados