En este curso aprenderás a trabajar con Three.js desde cero con JavaScript, cuando termines el curso podrás crear proyectos sencillos en base a figuras geométricas en 3D animados con iluminación, variados e interactivos.

El mundo 3D es fascinante, y esto lo demuestra la cantidad de tecnologías digitales que existen hoy en día, desde variados juegos, hasta entornos completos para desarrollar proyectos en 3D como Blender, Unity, unreal y muchas más; ahora, adentrarte en este mundo está al alcance de tu mano poder empezar a crear tus primeros proyectos 3D.

¿Qué aprenderemos?

A nivel técnico aprenderás ha trabajar con las siguientes características en Three.js:

1. Sobre Three.js

2. Escena, cámaras, figuras e iluminación

3. Animar figuras aplicando operaciones geométricas y variar el color

4. Tipos de luces

5. Tipos de figuras geométricas soportadas

6. Interactuar con la escena

7. Obtener información sobre la escena

8. Trabajar con combinación de materiales

9. Aplicar sombras

Proyectos o aplicaciones

• En cada clase o sección, vamos a ir creando proyectos sencillos variados para avanzar efectivamente:

  • Un sencillo jardín con iluminación

  • Escenas con figuras aleatorias

  • Escenas con figuras geométricas animadas

  • Escenas con figuras apiladas

  • Escenas aplicando materiales variados

  • Escenas aplicando iluminación variada

  • Escenas aplicando transformaciones geométricas

  • Escenas con interacción del usuario

****** Clases: ******

Primeros pasos

1. Preparar entorno

   1. Vamos a preparar nuestro navegador e IDE para el desarrollo.

2. Primer ejemplo: un Cubo

   1. Vamos a presentar los elementos básicos de three.js creando un cubo y todo lo que esto conlleva.

3. Demo: comparación de Three.js con otras herramientas 3D como Blender

   1. Vamos a hacer una comparación entre herramientas 3D.

4. Ver el wireframe

   1. Vamos a convocar una opción para ver el alambrado.

5. Generar una esfera

   1. Vamos a generar nuestra siguiente figura geométrica, una esfera.

6. Ejercicio: Alinear una esfera y cubo y que sean del mismo tamaño

   1. Vas a alinear ambas figuras geométricas y colocarles el mismo tamaño.

7. Ejercicio: Rotaciones

   1. Veremos cómo usar las rotaciones.

8. Generar un plano

   1. Vamos a generar un plano y ubicarlo debajo de nuestras figuras.

9. Generar axis

   1. Vamos a generar un nuevo elemento, de ayuda esta vez, el eje cartesiano en 3D.

10. lookAt camera: Colocar la mira de la camara sobre la escena

    1. Aprenderemos a configurar la cámara para que apunte a nuestra escena, en esencia a cualquier cosa que tenga un vector 3D.

11. Publicar en git

Proyecto: Jardín

1. Script esqueleto

   1. Vamos a crear una plantilla para futuros proyectos.

2. Crear la base y barras

   1. Vamos a crear la base y los lados del jardín.

3. Crear arbol

   1. Vamos a crear un árbol el cual consta de una caja y una esfera.

4. Crear casa

   1. Vamos a crear una casa la cual consta de un cilindro y un cono.

5. Refactorizar código

   1. Vamos a organizar nuestra aplicación en funciones.

6. Pequeños detalles

   1. Vamos a terminar la app adaptando pequeños detalles.

Aspectos Generales

1. Snippets para VSC

   1. Vamos a instalar una extensión para trabajar con Three.js.

2. Primeros pasos con la iluminación: materiales, y helpers

   1. Vamos a conocer el uso de los materiales que pueden trabajar con las luces.

3. Proyectar sombras

   1. Aprenderemos a proyectar sombras.

4. Primeros pasos con las animaciones: Desplazamientos

   1. Vamos a crear una animación en la cual haremos que una esfera rebote en el entorno 3D.

5. Primeros pasos con las animaciones: Rotaciones

   1. Vamos a rotar el cubo en todos sus ejes.

6. Tarea: Adaptar luces a la escena con sombras

   1. Vas a adaptar unas luces a la escena con sombra.

7. Primeros pasos con las animaciones: Escalado

   1. Vamos a escalar el cubo en todos sus ejes.

8. Primeros pasos con las animaciones: Color, pruebas

   1. Vamos a realizar algunas pruebas para cambiar el color de un objeto.

9. Primeros pasos con las animaciones: Color, tweenmax

   1. Vamos a realizar una animación para cambiar los colores de un objeto.

10. Re-escalar ventana y escena

    1. Aprenderemos a reescalar la escena cuando cambia el tamaño de la ventana.

