vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.67k stars 825 forks source link

The text-links example is broken by the latest three.js release r161 #665

Open icejean opened 7 months ago

icejean commented 7 months ago

The text-links example is broken by the latest three.js release r161, I've written an example according to the basic example of spritetext.

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

  <script src="//unpkg.com/three"></script>
  <script src="//unpkg.com/3d-force-graph"></script>
  <script type="importmap">{ "imports": {
    "three": "//unpkg.com/three/build/three.module.js",
    "three/addons/": "//unpkg.com/three/examples/jsm/",
    "three-spritetext": "//unpkg.com/three-spritetext/dist/three-spritetext.mjs"
  }}</script>

  <style>
    .node-label {
      font-size: 12px;
      padding: 1px 4px;
      border-radius: 4px;
      background-color: rgba(0,0,0,0.5);
      user-select: none;
    }
  </style>

</head>

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

  <script type="module">
    import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
    import SpriteText from "three-spritetext";

    const Graph = ForceGraph3D({
      extraRenderers: [new CSS2DRenderer()]
    })
    (document.getElementById('3d-graph'))
      .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/master/example/datasets/miserables.json')
      .nodeAutoColorBy('group')
      .nodeThreeObject(node => {
        const nodeEl = document.createElement('div');
        nodeEl.textContent = node.id;
        nodeEl.style.color = node.color;
        nodeEl.className = 'node-label';
        return new CSS2DObject(nodeEl);
      })
      .nodeThreeObjectExtend(true)
        .linkThreeObject(link => {
          // extend link with text sprite
          const sprite = new SpriteText(`${link.source} > ${link.target}`);
          sprite.color = 'lightgrey';
          sprite.textHeight = 1.5;
          return sprite;
        })
        .linkPositionUpdate((sprite, { start, end }) => {
          const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
            [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
          })));

          // Position sprite
          Object.assign(sprite.position, middlePos);
        })
        ;      
  </script>
</body>
neshte commented 7 months ago

Uploaded a pull request to fix lib versions:

https://github.com/vasturiano/3d-force-graph/pull/666