<head>
	<script src="//unpkg.com/three"></script>
	<script src="//unpkg.com/three-spritetext"></script>
	<script src="//unpkg.com/3d-force-graph"></script>
</head>

<body onresize="resizeGraph()">
	<div id="3d-graph" style="width: 100%; height: 100%; position: relative; top: 20px; left: 400px;></div>
</body>
// Random tree
const N = 300;
const gData = {
  nodes: [...Array(N).keys()].map((i) => ({ id: i })),
  links: []
}

const graph = ForceGraph3D()(document.getElementById("3d-graph"))
  .graphData(gData)
  .nodeRelSize(10);

const controls = graph.controls();
const camera = graph.camera();
controls.noZoom = true;

controls.domElement.addEventListener("wheel", (event) => {
  event.preventDefault();

  const { clientWidth, clientHeight } = controls.domElement;
  const x = (event.clientX / clientWidth) * 2 - 1;
  const y = -(event.clientY / clientHeight) * 2 + 1;

  let vector = new THREE.Vector3(x, y, 0.5);
  vector.unproject(camera);
  vector.sub(camera.position);

  const factor = 50;

  if (event.deltaY < 0) {
    camera.position.addVectors(camera.position, vector.setLength(factor));
    controls.target.addVectors(controls.target, vector.setLength(factor));
  } else if (event.deltaY > 0) {
    camera.position.subVectors(camera.position, vector.setLength(factor));
    controls.target.subVectors(controls.target, vector.setLength(factor));
  }
  camera.updateProjectionMatrix();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.