Áreas y tecnologías
- threejs
- node editor
- typescript
- vite
- Stack
Three.js, Vite y TypeScript
- Interacción
Arrastrar desde la paleta, conectar puertos, pan y zoom
Editor visual de nodos en 3D: puertos, cables y física de tarjetas sobre un canvas con pan y zoom.
Un editor de nodos dibujado con Three.js: tarjetas con sombra, miniatura y campos enlazables que se elevan y se mueven con física al interactuar. Los puertos de salida se conectan a los de entrada por color arrastrando un cable entre ellos.
01
Cómo funciona
Los nodos se arrastran desde la paleta al canvas; cada tarjeta define sus puertos y sus campos. Al levantar un nodo, la elevación y la animación física hacen que la tarjeta reaccione a la interacción. Un nodo puede crearse desde la propia interfaz definiendo sus puertos y tipos. Arrastrar un nodo a la esquina inferior derecha lo elimina; el fondo del canvas se mueve arrastrando y se escala con la rueda del ratón.
02
En acción
Cuatro tomas del editor: la estructura de nodos y cables, la creación de tipos desde la paleta, la física de las tarjetas al arrastrar y el canvas con pan y zoom.
Nodos y cables
Paleta y tipos de nodo
Física de tarjetas
Pan y zoom