X3DOM Anchor inline version

X3DOM Anchor inline version

Code

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.

3D layout

Elements This is a 3D layout using X3DOM.
Use the mouse to navigate the space - rotate, zoom in/out, ...

Click a node (sphere) for its description!

For an application see the European Airports core of order 13.

Security and local/web browsing

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.