如何将上传的 X3D 文件与内联节点合并？

Question

在我的 code example 中，我有一个上传按钮和一个 x3d 场景。从本地文件系统中选择一个 x3d 文件后，调用方法 URL.createObjectURL。

我的 html 文件的内容如下所示：

<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>

.x3d 文件可能如下所示：

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

我想将创建的对象 url 用于新生成的内联节点，但不幸的是模型没有显示出来。相反，加载圆圈停留在左上角，就像这样 screenshot 或在下图中。

我是不是忽略了什么，或者是否有其他方法可以将 x3d 文件加载到浏览器并从内联节点访问它？

更新：

同时我已经自己解决了这个问题。我没有想到的是将 contentType='model/x3d+xml' 与 Inline 一起使用，因为 blob url 不以 .x3d.

结尾

Answer 1

同时我自己解决了这个问题。我没有想到的是将 contentType='model/x3d+xml' 与 Inline 一起使用，因为 blob url 不以 .x3d.

结尾

现在的最终解决方案是：

<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>

如何将上传的 X3D 文件与内联节点合并？

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

inline

fileapi

x3d

x3dom