Search code examples
inlinefileapix3dx3dom

How to combine an uploaded X3D file with an inline node?

In my code example I have an upload button and an x3d scene. After choosing an x3d file from the local file system the method URL.createObjectURL is called.

The content of my html file looks like this:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Include an external X3D-File</title>
        <script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
        <link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
    </head>
    <body>
        <input type="file" onchange="onFileChange(event)" accept=".x3d">
        <x3d width='500px' height='400px'>
            <scene id="scene">
            </scene>
        </x3d>
    </body>

    <script>
        function onFileChange(event) {
          var inline = document.createElement("Inline");
          inline.setAttribute("nameSpaceName", "Inline");
          inline.setAttribute("mapDEFToID", true);
          var url = URL.createObjectURL(event.target.files[0]);
          inline.setAttribute("url", url);
          document.getElementById("scene").appendChild(inline);
          console.log("ObjectURL: " + url);
        }
    </script>
</html>

An .x3d file could look like this:

<x3d width="500px" height="400px">
  <scene>
    <shape>
      <appearance>
        <material diffuseColor='red'></material>
      </appearance>
      <box></box>
    </shape>
  </scene>
</x3d>

I want to use the created object url for a new generated inline node but unfortunately the model is not showing up. Instead a loading circle stays at the upper left corner like in this screenshot or in image below.

enter image description here

Did I overlook something or is there another way to load an x3d file into the browser and access it from the inline node?

Update:

In the meantime I've solved the problem by myself. Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.

Solution

  • In the meantime I've solved the problem by myself. Which I did not think about was to use contentType='model/x3d+xml' with Inline because the blob url does not end with .x3d.

    The final solution is now:

    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>Include an external X3D-File</title>
        <script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'> </script>
        <link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/>
    </head>
    <body>
        <input type="file" onchange="onFileChange(event)" accept=".x3d">
        <x3d width='500px' height='400px'>
            <scene id="scene">
            </scene>
        </x3d>
    </body>

    <script>
        function onFileChange(event) {
          var inline = document.createElement("Inline");
          inline.setAttribute("nameSpaceName", "Inline");
          inline.setAttribute("mapDEFToID", true);
          inline.setAttribute("contentType", "model/x3d+xml");
          var url = URL.createObjectURL(event.target.files[0]);
          inline.setAttribute("url", url);
          document.getElementById("scene").appendChild(inline);
          console.log("ObjectURL: " + url);
        }
    </script>
</html>