Bienvenido al tutorial de introducción en curso Serie de tutoriales de BabylonJS. Hoy vamos a ver cómo crear nuestra primera configuración y ejecución sencilla de la aplicación Babylon. Como siempre, hay una versión en video HD de este tutorial. disponible aquí o incrustado abajo.
Para comenzar con BabylonJS, necesitamos una página web que contenga una etiqueta
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvas {
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
Nada especial aquí. Simplemente creamos una etiqueta de lienzo llamada lienzo, le damos un estilo para que ocupe toda la página y eso es todo. Ahora necesitamos vincular a la biblioteca de BabylonJs. Tiene algunas opciones aquí, puede descargarlo localmente o alojarlo desde una red de entrega de contenido (CDN). Adoptaré este enfoque, ya que generalmente es la opción más rápida para los usuarios finales. Incluso puede crear una versión simplificada con solo las características requeridas aquí.
Las opciones para usar BabylonJS incluyen:
Babylon.max.js es la versión más legible por humanos, por lo que es la más fácil de depurar pero la más lenta de cargar. Durante el desarrollo, esta es la versión que voy a utilizar. Simplemente vincule a esta biblioteca en algún lugar dentro de la etiqueta
de nuestro HTML.<script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>
Tenemos la configuración de nuestra página web de host y el enlace de Babylon, es hora de finalmente llegar a un código. Debajo de nuestro lienzo, agregue el siguiente código:
<script>
window.addEventListener('DOMContentLoaded', function(){
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
Vector3(0, 0,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
});
</script>
Cuando ejecutamos este código deberíamos ver:
Comienzos humildes sin duda, pero nuestra primera aplicación en ejecución está completa. Entonces, ¿qué estamos viendo aquí? Es un cubo sin luz visto por una cámara que mira el origen desde -10 unidades hacia abajo en el eje z. Echemos un vistazo rápido al código que nos trajo aquí. Primero, creamos una función a la que llamamos cuando se activa el evento DOMContentLoaded, de modo que, básicamente, cuando se carga nuestra página, se llama a esta función. Repasemos la función.
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
Este código obtiene una referencia a la etiqueta de lienzo que creamos en nuestro archivo HTML. Luego usamos este lienzo para crear una instancia de nuestro motor de juego Babylon.
var createScene = function(){
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 0,-10),
scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);
return scene;
}
Aquí estamos creando una función que configurará nuestra escena. Primero, creamos una nueva escena utilizando nuestro motor recién creado. Luego establecemos el color claro en blanco. El color claro es el color con el que se borra cada cuadro entre llamadas, esencialmente configurando el color de fondo en blanco. A continuación, creamos una FreeCamera llamada «cámara1», ubicada en -10 a lo largo del eje Z en nuestra escena. A continuación, establecemos el destino en el origen (0,0,0). Entraremos en más detalles sobre las cámaras en breve, así que salteemos esto por ahora. Luego creamos un cubo en el origen llamado «Caja» que tiene dimensiones de 4x4x4. Observe en ambos cuando creamos la cámara y el cuadro al que pasamos la escena. Esto hace que estas entidades se creen en esa escena en particular. Finalmente, devolvemos nuestra escena recién creada desde nuestra función.
var scene = createScene();
engine.runRenderLoop(function(){
scene.render();
});
A continuación, creamos nuestra escena llamando a nuestra función createScene() recién definida. Luego comenzamos nuestro bucle de juego llamando a engine.runRenderLoop(). El bucle del juego se puede considerar como el corazón de nuestro juego. Este es un bucle que se llamará una y otra vez lo más rápido posible. Si, por ejemplo, su juego está dibujando a 60FPS, esta función se llama 60 veces en un segundo. Por ahora, todo lo que hacemos es llamar al método render() de la escena, lo que hace que se dibujen los contenidos de esa escena.
Aquí ahora está el código en su totalidad. (Un proyecto de WebStorm está disponible en el Patreon de GFS Directorio de Dropbox Serie de tutoriales –> Babylon para patrocinadores)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.babylonjs.com/2-4/babylon.max.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('canvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3.White();
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.
Vector3(0, 0, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
var box = BABYLON.Mesh.CreateBox("Box", 4.0, scene);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
});
</script>
</body>
</html>
Eso es todo por ahora. En la siguiente parte, exploraremos las cámaras con más detalle.
