example/html-nodes/index.html

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

  <script src="//unpkg.com/3d-force-graph"></script>
<!--  <script src="../../dist/3d-force-graph.js"></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="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
  <script type="module">
    import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';

    const Graph = new ForceGraph3D(document.getElementById('3d-graph'), {
      extraRenderers: [new CSS2DRenderer()]
    })
      .jsonUrl('../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)
    ;
  </script>
</body>