¿Qué es Babylon.js? - Babylon.js

¿Qué es Babylon.js?, Un motor 3D basado 100% en JavaScript, desarrollado por programadores de Microsoft con el apoyo de ubisoft.

El enfoque es para los juegos aprovechando html5 y WebGl,

logo2

¿Por qué WebGL?

Con la entrada de WebGl se tiene la capacidad de crear elementos gráficos de manera nativa.

¿Qué podemos hacer con babylon.js?

  • Motor de colisiones
  • Motor de animaciones
  • Sistemas de partículas
  • Cámaras.
  • Puede convertirse en .OBJ, .FBX, .MXB
  • Exportar o importar a Blender.

Sitio oficial: http://www.babylonjs.com/, donde te puedes encontrar muchos ejemplos y mucha información relevante, además tienes una documentación completa en la siguiente dirección: http://doc.babylonjs.com/

También se puede encontrar con una documentación más técnica: http://www.sokrate.fr/documentation/babylonjs/BABYLON.html

 

Crear una escena básica



 Clases a usar:

BABYLON.Engine: Sirve para crear un motor de control mediante una etiqueta html5 (canvas). http://www.sokrate.fr/documentation/babylonjs/BABYLON.Engine.htm.

BABYLON.Scene: Construye un escenario donde estarán todos los objetos gráficos. http://www.sokrate.fr/documentation/babylonjs/BABYLON.Scene.html

BABYLON.ArcRotateCamera: Crea una nueva cámara que gira alrededor de un pivote dado. Se puede controlar mediante eventos del ratón o tocar (requiere “hand.js”) http://www.sokrate.fr/documentation/babylonjs/BABYLON.ArcRotateCamera.html

 BABYLON. PointLight: Un punto de luz es una luz definida por un punto único. La luz se emite en todas las direcciones desde este punto. http://www.sokrate.fr/documentation/babylonjs/BABYLON.PointLight.html

BABYLON. Mesh: Crea una nueva malla.   http://www.sokrate.fr/documentation/babylonjs/BABYLON.Mesh.html

1.- Para empezar a usar babylon hay que crear etiquetas html para llamar a la librería javascript, incluyendo el control del render, mismos que te puedes encontrar en la siguiente dirección

<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="http://www.babylonjs.com/hand.minified-1.2.js"></script>

 

2.- Incluimos el siguiente código que es un elementos canvas donde se repositara el render, esto lo hacemos de la siguiente forma:

<style>
 html, body, div, canvas {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
 }

</style>
<div id="DivConCaracterística">
<canvas id="Modelado3D"></canvas>
</div>

3.- A continuación incluimos el codigo abajo de la etiqueta canvas, como se muestra en el siguiente código:


// Elemento canvas
var ElementoCanvas = document.getElementById("Modelado3D");

// Cargar BABYLON 3D en las canvas
var Motorbabylon = new BABYLON.Engine(ElementoCanvas, true);
var Escenario = new BABYLON.Scene(Motorbabylon);

//Cargar la cámara
var Camara = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), Escenario);

// Agregamos la luz
var Luz = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), Escenario);

// elemento 3D (esfera)
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, Escenario);
// Agregar la cámara al escenario
Escenario.activeCamera.attachControl(ElementoCanvas);

// Agregamos un render del escenario
Motorbabylon.runRenderLoop(function () {
Escenario.render();
});