Three.js – Ejemplo creación cubo

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

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 – 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...
Three.js – Mover un cubo con teclado Otro ejemplo en Three.js en el que podemos ver cómo mover un objeto capturando el teclado al que llamamos ejemplo three.js teclado . Moveremos a derec...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...

Deja un comentario

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

*