Nodes now render images if provided.

Nodes now display their name.
(Nodes without image are not clickable atm).

datasets/aud1.json

@@ -24,7 +24,8 @@
     },
     {
       "id":  "id6",
-      "name": "Eulertouren"
+      "name": "Eulertouren",
+      "image": "eulertouren.png"
 
     },
     {

graph.js

@@ -13,19 +13,23 @@ loadGraph();
 async function loadGraph() {
     const dataUrl = plugin_path + 'datasets/aud1.json'
     const gData = await fetch(dataUrl).then(res => res.json())
-    Graph = ForceGraph3D()
+    Graph = ForceGraph3D({extraRenderers: [new THREE.CSS2DRenderer(), new THREE.CSS3DRenderer()]})
     (document.getElementById('3d-graph'))
         .graphData(gData)
         .nodeLabel('id')
         .nodeAutoColorBy('group')
         .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
-        .linkWidth(link => highlightLinks.has(link) ? 4 : 1)
+        .linkWidth(link => highlightLinks.has(link) ? 2 : 0.8)
         .onNodeClick(handleNodeClick)
         .onNodeHover(nodeHover)
         .onLinkHover(linkHover)
         .linkColor(linkColor)
         .linkOpacity(0.8)
-        .onEngineTick(loadComponents).width(getWidth());
+        .nodeThreeObjectExtend(false)
+        .nodeThreeObject(drawNode)
+        .onEngineTick(loadComponents)
+        .width(getWidth());
+    //Graph.renderer().sortObjects = true;
 }
 
 
@@ -63,6 +67,38 @@ function getCanvasDivNode() {
     return domNode.firstChild.firstChild.firstChild;
 }
 
+function drawNode(node) {
+    // Draw node as label + image
+    const nodeDiv = document.createElement('div');
+    group = new THREE.Group();
+
+    const labelDiv = document.createElement('div')
+    labelDiv.textContent = node.name;
+    labelDiv.style.color = node.color;
+    labelDiv.className = 'node-label';
+    nodeDiv.appendChild(labelDiv);
+
+    const cssobj = new THREE.CSS3DSprite(nodeDiv);
+    cssobj.scale.set(0.25, 0.25, 0.25);
+
+    if ('image' in node) {
+        cssobj.position.set(0, -7, 0);
+
+        const textureLoader = new THREE.TextureLoader();
+        const imageTexture = textureLoader.load(plugin_path + 'datasets/images/' + node.image);
+        const imageAlpha = textureLoader.load(plugin_path + 'datasets/images/alpha.png');
+        const material = new THREE.SpriteMaterial({map: imageTexture, alphaMap: imageAlpha, transparent: true,
+            alphaTest: 0.2, depthWrite:false, depthTest: false});
+        const sprite = new THREE.Sprite(material);
+        sprite.renderOrder = 999; // This may not be optimal. But it allows us to render the sprite on top of everything else.
+        sprite.scale.set(20, 20);
+        group.add(sprite)
+    }
+
+    group.add(cssobj)
+    return group;
+}
+
 
 function createInfoOverlay() {
     const sceneNode = getCanvasDivNode();

kg-style.css

@@ -2,6 +2,29 @@
     display: flex;
 }
 
+.node-image {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+    display: inline;
+    margin: 0 auto;
+}
+
+
+.node-label {
+    font-size: 14px;
+    color: white;
+    font-weight: bold;
+    /*text-align: center;*/
+    padding: 1px 4px;
+    border-radius: 4px;
+    background-color: rgba(0,0,0,0.7);
+    user-select: none;
+    z-index: 1;
+}
+
 .close-button {
     pointer-events: all;
     z-index: 99;
@@ -21,6 +44,7 @@
     height: 100%;
     background-color: whitesmoke;
     padding: 10px;
+    z-index: 20;
 }
 
 .detail-view-headline {

knowledge-space.php

@@ -11,6 +11,8 @@ function ks_add_graph(): string
 {
     $graph = '<script src="//unpkg.com/3d-force-graph"></script>';
     $three = '<script src="//unpkg.com/three"></script>';
+    $renderer = '<script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>';
+    $renderer2 = '<script src="//unpkg.com/three/examples/js/renderers/CSS3DRenderer.js"></script>';
     $div = '<div id="3d-graph"></div>';
     $plugin_dir = plugin_dir_url(__FILE__);
     //$dataset = $plugin_dir.'datasets/miserables.json';
@@ -20,7 +22,7 @@ function ks_add_graph(): string
     $script_path = $plugin_dir.'graph.js';
     $script = "<script src='$script_path'></script>";
 
-    return $graph . $three . $div . $variables . $script;
+    return $three . $renderer .$renderer2 . $graph . $div . $variables . $script;
 }
 
 function kg_load_css() {