在我的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网址不以.x3d结尾。