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

Question

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.

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.

Hello Sebastian, Welcome to Stackoverflow. Your question is correctly written except for Code Example and Screenshot. For the screenshot it is always better to make a paste copy of image directly in question. For Code Example, you can also use code snipped documentated at https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks. Stackoverflow recommands that source code are saved on Stackoverflow and not on another site so that question is fully written on it. Can you do this little change ? — schlebe, Nov 20 '19 at 20:08
@schlebe Thanks for the advice. When I try to paste the image directly I get a warning from stackoverflow that my reputation has to be at least 10. Currently I have no other choice but to create a link. — SebastianM, Nov 20 '19 at 23:06
hello Sebastian, I have added image myself and I have also try to define your code in a snipped but this has not working perhaps because you sample need a .x3d file. For your issue, can you give an example without the need to use a file so that I can define a snipped. If this is impossible, I will stop to insist. — schlebe, Nov 21 '19 at 06:54
Hello schlebe, I've added the content of an exemplary .x3d file. Everything between the nodes could also be inserted directly under the scene node of the html file. — SebastianM, Nov 21 '19 at 09:10

SebastianM · Accepted Answer · 2019-11-21T19:16:51.270

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>

Good for you. But can you write your solution in your last answer giving some lines of code. I propose that you give your last — schlebe, Nov 21 '19 at 15:54

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

1 Answers1