<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    const elem = document.getElementById('3d-graph');

    const Graph = ForceGraph3D()
      (elem)
        .jsonUrl('../datasets/miserables.json')
        .nodeLabel('id')
        .nodeAutoColorBy('group')
        .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
        .onNodeClick(node => {
          // Aim at node from outside it
          const distance = 40;
          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
          Graph.cameraPosition({ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, node);
        });
  </script>
</body>
<head>
  <style> body { margin: 0; } </style>

  <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js"></script>

  <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    const elem = document.getElementById('3d-graph');

    const Graph = ForceGraph3D()
      (elem)
        .jsonUrl('../datasets/miserables.json')
        .nodeLabel('id')
        .nodeAutoColorBy('group')
        .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
        .onNodeClick(node => {
          // Aim at node from outside it
          const distance = 40;
          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
          const finalPos = { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio };
          const finalLookAt = node; // has x,y,z attributes

          const { lookAt, ...pos } = Graph.cameraPosition(); // current camera position / lookAt

          TweenLite.to(lookAt, 1, finalLookAt); // Face node in 1s

          TweenLite.to(pos, 3, Object.assign({
            onUpdate: () => Graph.cameraPosition(pos, lookAt)
          }, finalPos));
        });
  </script>
</body>
Add tween animation to camera moves
Add tween animation to camera moves
