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

<canvas id="netCanvas"></canvas>
<div class="ng-badge">48 nodes · 3D force layout</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#050810}
#netCanvas{display:block;width:100%;height:100%;cursor:grab}
#netCanvas:active{cursor:grabbing}
.ng-badge{position:fixed;left:18px;bottom:18px;padding:7px 13px;border-radius:7px;background:rgba(10,14,26,0.7);border:1px solid rgba(52,211,153,0.25);color:#a7f3d0;font:12px ui-monospace,monospace;backdrop-filter:blur(6px)}

const canvas = document.getElementById('netCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
camera.position.set(0, 0, 13);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.8;

scene.add(new THREE.AmbientLight(0x1e293b, 0.9));
const light = new THREE.PointLight(0x34d399, 1.6, 40);
light.position.set(6, 6, 8);
scene.add(light);

// Nodes are scattered inside a sphere volume (not a flat plane) so the
// network reads as genuinely three-dimensional from every camera angle.
const NODE_COUNT = 48;
const RADIUS = 5;
const nodes = [];
const nodeGroup = new THREE.Group();
scene.add(nodeGroup);

const nodeGeo = new THREE.SphereGeometry(0.09, 12, 12);
const nodeMat = new THREE.MeshStandardMaterial({ color: 0x34d399, emissive: 0x065f46, emissiveIntensity: 0.7 });

for (let i = 0; i < NODE_COUNT; i++) {
  // Uniform random point inside a sphere via rejection-free spherical coords.
  const u = Math.random(), v = Math.random();
  const theta = u * Math.PI * 2;
  const phi = Math.acos(2 * v - 1);
  const r = RADIUS * Math.cbrt(Math.random());
  const x = r * Math.sin(phi) * Math.cos(theta);
  const y = r * Math.sin(phi) * Math.sin(theta);
  const z = r * Math.cos(phi);

  const mesh = new THREE.Mesh(nodeGeo, nodeMat);
  mesh.position.set(x, y, z);
  nodeGroup.add(mesh);

  nodes.push({ mesh, base: new THREE.Vector3(x, y, z), phase: Math.random() * Math.PI * 2, speed: 0.4 + Math.random() * 0.6 });
}

// Connect each node to its two or three geometrically nearest neighbors —
// this produces a natural-looking mesh of edges instead of either a fully
// connected graph (too dense) or fully random pairs (too sparse/arbitrary).
const edges = [];
nodes.forEach((n, i) => {
  const distances = nodes
    .map((other, j) => ({ j, d: n.base.distanceTo(other.base) }))
    .filter(e => e.j !== i)
    .sort((a, b) => a.d - b.d)
    .slice(0, 3);
  distances.forEach(e => {
    const key = i < e.j ? i + '-' + e.j : e.j + '-' + i;
    if (!edges.find(x => x.key === key)) edges.push({ key, a: i, b: e.j });
  });
});

const linePositions = new Float32Array(edges.length * 2 * 3);
const lineGeometry = new THREE.BufferGeometry();
lineGeometry.setAttribute('position', new THREE.BufferAttribute(linePositions, 3));
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x34d399, transparent: true, opacity: 0.35 });
const lines = new THREE.LineSegments(lineGeometry, lineMaterial);
scene.add(lines);

const linePosAttr = lineGeometry.getAttribute('position');

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

let t = 0;
function animate() {
  requestAnimationFrame(animate);
  t += 0.012;

  // Each node bobs gently around its base position with its own phase and
  // speed, so the graph feels alive without ever losing its overall shape.
  nodes.forEach(n => {
    const wobble = Math.sin(t * n.speed + n.phase) * 0.18;
    n.mesh.position.set(
      n.base.x + wobble,
      n.base.y + Math.cos(t * n.speed + n.phase) * 0.18,
      n.base.z + wobble * 0.6
    );
  });

  edges.forEach((e, i) => {
    const a = nodes[e.a].mesh.position;
    const b = nodes[e.b].mesh.position;
    linePosAttr.setXYZ(i * 2, a.x, a.y, a.z);
    linePosAttr.setXYZ(i * 2 + 1, b.x, b.y, b.z);
  });
  linePosAttr.needsUpdate = true;

  controls.update();
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();