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.

Tutorial

En este tutorial, vamos a crear una escena 3D básico con BabylonJS.

Resultado final

¿Cómo puedo hacer esto?

Usted puede desarrollar esta escena muy fácilmente en 2 simples pasos.

Antes de empezar, asegúrese de tener un navegador compatible con WebGL (por ejemplo, “IE 11” en Windows 8.1).

El elemento web

En primer lugar, crear una página web básica HTML5 (Visual Studio es su amigo):

A continuación, añadir un elemento de tela a la escena y un poco de CSS. Este lienzo es un elemento HTML5, cosa que se utiliza para dibujar nuestra escena.

• En la parte del cuerpo:
  
• Y en la parte de la cabeza, ponemos nuestro CSS para ver el lienzo de tamaño máximo: & lt; & gt estilo; html, cuerpo, div, lona {width: 100%; altura: 100%; padding: 0; margin: 0; overflow: hidden; } & Lt; estilo / & gt; 123456789 & lt; estilo & gt; html, cuerpo, div, lona {width: 100%; altura: 100%; padding: 0; margin: 0; overflow: hidden; } & Lt; estilo / & gt;
  
  

  La parte JavaScript
  

  Ahora tenemos una página web vacía, lista para visualizar en 3D! Deje que la magia suceda añadiendo el código fuente de Babilonia JavaScript en la sección de cabecera: