WebGl

Retomamos el mundo de la programación WebGl con ThreeJS. Veamos un pequeño ejemplo que trata la renderización de un cubo en movimiento.

A continuación dejamos el código completo que además muestra el resultado en tiempo real. Espero que podáis encontrarlo interesante y os sirva para adentraros en el mundo de la programación 3D en web.

See the Pen ThreeJS – 01 – Render a cube by Trescomatres (@trescomatres) on CodePen.

Como podéis ver creamos la escena, la cámara, el cubo (con su material en formato wire) y realizamos el renderizado.

Recordad, y es importante, que vuestro navegador debe tener habilitado la aceleración WebGL. En este enlace podréis encontrar cómo habilitar WebGl en Chrome y en este otro cómo habilitar WebGl en Firefox.

Programar 3D es complicado. Necesitaréis sacar de vuestro rincón más olvidado de vuestro cerebro las matemáticas… Si queréis entender y profundizar en la programación 3D, las matemáticas son indispensables…

Aquí podéis encontrar más información

Artículos relacionados

Three.js – Ejemplo mover cámara (OrbitContro... Si ya vimos en el anterior artículo, un ejemplo sencillo en Three.js de cómo crear un cubo, en éste vamos a mostrar la manera de mover la cámara de un...
Habilitar WebGL en navegador FireFox Hace dos días os mostré cómo habilitar la aceleración gráfica en vuestro navegador Chrome (en mi caso lo necesitaba para probar programas creados con ...
Three.js – WW2Viewer añadiendo Spitfire MK I... Este fin de semana he añadido un nuevo vehículos de la Segunda Guerra Mundial a mi catálogo 3D online. WW2Viewer es un pequeño proyecto realizado con ...
Three.js – Proyectos de ejemplo (1) Aquí os dejo algunos enlaces a ejemplos de proyectos creados con Three.js. Con esta librería 3D con el que poder trabajar WebGL, o lo que es lo mismo,...