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

17-03-2022 - Andrés Cruz

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

Precio mínimo:

$4.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

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:

  • 1. Primeros pasos

    Presentaremos la tecnología y daremos los primeros pasos con la misma; la idea de esta sección es conocer el uso de las escenas, cámaras, figuras e iluminación.

  • 2. Proyecto: Jardín

    Crearemos un proyecto de un jardín, que consta de unos separadores, un árbol y una casa, para poner en práctica lo aprendido anteriormente.

  • 3. Aspectos Generales

    En esta sección, aprenderemos aspectos básicos sobre Three.js, como la iluminación, sombras, primeros pasos con las animaciones e interactuar con las escenas.

  • 4. Proyecto: Interactuar con la escena

    Esta sección está enfocada en interactuar con la escena, para eso emplearemos tanto campos de formularios como teclas del teclado, para rotar, cambiar colores, desplazar y escalar la figura geométrica; también aprenderemos a posicionar la cámara en la escena.

  • 5. Proyecto: Agregar figuras geométricas bajo demanda

    Seguimos trabajando con la interacción del usuario con la escena, y vamos a agregar figuras geométricas bajo demanda.

  • 6. Proyecto: Luces

    Este proyecto está destinado a presentar las distintas fuentes de luces que tenemos en Three.js, y conocer cómo interactúan con elementos en la escena.

  • 7. Proyecto: Materiales

    Vamos a conocer otros materiales en Three.js, para hacer escenas más ricas y con más opciones.

  • 8. Geometrías

    En esta sección vamos a presentar las distintas figuras geométricas que tenemos a nuestra disposición.

  • 9. Cámaras

    En esta sección vamos a presentar el uso de las cámaras de perpectiva y ortogonal

  • Aplicación de gestión

    Crearemos una aplicación de gestión con carca de productos, traza, filtros y exportación vía PDF.

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

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

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.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!