Three.js Network Graph — 3D Nearest-Neighbor Node Visualization

The Three.js Network Graph snippet scatters 48 glowing nodes through a spherical volume, connects each one to its nearest neighbors, and animates every node bobbing gently in place while the connecting lines redraw every frame to follow them — a floating, organic node-and-edge visualization built with core Three.js and its OrbitControls addon, both loaded from a CDN.

Uniform random points inside a sphere, not a cube or a flat plane

Scattering points with plain Math.random() on each of X, Y, and Z independently produces a cube-shaped distribution with visibly denser corners — not a sphere. This snippet instead samples each node's position using spherical coordinates (theta, phi) plus a cube-root-scaled random radius, which is the standard formula for a *uniform* random distribution inside a sphere's volume rather than clustered toward its center or corners. The result is a genuinely spherical, evenly-distributed node cloud from any viewing angle — essential for a graph that's meant to be dragged and viewed from all sides.

Nearest-neighbor edges, not fully random or fully connected

Connecting every node to every other node would produce an unreadable tangle of over a thousand lines; connecting nodes to purely random partners would look arbitrary rather than structural. Instead, each node computes its distance to all 47 others, sorts by distance, and connects to its three geometrically closest neighbors — deduplicated so a pair only gets one edge even if both nodes pick each other. This nearest-neighbor rule is what makes the result look like an organic, plausible network topology rather than a random scribble or an overwhelming mesh.

One LineSegments object for every edge, updated every frame

Rather than one THREE.Line per connection, all edges share a single THREE.LineSegments object backed by one flat BufferGeometry — every pair of positions in that buffer represents one edge's two endpoints. Every frame, after nodes move, the loop rewrites each edge's two endpoint positions directly into that shared buffer and flags needsUpdate, keeping the whole connection mesh in one GPU-friendly draw call no matter how many edges exist.

Independent per-node bobbing keeps the shape stable

Each node stores its own base position (its true, structural location) plus a random phase and speed. Every frame, the node's *rendered* position is offset from that saved base by a small sine/cosine wobble — never accumulated onto the previous frame's already-wobbled position. This is the same original-position-plus-offset principle used to keep any procedural animation bounded: the network visibly breathes and drifts, but it never drifts away from its overall spherical shape or collapses over time.

OrbitControls with auto-rotate for a "floating in space" feel

The camera auto-rotates slowly on its own via OrbitControls' autoRotate, while still responding immediately to a manual drag at any time — damping smooths the transition back to auto-rotation once the visitor lets go, so the graph never feels like it's fighting the visitor's input.

Where this pattern applies

The scatter-plus-nearest-neighbor-edges technique generalizes directly to knowledge graphs, dependency visualizations, social network diagrams, or any dataset where "things relate to nearby things." Pair it with a particle network for a 2D-versus-3D comparison, or contrast its organic, floating structure against the rigid, hierarchical orbits of the solar system snippet.