El curso se encuentra disponible aquí, en la Academia y por Udemy.
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.
Esquema del Curso de Three.js
Vamos a trabajar mediante la CDN de Three.js y una web en HTML en la cual vamos a realizar cada uno de los proyectos con el objetivo de conocer los fundamentos de Three.js
No necesitas tener conocimientos previos, salvo conocer las bases de HTML, CSS y JavaScript.
El resto de este inmenso curso se encuentra dividido en las siguientes secciones:
Conclusiones
A nivel técnico aprenderás ha trabajar con las siguientes características en Three.js:
- Sobre Three.js
- Escena, cámaras, figuras e iluminación
- Animar figuras aplicando operaciones geométricas y variar el color
- Tipos de luces
- Tipos de figuras geométricas soportadas
- Interactuar con la escena
- Obtener información sobre la escena
- Trabajar con combinación de materiales
- Aplicar sombras
Si quiere obtener toda la traza de las clases; te recomiendo que veas alguno de los enlaces anteriores.
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:
Presentación
-
1 Introducción
-
2 Realizar preguntas
Primeros pasos
-
1 Preparar entorno
Vamos a preparar nuestro navegador e IDE para el desarrollo.
-
2 Primer ejemplo: un Cubo
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
Vamos a hacer una comparación entre herramientas 3D.
-
4 Ver el wireframe
Vamos a convocar una opción para ver el alambrado.
-
5 Generar una esfera
Vamos a generar nuestra siguiente figura geométrica, una esfera.
-
6 Ejercicio: Alinear una esfera y cubo y que sean del mismo tamaño
Vas a alinear ambas figuras geométricas y colocarles el mismo tamaño.
-
7 Ejercicio: Rotaciones
Veremos cómo usar las rotaciones.
-
8 Generar un plano
Vamos a generar un plano y ubicarlo debajo de nuestras figuras.
-
9 Generar axes
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
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 Introducción
-
2 Script esqueleto
Vamos a crear una plantilla para futuros proyectos.
-
3 Crear la base y las barras
Vamos a crear la base y los lados del jardín.<br /> <br /> En el minuto 11 hablamos sobre el grosor del plano y el espacio que existe entre las barras y el plano; esto lo puedes arreglar empleando el posicionamiento del plano con un factor de 0.5 para que quede al rozando a la barra; esto lo veremos más adelante.
-
4 Crear la base y barras
Vamos a crear la base y los lados del jardín.
-
5 Crear arbol
Vamos a crear un árbol el cual consta de una caja y una esfera.
-
6 Crear casa
Vamos a crear una casa la cual consta de un cilindro y un cono.
-
7 Refactorizar código
Vamos a organizar nuestra aplicación en funciones.
-
8 Pequeños detalles
Vamos a terminar la app adaptando pequeños detalles.
-
9 Publicar en git
Aspectos Generales
-
1 Introducción
-
2 Snippets para VSC
Vamos a instalar una extensión para trabajar con Three.js.
-
3 Primeros pasos con la iluminación: materiales, y helpers
Vamos a conocer el uso de los materiales que pueden trabajar con las luces.
-
4 Proyectar sombras
Aprenderemos a proyectar sombras.
-
5 Primeros pasos con las animaciones: Desplazamientos
Vamos a crear una animación en la cual haremos que una esfera rebote en el entorno 3D.
-
6 Primeros pasos con las animaciones: Rotaciones
Vamos a rotar el cubo en todos sus ejes.
-
7 Tarea: Adaptar luces a la escena con sombras
Vas a adaptar unas luces a la escena con sombra.
-
8 Primeros pasos con las animaciones: Escalado
Vamos a escalar el cubo en todos sus ejes.
-
9 Primeros pasos con las animaciones: Color, pruebas
Vamos a realizar algunas pruebas para cambiar el color de un objeto.
-
10 Primeros pasos con las animaciones: Color, tweenmax
Vamos a realizar una animación para cambiar los colores de un objeto.<br /> https://www.cdnpkg.com/gsap/file/TweenMax.min.js/<br /> https://greensock.com/tweenlite/
-
11 Color del renderizado
Conoceremos la forma en la cual podemos cambiar el color del render.
-
12 Luz ambiental
Conoceremos cómo podemos habilitar una luz ambiental.
-
13 GUI Hacer experimentos fácilmente
Vamos a instalar un paquete para hacer pruebas con las animaciones mediante la UI.
-
14 Re-escalar ventana y escena
Aprenderemos a reescalar la escena cuando cambia el tamaño de la ventana.
-
15 Publicar en git
Proyecto: Agregar figuras geométricas bajo demanda
-
1 Introducción
-
2 Proyecto base
Vamos a crear un proyecto basado en otro anterior.
-
3 Agregar un cubo mediante un botón
Vamos a agregar un cubo mediante un botón.
-
4 Variar tamaño, color y posición Y del cubo
Vamos aspectos del cubo para que sea más dinámico.
-
5 Animar la escena con rotaciones
Vamos a adaptar las animaciones de rotaciones del cubo en la escena.
-
6 Agregar esferas o cubos en aleatorio
Vamos a agregar otro tipo de elementos geométricos.
-
7 Número de objetos
Vamos a agregar un escuchador para detectar cuantos elementos tenemos en la escena.
-
8 Remover cubos y esferas
Vamos a crear una función para remover figuras de la escena.
-
9 Publicar en git
Proyecto: Interactucar con una escena
-
1 Introducción
-
2 Interactuar con la escena con campos de formulario, cambiar color
Vamos a realizar algunas pruebas con los campos de formulario para interactuar con la escena.
-
3 Interactuar con la escena con campos de formulario, cambiar color parte 2
Vamos a cambiar el color de un cubo cada vez que seleccionemos un radios y aplicarle el valor que tenga establecido el radio.
-
4 Interactuar con la escena con campos de formulario, cambiar color parte 3
Vamos a cambiar el color de manera animada.
-
5 Interactuar con la escena, variar posicionamiento
Vamos a variar la posición del cubo con las flechas del teclado.
-
6 Interactuar con la escena, Crear un panel de opciones
Vamos a crear un banner para definir las opciones que vamos a poder realizar en la escena.
-
7 Interactuar con la escena, variar rotación
Vamos a colocar la opción de rotación en el panel.
-
8 Interactuar con la escena, variar escala
Vamos a colocar la opción de escala en el panel.
-
9 Interactuar con la escena, animar
Vamos a animar la escena para que los cambios no sean bruscos.
-
10 Interactuar con la escena, agregar luces y un plano
Vamos a agregar luces y sombras.
-
11 Mover la cámara, lookAt
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.
-
12 Mover la cámara, variar posición
Vamos a indicar la cámara como elemento desplazable.
-
13 Mover la luz
Con los mismos controles que usamos para mover la cámara, vamos a mover la luz.
-
14 Publicar en git
-
15 Extra: TrackballControls
Vamos a conocer un paquete que nos permite hacer una interacción fácilmente con la escena.
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 Introducción
-
2 Configuraciones iniciales
Configuración inicial del proyecto que vamos a duplicar.
-
3 Luz Ambiental
Crearemos una configuración personalizable mediante la GUI de la luz ambiental.
-
4 Control Spotlight
Asignaremos una nueva fuente de luz con su controlador.
-
5 Control Point Light
Asignaremos una nueva fuente de luz con su controlador y una sencilla animación.
-
6 Regular la intensidad de la luces y suspender sombreado
Vamos a realizar una adaptación para apagar las sombras cuando no tenemos intensidad en la luz.
-
7 Control Directional Light
Vamos a crear la luz de tipo direccional.
-
8 Point Light: decay, distance y MeshPhongMaterial
Vamos a crear un efecto de foco sobre una mesa empleando los elementos señalados anteriormente.
-
9 Publicar git
Proyecto: Materiales
-
1 Introducción
-
2 MeshDepthMaterial: Color basado en la cercanía
Presentaremos un material con el cual podemos variar la intensidad del color según la cercanía o lejanía de la cámara.
-
3 MultiMaterialObject: Combinar materiales
-
4 Publicar en git
Aprenderemos a combinar materiales.
Geometría
-
1 Geometrías básicas
Veremos las geometrías básicas para nuestra escena.
Cámaras
-
1 Cámaras ortogonal y perspectiva
Veremos el uso de las configuraciones de las cámaras que podemos usar en Three.js.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter