Open icejean opened 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>
Uploaded a pull request to fix lib versions:
https://github.com/vasturiano/3d-force-graph/pull/666
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.