example/emit-particles/index.html

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

  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/@babel/standalone"></script>

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

  <script src="../datasets/random-data.js"></script>
</head>

<body>
<div id="graph"></div>

<script type="text/jsx">
  const { useRef } = React;

  const data = genRandomTree();
  const distance = 1400;

  const CameraOrbit = () => {
    const fgRef = useRef();

    return <ForceGraph3D
      ref={fgRef}
      graphData={data}
      linkDirectionalParticleColor={() => 'red'}
      linkDirectionalParticleWidth={6}
      linkHoverPrecision={10}
      onLinkClick={link => fgRef.current.emitParticle(link)}
    />;
  };

  ReactDOM.render(
    <CameraOrbit />,
    document.getElementById('graph')
  );
</script>
</body>