10 asombrosos ejemplos de código abierto de Three.js en acción

Puede parecer una locura, pero en realidad puedes construir objetos 3D con JavaScript. La mayoría de los desarrolladores web confían en bibliotecas como Three.js para lograr esto.

Pero es un proceso tan detallado que no todos se molestan en investigarlo. Ahora, si tiene curiosidad acerca de las cosas 3D JS, la mejor manera de aprender es estudiando a otros. Es exactamente por eso que hice esta galería.

Estos son algunos de los mejores proyectos de Three.js que pude encontrar alojados en CodePen. Cuentan con un montón de estilos y rasgos diferentes que harán que tu motor creativo se acelere.

1. Tierra de baja poli

Con un solo elemento HTML y unas cuantas docenas de líneas de CSS/JS, tenemos este Earth de baja poli del desarrollador Sam Saccone.

Puede que no parezca mucho al principio. Pero es una de las ideas más destacadas que he visto e incluso utiliza un efecto de animación personalizado. Las masas de tierra incluso sobresalen de la Tierra, dándole una apariencia mucho más realista.

Cualquiera que haya usado Three.js antes debería saber lo increíble que es.

Sin duda, es un salto adelante de proyectos similares, principalmente por su base de código más pequeña.

2. Esferas

Este extraño proyecto similar a un planeta también usa Three.js con un efecto bastante bueno. Spheres se ejecuta en el preprocesador Stylus, que puede ver importado en el CSS.

También se ejecuta sin HTML, lo que realmente lo convierte en un espectáculo para la vista. Es todo JS, todo 3D y funciona perfectamente en todos los navegadores modernos.

Las esferas más pequeñas se deslizan sobre el orbe más grande utilizando funciones geométricas de la biblioteca JS. Parece una locura que esto sea posible, pero es un testimonio de lo lejos que hemos llegado con CSS.

3. Rotación de planetas

Entrando en más ideas de planetoides, tenemos esta loca galaxia giratoria creada por el desarrollador Bryan Jones.

También usa nada más que Three.js y algo de CSS básico para diseñar y organizar los planetas. Debo decir que los efectos 3D son sorprendentes. ¡Todavía no puedo entender el hecho de que esto es posible en un navegador web típico!

Pero no se puede negar que este fragmento de código de CodePen es una gran ayuda para el estudio si recién está comenzando en el territorio de Three.js.

4. Logotipo de la casa del árbol en Three.js

El recurso de aprendizaje en línea Treehouse es simplemente fenomenal, especialmente para los novatos. Uno de sus instructores, Nick Pettit, creó un logotipo completo de Treehouse usando Three.js.

¡Y permítanme decir que esto es increíble! Nunca he visto una configuración como esta y rara vez veo bolígrafos que tengan comentarios tan detallados. El código de Nick hace que sea mucho más fácil profundizar, encontrar funciones que no entiendes y luego buscar respuestas en Google.

Todo acerca de este logotipo 3D debería demostrar que el JS moderno está lejos de ser obsoleto.

Sugerencia: intente hacer clic y arrastrar sobre la pantalla para rotar el logotipo. ¡Cosas divertidas!

5. Barril de madera

Aquí hay otro fragmento loco desarrollado por Nick Pettit usando solo código JS puro. Sin HTML, sin CSS: todo se procesa a través del lenguaje JavaScript.

Naturalmente, esto se basa en el elemento canvas, que puede generar dentro de JavaScript. Yo mismo lo he usado un poco, pero nunca a este nivel. Muestra cuánto puede hacer con una biblioteca 3D sólida.

Y también demuestra que Nick realmente sabe cómo enseñar. Esta es solo una de las muchas muestras en su cuenta de CodePen, todas las cuales tienen comentarios fáciles de leer para aprender sobre la marcha.

6. Tres.js + TweenMax

El desarrollador Martand Kashyap combinó el script TweenMax junto con Three.js para hacer esta locura.

Es uno de los bolígrafos más exclusivos de esta lista, con algunos efectos de animación geniales. Los paneles en realidad se ven como superficies planas en 2D, pero las animaciones de volteo crean un efecto 3D natural. Se vuelve bastante loco si lo miras el tiempo suficiente.

En realidad, esto se basó en un proyecto de gráficos en movimiento que Martand convirtió a JavaScript. Estoy viendo esto mucho más a menudo y es bastante impresionante.

7. Campo estelar de partículas

El concepto de movimiento en una superficie 2D trae a la mente todo tipo de diseños de paralaje. Los encontrará en toda la web, muchas veces utilizando funciones experimentales en JavaScript.

Y este fragmento de CodePen es más que fantástico para recopilar tales ideas. Tiene una animación bastante loca con diferentes velocidades de zoom, desplazamiento lateral y un montón de otras características relacionadas.

Las partículas se generan de forma dinámica y puede hacer clic en cualquier parte de la página para acercarlas. Se siente como un vacío interminable de espacio, muy parecido al que vivimos. Pero este se creó con código JS puro.

8. Cubos Haml

Para obtener más geometría giratoria, consulte estos cubos Three.js. Se ejecutan en el lenguaje de plantillas Haml junto con ~100 líneas de JavaScript.

Quizás la parte más impresionante de este diseño es el efecto de sombreado. No ve esto muy a menudo, pero es una de las mejores maneras de crear un efecto 3D de aspecto realista en el navegador.

Afortunadamente, puede manejarlo todo a través de Three.js, con los fragmentos correctos. Y este puede funcionar como una gran plantilla para ese propósito.

9. Teseracto

Mike Fey desarrolló este tesseract increíblemente complejo representado en el espacio 3D. En realidad, se parece más a un cubo desplegado organizado en un espacio 3D, algo así como un cubo dentro de un cubo.

Pero tenga en cuenta que esta demostración requiere muchas bibliotecas para que funcione. Mike tiene cinco scripts JS diferentes con jQuery, jQuery UI, ThreeJS, TweenJS y un script CubeJS. Los últimos 3 están alojados en su sitio personal y deben ser de libre acceso.

No puedo decir que este proyecto sería valioso en el mundo real. Pero es un gran recurso de aprendizaje si desea sumergirse en la geometría espacial 3D.

10. Fragmentos 3D

El desarrollador Tobias Duhr creó estos fragmentos 3D como muestra de lo que es posible en ThreeJS. Funcionan como los cubos giratorios mencionados anteriormente, excepto que las formas son diferentes y el sombreado también desaparece.

Consideraría que esta es una introducción más fácil para aprender ThreeJS si no está seguro de por dónde empezar. Por supuesto, este no es un tutorial, por lo que no puede enseñarle como otros recursos.

Pero, con solo estudiar este código, obtendrá algunas ideas nuevas para su propio trabajo.

11. Árbol de Pitágoras en 3D

Este árbol de Pitágoras en 3D es simplemente impresionante. El desarrollador Josep Llodra creó este proyecto con solo 150 líneas de JavaScript, junto con la biblioteca Three.js.

En realidad, se basa en este proyecto, que mencioné anteriormente. Básicamente, estructura esos cubos en una sola forma definida y luego los organiza según el tamaño y la posición.

Si no está seguro de lo que puede hacer con Three.js, espero que esta galería le sirva de inspiración. Pero siempre puedes encontrar más en CodePen si estás dispuesto a mirar alrededor.