如何将上传的 X3D 文件与内联节点合并?
How to combine an uploaded X3D file with an inline node?
在我的 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.
结尾
同时我自己解决了这个问题。我没有想到的是将 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>
在我的 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.
同时我自己解决了这个问题。我没有想到的是将 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>