vectojs-graph3dlisted
Install: claude install-skill vectojs/vectojs-skills
# VectoJS Graph3D
`@vectojs/graph3d` renders a force-directed graph as **instanced** Three.js
geometry and keeps layout strictly separate from rendering. Its only peer is
`three`; it does **not** depend on `@vectojs/three` or `@vectojs/core`, so a
graph can be dropped into a plain Three.js app. (`@vectojs/three` becomes
relevant only if you also want VectoJS UI panels in the same 3D scene.)
## Architecture: layout and renderer are decoupled
The renderer is deliberately ignorant of how positions were produced.
```ts
import { Graph3D, VectoForceLayout, GraphInteraction } from "@vectojs/graph3d";
const graph = new Graph3D({ nodeRadius: 4 });
graph.setGraphData({ nodes, links }); // rebuilds instanced buffers
const layout = new VectoForceLayout();
layout.setGraph({ nodes, links });
function frame() {
const settled = layout.step(); // advance the simulation
graph.applyPositions(layout.positions); // xyz triplets in node order
if (!settled) requestAnimationFrame(frame);
}
```
- `setGraphData()` rebuilds GPU resources — instanced buffers are fixed-size, so
a changed node/link **count** means fresh meshes. Styling-only changes to the
same topology don't need it.
- `applyPositions(Float32Array)` takes xyz triplets in node order. Call it after
every layout step that moved something.
- Unknown link endpoints **throw** rather than silently drawing a line to the
origin — a wrong id is a bug, not a visual glitch.
## Choosing a layout
Both implement the same `GraphLa