APRENDE THREE.JS

Domina el arte de añadir 3D a tu web

Evento realizado el 29 de marzo de 2025

Descripción del evento

El taller de Three.js está diseñado para quienes ya tienen experiencia previa en JavaScript y desean dar el salto al desarrollo de experiencias 3D en la web.

En el transcurso de 4 horas, los participantes aprenderán a crear escenas interactivas, manejar luces, cámaras y objetos 3D, así como aplicar materiales y texturas para añadir realismo. Además, se explorarán animaciones y mejores prácticas para optimizar el rendimiento.

Al finalizar, los asistentes tendrán las bases necesarias para continuar profundizando en proyectos de visualización 3D, gráficos interactivos y aplicaciones web inmersivas.

Acerca del evento

A continuación, te presentamos un detallado resumen de las diversas actividades que se llevaron a cabo durante este evento. Cada una de ellas fue diseñada para brindar una experiencia enriquecedora, fomentando la participación, el intercambio de ideas y el fortalecimiento de los lazos entre los asistentes. Descubre todo lo que ocurrió y cómo cada momento contribuyó al éxito de esta jornada.


1.- Introducción a Three.js

- ¿Qué es Three.js y por qué usarlo?

- Requerimientos y entorno de desarrollo (configuración inicial).

- Repaso de los fundamentos de 3D en la web (canvas, WebGL).


2.- Creando la Primera Escena

- Instanciando la escena, la cámara y el renderizador.

- Creación de geometrías básicas (cubos, esferas, planos).

- Uso de materiales y texturas simples.


3.- Cámaras, Luces y Sombras

- Tipos de cámaras (Perspective vs. Orthographic).

- Iluminación: direccional, ambiental, puntual.

- Configuración de sombras y reflexiones.


4.- Animación y Control de Objetos

- Manejo de animaciones con Three.js (requestAnimationFrame).

- Interacción con eventos (mouse, teclado) para mover la cámara u objetos.

- Incorporación de librerías complementarias (GSAP u otras) para animaciones avanzadas.


5.- Modelos Externos y Escenas Más Complejas

- Importación de modelos 3D (GLTF, OBJ, etc.).

- Texturas y materiales avanzados.

- Consideraciones de rendimiento y optimización.


6.- Proyecto de Cierre y Buenas Prácticas

- Creación de una mini-escena o demo interactiva.

- Tips de optimización (render loops, reducción de carga).

- Recursos y siguientes pasos para profundizar en Three.js.


Speakers | Invitados

Estos profesionales compartieron valiosas ideas y experiencias que enriquecieron a todos los asistentes. Sus presentaciones abordaron temas relevantes y proporcionaron herramientas prácticas que continúan siendo aplicables en la actualidad.

Cargando speakers...

Eventos relacionados

Mantente al día y conoce los próximos eventos de la comunidad tech en el caribe