3D Graph Visualization
Node-link graphs in 3D space. Ideal for complex relationships.
Force-Directed Graph
Nodes repel each other, edges pull connected nodes together. Click a node to select.
// Force-directed layout algorithm
useFrame((_, delta) => {
nodes.forEach(node => {
// Repulsion from other nodes
nodes.forEach(other => {
const diff = node.position.clone().sub(other.position);
const dist = diff.length();
if (dist > 0 && dist < 5) {
node.velocity.add(diff.normalize().multiplyScalar(0.1 / dist));
}
});
// Attraction along edges
edges.forEach(edge => {
if (edge.source === node.id) {
const target = nodes.find(n => n.id === edge.target);
const diff = target.position.clone().sub(node.position);
node.velocity.add(diff.multiplyScalar(0.01));
}
});
// Apply velocity with damping
node.position.add(node.velocity.multiplyScalar(delta));
node.velocity.multiplyScalar(0.95);
});
});Agent Network
Structured 3D layout for agent orchestration visualization.
// Hierarchical 3D layout for agent networks
// Level 0: Orchestrator (top)
// Level 1: Primary agents (middle)
// Level 2: Worker agents (bottom)
const layout = {
orchestrator: { y: 4, radius: 0 },
primary: { y: 2, radius: 3 },
worker: { y: 0, radius: 5 },
};