Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
icejean opened this issue Feb 8, 2024 · 1 comment
Open

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

icejean opened this issue Feb 8, 2024 · 1 comment

Comments

@icejean
Copy link

icejean commented Feb 8, 2024

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
Copy link

neshte commented Feb 8, 2024

Uploaded a pull request to fix lib versions:

#666

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@neshte @icejean