diff --git a/background.jpg b/background.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2849e4557b3add389d443fbd1fcc85edcff884ed Binary files /dev/null and b/background.jpg differ diff --git a/graph.js b/graph.js index 0d4ffac135b2d0082996cdc00826d08558d74ecc..f7db15f9d3335f5c6b759a511fec0615bce2f322 100644 --- a/graph.js +++ b/graph.js @@ -5,7 +5,7 @@ let hoverNode = null; const Graph = ForceGraph3D() (document.getElementById('3d-graph')) - .jsonUrl(dataset) + .jsonUrl(plugin_path + 'datasets/miserables.json') .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)') @@ -14,6 +14,17 @@ 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); + +Graph.scene().add(mesh); + function updateLinks() { gData = Graph.graphData(); diff --git a/knowledge-space.php b/knowledge-space.php index e7efbd0ec832c84d09022a8be6a657f64eaa8c68..8fed53d7682482d15c38311f03785d8ebb4bb20f 100644 --- a/knowledge-space.php +++ b/knowledge-space.php @@ -10,16 +10,17 @@ Author: Matthias Konitzny function ks_add_graph(): string { $graph = '<script src="//unpkg.com/3d-force-graph"></script>'; + $three = '<script src="//unpkg.com/three"></script>'; $div = '<div id="3d-graph"></div>'; $plugin_dir = plugin_dir_url(__FILE__); - $dataset = $plugin_dir.'datasets/miserables.json'; + //$dataset = $plugin_dir.'datasets/miserables.json'; $variables = "<script> - var dataset = '$dataset'; + var plugin_path = '$plugin_dir'; </script>"; $script_path = $plugin_dir.'graph.js'; $script = "<script src='$script_path'></script>"; - return $graph . $div . $variables . $script; + return $graph . $three . $div . $variables . $script; } add_shortcode('knowledge-space', 'ks_add_graph');