← ClaudeAtlas

vectojs-graph3dlisted

Use when building or debugging a 3D force-directed graph with @vectojs/graph3d — Graph3D instanced rendering, the GraphLayout contract, VectoForceLayout (in-house Barnes-Hut) vs D3ForceLayout, GraphInteraction hover/select/drag-to-pin, or when a graph layout is slow, unstable, or non-deterministic.
vectojs/vectojs-skills · ★ 0 · AI & Automation · score 70
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