如何将上载的X3D文件与内联节点合并?

在我的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文件与内联节点合并?

我是否忽略了某些内容,还是有另一种方式将x3d文件加载到浏览器并从内联节点访问它?

更新

与此同时,我自己解决了这个问题。 我没想到的是将contentType='model/x3d+xml'与Inline一起使用,因为Blob网址不以.x3d结尾。

yl835389522laoye 回答:如何将上载的X3D文件与内联节点合并?

与此同时,我自己解决了这个问题。我没想到的是将contentType='model/x3d+xml'与Inline一起使用,因为Blob网址不以.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>
本文链接:https://www.f2er.com/3062966.html

大家都在问