To include an X3D scene with node descriptions in Anchors (for example Elements) into a wiki page using X3DOM you can adapt and insert into your wiki page the following code provided by Andreas Plesch, Sun 15-Jan-23.
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*;"> <title>Elements</title> <script type='text/javascript' src='https://www.x3dom.org/download/dev/x3dom.js'> </script> <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'> </link> </head> <body> <b>This is a 3D layout using <a href="https://www.x3dom.org/">X3DOM</a>.<br> Use the mouse to navigate the space - rotate, zoom in/out, ...</b> <p id='message'> <b style="color:red;">Click a node (sphere) for its description!</b> </p> <X3D version='3.0' profile='Immersive' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.0.xsd' width='800px' height='800px'> <Scene> <Inline url='https://raw.githubusercontent.com/bavla/ibm3m/master/multiway/X3D/elements.x3d' namespacename='Elements'></Inline> <Scene> </X3D> </body> <script> document.onload = function () { function loadHandler() { function clickHandler(e) { var hitShape = e.target; // always the Shape clicked var anchor = hitShape.parentElement.parentElement; //grandparent is Anchor var description = anchor.getAttribute('description'); var msgArea = document.getElementById('message'); msgArea.textContent = "Clicked node description: " + description; }; console.log("HERE"); var anchors = document.querySelectorAll('Anchor'); anchors.forEach(function(anchor) { anchor.addEventListener("click", clickHandler, false); }); } document.querySelector('Inline').onload = loadHandler; } </script> </html>
And here is the result.
Click a node (sphere) for its description!
For an application see the European Airports core of order 13.
There were problems with browsing the HTML file with a layout locally or from the server (http://vlado.fmf.uni-lj.si/test/anchor.htm). Andreas Plesch explains that the reason for this is the line
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*;">
“There is this error message in the console: Refused to execute inline script because it violates the following Content Security Policy directive: “default-src 'self' [https:*”]https:*”. Either the 'unsafe-inline' keyword, a hash ('sha256-R5a29waRh/UcgfGNNsOEughkTCufhjckKO8svocjcNw='), or a nonce ('nonce-…') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.”
In a secure environment, you can comment or delete this line
<!-- meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*;" -->
and the problem disappears (http://vlado.fmf.uni-lj.si/test/anchorInline.html). Otherwise, it seems that the right environment settings could help.