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