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

Esta vez vas a aprender a mover y rotar cualquier tipo de objetos que creó en nuestro último tutorial.

Resultado final

¿Cómo puedo hacer esto?

En esta escena, no vamos a cambiar nada en la estructura: los cambios son sólo en el archivo de escena, en la función llamada “createSceneTuto”. Como de costumbre, estamos iniciando la función escribiendo elementos básicos de una escena:
función createSceneTuto (motor) {var = new escena BABYLON.Scene (motor); luz var = nuevo BABYLON.PointLight ( «Omni», nuevo BABYLON.Vector3 (0, 100, 100), escena); cámara var = new BABYLON.ArcRotateCamera ( «Cámara», 0, 0,8, 100, nuevo BABYLON.Vector3.Zero (), escena); 1234functioncreateSceneTuto (motor) {varscene = newBABYLON.Scene (motor); varlight = newBABYLON.PointLight ( «Omni», newBABYLON.Vector3 (0.100.100), escena); varcamera = newBABYLON.ArcRotateCamera ( «cámara», 0,0.8,100, newBABYLON.Vector3.Zero (), escena);

A continuación, crear tanto como cajas que desee:
// creación de 3 boxs y 2 esferas var box1 = BABYLON.Mesh.CreateBox ( «Box1», 6.0, escena); var box2 = BABYLON.Mesh.CreateBox ( «Box2», 6.0, escena); var box3 = BABYLON.Mesh.CreateBox ( «Box3», 6.0, escena); […] 12345 // Creación del Grupo Cajas de 3 y 2 spheresvarbox1 = BABYLON.Mesh.CreateBox ( «Cuadro1», 6.0, escena); varbox2 = BABYLON.Mesh.CreateBox ( «Box2», 6.0, escena); varbox3 = Babilonia. Mesh.CreateBox ( «Caja3», 6.0, escena); […]

Como hemos visto antes, ahora se puede colocar todas las cajas en la escena
// Posicionamiento de la boxesbox1.position = new BABYLON.Vector3 (-20,0,0); box2.position.x = -10; // mismo que: box2.position = new BABYLON.Vector3 (-20,0,0); box3.position.x = 0; 1234 // Posicionamiento la boxesbox1.position = newBABYLON.Vector3 (-20,0,0) ; box2.position.x = -10; // igual que: box2.position = new BABYLON.Vector3 (-20,0,0); box3.position.x = 0;

Y ahora, con la misma facilidad de la codificación, puede girar en todos los ejes, y cambiar la escala en cualquier tamaño! Por ejemplo:


  • Rotación (ángulos son en radianes) // Girar la caja alrededor del eje x box1.rotation.x = Math.PI / 4; // o box1.rotation = new BABYLON.Vector3 (Math.PI / 4,0,0); // Girar la caja alrededor del eje y box2.rotation.y = Math.PI / 6; 12 345 // Girar la caja alrededor del eje x box1.rotation.x = Math.PI / 4; // o box1.rotation = nuevo BABYLON.Vector3 (Math.PI / 4,0,0); // Girar la caja alrededor del eje y box2.rotation.y = Math.PI / 6;
  • Scaling // escalado de 2x en el eje x Box3.scaling.x = 2; 12 // escalado de 2x en el eje x Box3.scaling.x = 2;

    característica del Otro Babilonia se está moviendo un objeto, relativamente a otro mediante la creación de un enlace entre dos mallas. Este enlace implica que todas las transformaciones de los padres (posición / rotación / escalado) se combinarán con las transformaciones del niño.
    // Posicionamiento de la box3 con relación a la box1 Box3.parent = box1; Box3.position.z = -10; 123 // Posicionamiento la box3 con relación a la box1Box3.parent = box1; Box3.position.z = -10;

    Mensajes relacionados

Deja una respuesta

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