Figuras 3D en three.js 3D figures in three.js

Aplicaciones de gráficos 3D escritas con three.js y WebGL para la asignatura de Computación Gráfica del Máster en Inteligencia Artificial, Reconocimiento de Formas e Imagen Digital de la Universitat Politècnica de València: un brazo robótico construido en cinco iteraciones y un proyecto final, FENOBOT, un robot de agricultura de precisión. 3D graphics applications written with three.js and WebGL for the Computer Graphics course of the Master's in Artificial Intelligence, Pattern Recognition and Digital Imaging at Universitat Politècnica de València: a robotic arm built across five iterations and a final project, FENOBOT, a precision-agriculture robot.

Abrí cualquier escena Open any scene

Cada card abre la aplicación three.js alojada en GitHub Pages, en una pestaña nueva. Cinco iteraciones del brazo, cada una sumando una capa nueva del pipeline gráfico. Funcionan mejor en escritorio con un navegador con WebGL.

Each card opens the three.js application hosted on GitHub Pages, in a new tab. Five iterations of the arm, each adding a new layer of the graphics pipeline. They run best on desktop in a WebGL-capable browser.

Cinco iteraciones, un brazo articulado Five iterations, one articulated arm

El brazo robótico es el hilo conductor de la asignatura: se construye de forma incremental a lo largo de cinco prácticas, cada una añadiendo una capa de complejidad gráfica sobre la anterior hasta llegar a una aplicación three.js completa.

The robotic arm is the spine of the course: it is built incrementally across five practicals, each adding a layer of graphics complexity over the previous one until it becomes a complete three.js application.

El núcleo del problema es el grafo de escena. Un brazo articulado es una jerarquía de transformaciones: la base contiene al hombro, el hombro al antebrazo, el antebrazo a la mano. Cuando rotás un nodo padre, todos sus hijos heredan esa transformación. Modelar eso correctamente es entender de verdad cómo three.js compone matrices de transformación de padre a hijo.

The core of the problem is the scene graph. An articulated arm is a hierarchy of transforms: the base contains the shoulder, the shoulder the forearm, the forearm the hand. When you rotate a parent node, all its children inherit that transform. Modelling this correctly is what it means to truly understand how three.js composes parent-to-child transformation matrices.

A lo largo de las iteraciones, sobre esa base se van sumando los bloques clásicos de un motor 3D:

Across the iterations, the classic building blocks of a 3D engine are layered on top of that base:

Bloque Block	Qué aporta What it adds
Grafo de escenaScene graph	Jerarquía de Object3D y transformaciones heredadas Hierarchy of Object3D nodes and inherited transforms
Geometría y materialesGeometry & materials	Primitivas, mallas y materiales para dar forma al brazo Primitives, meshes and materials to shape the arm
IluminaciónLighting	Luces y sombreado para dar volumen a la escena Lights and shading to give the scene volume
Cámara y controlesCamera & controls	Navegación orbital para inspeccionar el modelo Orbital navigation to inspect the model
AnimaciónAnimation	Bucle de render que actualiza los ángulos de las articulaciones Render loop that updates the joint angles over time

FENOBOT — un robot de agricultura de precisión FENOBOT — a precision-agriculture robot

A diferencia de las prácticas del brazo —construidas con geometría primitiva—, el proyecto carga modelos 3D externos, con una barra de progreso mientras los recursos se descargan antes de mostrar la escena.

Unlike the arm practicals — built from primitive geometry — the project loads external 3D models, showing a progress bar while assets download before the scene is revealed.

FENOBOT no es un ejercicio aislado: conecta con la línea de trabajo en agricultura de precisión y visión por computador que también aparece en otras notas de este sitio. Es el punto donde la asignatura de gráficos se cruza con el dominio de investigación.

FENOBOT is not an isolated exercise: it connects with the line of work on precision agriculture and computer vision that also shows up in other notes on this site. It's where the graphics course meets the research domain.

Abierto a evolucionar Open to evolve

El repositorio completo está en GitHub bajo licencia MIT. La página original es de código abierto y está pensada para seguir mejorándose — tanto en diseño como en estructura.

The full repository is on GitHub under the MIT license. The original page is open source and meant to keep improving — in both design and structure.