11. GUI Hacer experimentos fácilmente

    1. Vamos a agregar elementos de UI para variar valores de las variables fácilmente y aplicarlas en las animaciones.

12. Extra: Color del renderizado

    1. Conoceremos la forma en la cual podemos cambiar el color del render.

13. Extra: Luz ambiental

    1. Conoceremos cómo podemos habilitar una luz ambiental.

Proyecto: Interactuar con la escena

1. Interactuar con la escena con campos de formulario, cambiar color

   1. Vamos a realizar algunas pruebas con los campos de formulario para interactuar con la escena.

2. Interactuar con la escena con campos de formulario, cambiar color parte 2

   1. Vamos a cambiar el color de un cubo cada vez que seleccionemos un radios y aplicarle el valor que tenga establecido el radio.

3. Interactuar con la escena con campos de formulario, cambiar color parte 3

   1. Vamos a cambiar el color de manera animada.

4. Interactuar con la escena, variar posicionamiento

   1. Vamos a variar la posición del cubo con las flechas del teclado.

5. Interactuar con la escena, Crear un panel de opciones

   1. Vamos a crear un banner para definir las opciones que vamos a poder realizar en la escena.

6. Interactuar con la escena, variar rotación

   1. Vamos a colocar la opción de rotación en el panel.

7. Interactuar con la escena, variar escala

   1. Vamos a colocar la opción de escala en el panel.

8. Interactuar con la escena, animar

   1. Vamos a animar la escena para que los cambios no sean bruscos.

9. Interactuar con la escena, agregar luces y un plano

   1. Vamos a agregar luces y sombras.

10. Mover la cámara, lookAt

    1. Vamos a cambiar la invocación de la función lookAt para la cámara para que se actualice la posición cada vez que exista un cambio.

11. Mover la cámara, variar posición

    1. Vamos a indicar la cámara como elemento desplazable.

12. Mover la luz

    1. Con los mismos controles que usamos para mover la cámara, vamos a mover la luz.

13. Extra: TrackballControls

    1. Vamos a conocer un paquete que nos permite hacer una interacción fácilmente con la escena.

Proyecto: Agregar figuras geométricas bajo demanda

1. Proyecto base

   1. Vamos a crear un proyecto basado en otro anterior.

2. Agregar un cubo mediante un botón

   1. Vamos a agregar un cubo mediante un botón.

3. Variar tamaño, color y posición Y del cubo

   1. Vamos aspectos del cubo para que sea más dinámico.

4. Animar la escena con rotaciones

   1. Vamos a adaptar las animaciones de rotaciones del cubo en la escena.

5. Agregar esferas o cubos en aleatorio

   1. Vamos a agregar otro tipo de elementos geométricos.

6. Número de objetos

   1. Vamos a agregar un escuchador para detectar cuantos elementos tenemos en la escena.

7. Remover cubos y esferas

   1. Vamos a crear una función para remover figuras de la escena.

8. Publicar en Git

Proyectos

1. Escena caótica (Rotar escena) - modificar proyecto sección anterior

2. Seno y coseno - modificar proyecto sección anterior

3. Escena orden - modificar proyecto sección anterior

4. Neblina - modificar proyecto anterior

Proyecto: Luces

1. Configuraciones iniciales

   1. Configuración inicial del proyecto que vamos a duplicar.

2. Luz Ambiental

   1. Crearemos una configuración personalizable mediante la GUI de la luz ambiental.

3. Control Spotlight

   1. Asignaremos una nueva fuente de luz con su controlador.

4. Control Point Light

   1. Asignaremos una nueva fuente de luz con su controlador y una sencilla animación.

5. Regular la intensidad de la luces y suspender sombreado

   1. Vamos a realizar una adaptación para apagar las sombras cuando no tenemos intensidad en la luz.

6. Point Light: decay, distance y MeshPhongMaterial

   1. Vamos a crear un efecto de foco sobre una mesa empleando los elementos señalados anteriormente.

7. Control Directional Light

   1. Vamos a crear la luz de tipo direccional.

Proyecto: Materiales

1. MeshDepthMaterial: Color basado en la cercanía

   1. Presentaremos un material con el cual podemos variar la intensidad del color según la cercanía o lejanía de la cámara.

2. MultiMaterialObject: Combinar materiales

   1. Aprenderemos a combinar materiales.

Geometría

1. Geometrías básicas

   1. Veremos las geometrías básicas para nuestra escena.

Cámaras

1. Cámaras ortogonal y perspectiva

   1. Veremos el uso de las configuraciones de las cámaras que podemos usar en Three.js.