Proof of concept for overlay text.

graph.js

@@ -14,16 +14,32 @@ const Graph = ForceGraph3D()
     .onNodeHover(nodeHover)
     .onLinkHover(linkHover);
 
-const sphereGeometry = new THREE.SphereGeometry(10000, 32, 32);
-//const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
-const loader = new THREE.TextureLoader();
-//const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide}); //THREE.BackSide
-const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'background.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
-const mesh = new THREE.Mesh(sphereGeometry, planeMaterial);
-mesh.position.set(0, 0, 0);
-//mesh.rotation.set(0.5 * Math.PI, 0, 0);
+add_background()
+drawOverlay()
+
+function drawOverlay() {
+    const domNode = document.getElementById('3d-graph');
+    const sceneNode = domNode.firstChild.firstChild.firstChild
+    const overlayNode = document.createElement('div');
+    overlayNode.className = 'kg-overlay';
+    overlayNode.innerText = 'Hello there!';
+    //sceneNode.appendChild(overlayNode);
+    sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2])
+}
+
 
-Graph.scene().add(mesh);
+function add_background() {
+    const sphereGeometry = new THREE.SphereGeometry(20000, 32, 32);
+    //const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
+    const loader = new THREE.TextureLoader();
+    //const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide}); //THREE.BackSide
+    const planeMaterial = new THREE.MeshBasicMaterial({map: loader.load(plugin_path + 'background.jpg'), side: THREE.DoubleSide}); //THREE.BackSide
+    const mesh = new THREE.Mesh(sphereGeometry, planeMaterial);
+    mesh.position.set(0, 0, 0);
+    //mesh.rotation.set(0.5 * Math.PI, 0, 0);
+
+    Graph.scene().add(mesh);
+}
 
 
 function updateLinks() {
@@ -58,6 +74,7 @@ function focusOnNode(node) {
     );
 }
 
+
 function nodeHover(node) {
 
     // no state change
@@ -79,6 +96,7 @@ function nodeHover(node) {
     updateHighlight();
 }
 
+
 function linkHover(link) {
     highlightNodes.clear();
     highlightLinks.clear();
@@ -92,6 +110,7 @@ function linkHover(link) {
     updateHighlight();
 }
 
+
 function updateHighlight() {
     // trigger update of highlighted objects in scene
     Graph

kg-style.css

+#3d-graph {
+    display: flex;
+}
+
+.kg-overlay {
+    position: absolute;
+    bottom: 5px;
+    pointer-events: none;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    display: inline-block;
+    background-color: rgba(0,0,0,.6);
+    padding: 5px;
+}
+
+.renderer_label {
+    /*position: absolute;*/
+    bottom: 5px;
+    width: 100%;
+    /*color: white;*/
+    /*z-index: 10;*/
+    /*display: block;*/
+    text-align: center;
+}
\ No newline at end of file

knowledge-space.php

@@ -23,4 +23,10 @@ function ks_add_graph(): string
     return $graph . $three . $div . $variables . $script;
 }
 
+function kg_load_css() {
+    $plugin_dir = plugin_dir_url(__FILE__);
+    wp_enqueue_style('kg-style', $plugin_dir.'kg-style.css');
+}
+
+add_action('wp_enqueue_scripts', 'kg_load_css');
 add_shortcode('knowledge-space', 'ks_add_graph');