Tresjs, interfaces 3D con VueJs

Empezaremos con la escena básica, el "hello world" para familiarizarnos con la sintaxis. No te preocupes, hay clases dedicadas a explorar los conceptos mucho más en profundidad más adelante

Continuaremos desde lo más básico, entendiendo que son, de donde vienen y como están compuestas las instancias, así como sus propiedades.

Conocidas también como affine transformations, son las operaciones básicas y comunes de los objetos 3D (mesh). En esta clase corta veremos como manipular los objetos con respecto a nuestro mundo 3D

Los Mesh serán probablemente los objetos más importantes de nuestras escenas 3D, en esta lección veremos en profundidad, como están compuestos y como crearlos

Los contextos tanto globales como locales (por componente) son un concepto muy poderoso y necesario para crear escenas complejas, utilizar métodos fuera de Tres.js y realizar configuraciones más avanzadas, acá veremos como acceder a ellos y como funcionan

Una lección entretenida sobre como darle vida a nuestra escena y agregar animaciones usando Tres.js. Tres.js está pensado para realizar escenas en real-time (tiempo real), similar a los juegos!

Similar a como funcionan los objetos en la vida real, las luces son uno de los elementos más importantes en nuestras escenas con PBR (physical based rendering)

Continuando con la lección pasada, aprenderemos como añadir sombras básicas, que darán un toque de realismo y sentido a nuestra escena

Veremos como añadir texturas a nuestros Mesh, no solo color, también aprenderemos diferentes tipos de texturas y su uso

Basta de tanta teoría, ¡pongamos a prueba lo aprendido!
En esta práctica, crearemos un planeta tierra desde 0 y podremos incluso añadir nuestra ubicación.

Para poder crear escenas más complejas necesitamos aprender a movernos a través de ella, los controles son la mejor forma de hacer esto, pueden ser usados en el desarrollo tanto como en el resultado final

Las primitivas son un objeto especial que expandirá nuestro potencial en Tres.js. Otra herramienta más en nuestro arsenal creativo

¡Divirtámonos un poco!
En esta práctica aprenderemos a usar los eventos proporcionados por Tres.js, lo que nos permitirá interactuar con nuestra escena.

Cuando trabajamos con diseñadores, o incluso para encontrar el valor exacto, a veces es muy difícil cambiarlo en el código y esperar por el resultado. Los paneles de configuración nos ayudan inmensamente en esta tarea, muy fáciles de instalar, y usar

Estamos usando nuestro front-end framework favorito, aprovechémoslo, podemos usar funciones built-in como el componente <Transition /> igual que lo usaríamos en el DOM

Continuando con la lección anterior, esta vez aprenderemos como usar los componentes dinámicos que nos provee Vue.js, solo que esta vez con objetos 3D

Entretenida práctica, aprenderemos algunas propiedades de los materiales y las texturas, y como crear una escena simple en pocos minutos

Cientos es el paquete más estable de todo el ecosistema de Tres.js y si bien es opcional, probablemente lo quieras, porque nos simplifica mucho la vida, esta lección solo será un overview de este paquete (ya que es enorme).

Quizás lo que muchos estábamos esperando, como importar y usar modelos 3D en nuestras escenas, y verás que es muy pero que muy sencillo

Exploraremos juntos el código fuente de Tres.js en GitHub y otros paquetes. Explorar el código nos ayuda a entender mejor como se crean y manejan abstracciones a este nivel, siéntete libre de copias lo que necesites y quizás hasta de abrir un PR.

Una parte muy importante, siempre a considerar especialmente en estas experiencias inmersivas, es el rendimiento, acá te dejo algunos tips que espero te sirvan

No una clase como tal, pero personalmente al comenzar en este mundo veía estas herramientas CAD como un mundo para supergenios, con este video quiero ayudarlos a perder un poco de ese miedo y quizás animarlos a aprender más herramientas

Unas palabras del creador de Tres.js