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

Curso en Legacy (No tendrá más actualizaciones)

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.

 

 

Conclusiones

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

 

 

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.

17-03-2022 - Andrés Cruz

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