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. Three.js con un ejemplo creación de un cubo.
A continuación dejamos el código completo que además muestra el resultado en tiempo real. Aprovechamos todo el potencial que nos facilita CodePen para poder mostrar y compartir nuestros códigos para que puedan mejorarse o, lo que es más interesante, poder mostrar el resultado de forma instantánea. 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.
See the Pen ThreeJS – 01 – Render a cube by Trescomatres Multimèdia S.L. (@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.
Con este tutorial de Three.js con ejemplo creación cubo, añadimos al listado de tutoriales de programación javascript uno muy interesante que trata la programación 3D en nagevadores.
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