Primeros pasos con Three.js - Animaciones 3D con JavaScript

Curso para conocer los fundamentos de Three.js, trabajar con figuras, cámaras, iluminación, materiales y escenas; interactuar con ellas y con esto conocer como funciona Three.js

17-03-2022 - Andrés Cruz

• Categoría
• /
• JavaScript
• /
• Primeros pasos con Three.js - Animaciones 3D con JavaScript

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.